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

前提摘要：项目多以微信小程序及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可以使用微信小程序的方法，但问题总比办法多，了解多一点总不会亏。

微信小程序与uni-app的区别相关推荐

微信小程序与手机APP的区别
最近在研究论文选题,到底是做手机APP好还是尝试一下很火热的微信小程序呢?我收集整理了一些网上资料做参考.也在这里做个记录. 是什么? 微信小程序,简称小程序,是一种不需要下载安装即可使用的应用,它实 ...
微信小程序开发与app开发的十大区别
微信小程序开发是当下最具争议的话题,小程序在内测之初,市面上就已经出现了一些传言称:小程序将会取代App,但事实究竟如何呢?两者的区别又在哪里?CRMEB今天就从以下10点,说一说开发小程序与开发Ap ...
为什么java下载安装程序很慢_【关注】微信小程序开发和APP开发的10种区别！
在移动互联网大火的时代,APP和微信小程序已经成为了企业从移动端获取用户流量,实现盈利的重要端口. 因为微信小程序体积小,操作方便,省去了下载安装这一操作,导致这两年微信小程序的势头是越来越猛,甚至有 ...
服务器和微信公众号的区别,微信小程序和公众号的区别，看这三点就懂了
原标题:微信小程序和公众号的区别,看这三点就懂了第一点就是定位不同,小程序主要用来面向产品和服务,而公众号则是用于销售和传递信息.小程序在功能上和公众号有本质的区别(不支持关注,没有粉丝体系.消息推 ...
公众号商城开发和微信小程序商城开发有什么区别？
小程序和公众号商城都属于微商城,但是有很多朋友也不知道这两者之间有什么区别.对于选择做公众号商城还是小程序商城时,出现了选择困难症.既然微信小程序商城和微信公众号商城都是微信内的产品aigao0607 ...
微信小程序与传统APP十大优劣对比
随着微信公众平台的开放,微信端小程序涌现市场,带来很很多便利和简单的原生操作,询:微信端小程序是否会替代传统的APP应用?两者的优劣如何?我们一起来看看传统APP与微信端小程序十大优劣对比 ...
uni-app 关于微信小程序分享，app微信聊天界面和朋友圈分享
前端小白的uni-app艰难学习之路微信小程序分享实现微信小程序分享和app内微信分享小程序分享很简单,我们通过button的open-type属性 <!-- #ifdef MP-WEIX ...
微信小程序之配置app.json
微信小程序之配置app.json 本人写了一个在线扫码借书的小程序,打算分享一下心得和代码,欢迎关注,再次希望各位大佬指出不足 {"pages": ["pages/ind ...
[vue] vue和微信小程序写法上有什么区别？
[vue] vue和微信小程序写法上有什么区别?写了vue项目和小程序,发现二者有许多相同之处,在此想总结一下二者的共同点和区别. 一.生命周期先贴两张图: vue生命周期小程序生命周期相比之下 ...
微信小程序中下载app的方法
微信小程序中下载app的方法因为微信小程序本身是不推荐引流到外部的,所以正规的方法其实都是被禁止掉的,大致方向是打开内部浏览器,进入应用宝下载页面(如果app接入应用宝),或者是通过右上角的在系统浏 ...

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

微信小程序与uni-app的区别相关推荐

最新文章

热门文章