如何从Vue中快速入手小程序

港控/mmm° 2022-12-23 03:17 149阅读 0赞

## 什么是小程序？ ##

微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用

## 微信小程序的使用流程 ##

**1.注册地址**  
https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh\_CN

> 注册完登录小程序后台：开发->开发设置–AppID(小程序ID)

**2.下载地址**  
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html  
**3.创建小程序项目 快乐用小程序开发项目**

**4.预览小程序**  
在小程序中点击微信开发者工具顶部的预览

## 微信小程序目录 ##

**1.pages**  
项目开发目录 相当于vue脚手架中的src目录

一个完整的小程序页面包括4部分：

1.  xxx.wxml :模板页面（也称视图，类似于html）
    
    常用标签：  
    view:相当于div  
    button:按钮  
    image:嵌入图像 类似于img  
    text:添加文本 相当于span  
    block:标签一个组织区域，最终不会渲染到页面上，相当于vue中的template
2.  xxx.wxss:页面样式 相当于css
    
    注意：用rpx代表响应式单位 类似于rem

3.xxx.js: 写页面逻辑的

4.xxx.json:页面的配置

注意：页面的json配置来源于全局（app.json）配置中window字段

**2.utils**  
1.存放封装的工具函数的目录  
2.封装工具类js的地方  
**3.app.js**  
是小程序的入口js文件 相当于vue中的main.js  
**4.app.json**  
小程序的全局配置

例如：

{ 
    //小程序管理的所有页面路径
      "pages":[  
        "pages/index/index",
        "pages/logs/logs"
      ],
      
      //小程序的窗口表现
      "window":{ 
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#000",
        "navigationBarTitleText": "1909A",
        "navigationBarTextStyle":"white"
      },
      "style": "v2",
      "sitemapLocation": "sitemap.json"
    }

**5.app.wxss**  
是小程序的全局css样式，全影响所有的页面外观

## **小程序的大体区别** ##

**1.像素值wxss相关**

> rpx: 可以根据屏幕宽度进行自适应  
> 使用：量多少使用多少 用ps测量 100px,就是100rpx

**2.开发指令**  
1.遍历 wx:for 相当于vue的v-for

例如：
     <view wx:for="{ { list2 }}" wx:for-index="n" wx:for-item="itm">
               <text>编号：{ {  n+1 }}---姓名：{ {  itm.name }}</text>
     </view>

> item：遍历的每一项  
> index:每一项的下标  
> wx:for-index:更改下标名  
> wx:for-item:更改每一项的名称

**2.条件渲染**

> wx:if 相当于vue的v-if true:显示，false：隐藏  
> wx:if 满足条件渲染  
> wx:else 不满足条件渲染  
> hidden 相当于vue的v-show的反值 true:隐藏，false：显示

**3.绑定事件**

bind+事件名="方法名"
    
    例如：
     <button bindtap="deleteItem">X</button>
     
     交互过程中视图不同步如何解决？
     
     this.setData()
     
       this.setData({ 
         list2: this.data.list2
       })

**4.传参**

自定义属性：将页面上的参数传递给js
    
      <view data-自定义名称="参数值">
      
     通过触发事件，在事件方法中接收
     
      let { index}=e.currentTarget.dataset
      
      deleteItem(e) { 
        let { index}=e.currentTarget.dataset
        console.log(index)
    
       
      },

路由跳转传参:页面与页面之间传参