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

转发自:https://blog.csdn.net/a57959735/article/details/108518815,看到总结的很好就转发过来分享下

触摸事件名称:

①微信小程序:bindtap

②uni-app:@click

函数传参方式:

①微信小程序:

②uni-app:

函数接收参数:

①微信小程序:function(e){ this.setData({ currentId:e.currentTarget.dataset.id }) }

②uni-app:function(id){ this.currentId = id }

for循环:

①微信小程序:

②uni-app:

微信小程序可以不写wx:for-index和wx:for-item,默认为index和item

if判断:

①微信小程序:

②uni-app:

src动态接收图片:

①微信小程序:

②uni-app:

页面传参:

①微信小程序:

②uni-app:

两者接收参数都是在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];

阻止冒泡:

①微信小程序:我是按钮

②uni-app:我是按钮

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; //这就是传递的参数

  }

},

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

②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; //这就是传递的参数

  }

},

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

————————————————

版权声明:本文为CSDN博主「冰谷悠」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/a57959735/article/details/108518815

你可能感兴趣的:(转发:微信小程序与uni-app的区别)