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

Posted 2021-08-05 st646889325

在微信小程序的平台上，两者的基础用法除了语法外基本一致，在此不讨论使用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.brandNum = currPage.data.myName; //这就是传递的参数
   }
 },

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

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