微信小程序与uni-app的区别

叁歲伎倆 2022-12-05 13:50 180阅读 0赞

前提摘要：项目多以微信小程序及uni-app为主，使用uni-app也主要用于做小程序。  
在微信小程序的平台上，两者的基础用法除了语法外基本一致，在此不讨论使用uni-app制作H5、App的特殊情况，只说最通俗易懂的语法区别。

*  触摸事件名称：  
    ①微信小程序：`bindtap`  
    ②uni-app：`@click`
 *  函数传参方式：  
    ①微信小程序：`<view bindtap="click" data-id="id"></view>`  
    ②uni-app：`<view @click="click(id)"></view>`
 *  函数接收参数：  
    ①微信小程序：`function(e){ this.setData({ currentId:e.currentTarget.dataset.id }) }`  
    ②uni-app：`function(id){ this.currentId = id }`
 *  for循环：  
    ①微信小程序：`<view wx:for="{ {currentList}}" wx:for-index="s_index" wx:for-item="s_item"></view>`  
    ②uni-app：`<view v-for="(s_item,s_index) in currentList"></view>`  
    微信小程序可以不写wx:for-index和wx:for-item，默认为index和item
 *  if判断：  
    ①微信小程序：`<view wx:if="{ {isShow}}"></view>`  
    ②uni-app：`<view v-if="isShow"></view>`
 *  src动态接收图片：  
    ①微信小程序：`<image src="{ {item.img}}"></image>`  
    ②uni-app：`<image :src="item.img"></image>`
 *  页面传参：  
    ①微信小程序：`<navigator url="/pages/live?id={ {item.room_id}}"></navigator>`  
    ②uni-app：`<navigator :url="'/pages/live?id=' + item.room_id"></navigator>`  
    两者接收参数都是在`onLoad(options){}`方法中获取，在此不多提及。
 *  全局数据定义：  
    ①微信小程序：`globalData:{baseUrl:"www.com"}`  
    ②uni-app：`this.prototype.baseUrl = "https://www.ccc"`
 *  全局数据调用：  
    ①微信小程序：`getApp().globalData.baseUrl`  
    ②uni-app：`this.baseUrl`
 *  数组拼接：(我真没有歧视微信小程序的意思)  
    ①微信小程序(ES5)：`this.setData({ list:this.data.list.concat(res.list) })`  
    ②uni-app(ES6)：`this.list = [...this.list,...res.list];`
 *  阻止冒泡：  
    ①微信小程序：`<view catchtap="clickTab">我是按钮</view>`  
    ②uni-app：`<view @click.stop="clickTab">我是按钮</view>`
 *  api的差别(支付作栗子)：  
    ①微信小程序：`wx.requestPayment({})`  
    ②uni-app：`uni.requestPayment({})`  
    小程序的api在uni-app中只需要把`wx`替换成`uni`即可使用。
 *  跨界面获取选择的参数  
    场景类似于填写表单时某个信息要跳转到**其他页面选择数据**后再返回，并在**原填写表单页**得到并展示刚才选择的数据，当然还有其他相关的问题能够运用该方法。  
    ①微信小程序：通过`getCurrentPages()`获取页面栈，然后调用上n个页面的`setData()`方法，把数据存到上n个页面中。

// 选择参数的页面
    chooseItem(data) { 
     const pages = getCurrentPages();
     const prevPage = pages[pages.length - 3]; //上两个页面
     prevPage.setData({ 
       myName: data,
     });
     wx.navigateBack({  delta: 2 }); //返回到上两个页面
    },
    // 获取参数的页面，即上述的->原填写表单页
    onShow() { 
       const pages = getCurrentPages();
       if (pages[pages.length - 1]) { 
         const currPage = pages[pages.length - 1]; // 当前页面
         this.brandName = currPage.data.myName; //这就是传递的参数
       }
     },

②uni-app：通过`getCurrentPages()`获取页面栈，然后使用`prevPage.$vm.myName = data`，把数据存到上n个页面中。

// 选择参数的页面
    chooseItem(data) { 
      const pages = getCurrentPages();
      const prevPage = pages[pages.length - 3]; //上两个页面
      prevPage.$vm.myName = data; // 区别只是这里不同
      uni.navigateBack({  delta: 2 }); //返回到上两个页面
    },
    // 获取参数的页面，即上述的->原填写表单页
    onShow() { 
      const pages = getCurrentPages();
      if (pages[pages.length - 1]) { 
        const currPage = pages[pages.length - 1]; // 当前页面
        this.brandName = currPage.data.myName; //这就是传递的参数
      }
    },

虽然两者区别只有两行代码不同，且uni-app可以使用微信小程序的方法，但问题总比办法多，了解多一点总不会亏。