Uniapp与原生微信小程序开发区别对比-Toy模板网

这篇具有很好参考价值的文章主要介绍了Uniapp与原生微信小程序开发区别对比。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

api的差别（基本相同，只是换成wx或者uni的区别）：

    微信小程序：wx.requestPayment、wx.request、wx.showModal、wx.showToast、wx.showLoading、wx.chooseImage、wx.switchTab、wx.navigateTo、wx.setStorageSync等等
    uni-app：uni.requestPayment、uni.request，uni.showModal、uni.showToast、uni.showLoading、uni.chooseImage、uni.switchTab、uni.navigateTo、uni.setStorageSync等等
    小程序的api在uni-app中只需要把wx替换成uni即可使用。

点击事件

    微信小程序：bindtap

    uniapp：@click

函数传参事件

    微信小程序: <view bindtap="click" data-id="id"></view>

    uniapp:<view @click="click(id)"></view>

函数接收参数

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

    uniapp（直接用）:  function(id){ this.currentId = id }

input的value值绑定并监听

    原生小程序绑定是value, 监听是bindinput。
	Uniapp是v-model。

微信小程序： <input value='{{sex}}' bindinput='jianting'></input>

jianting(e){ //实时监听
	console.log(e.detail.value)
}

uniapp写法是 <input v-model='sex'></input>

更新视图方法

    微信小程序：this.setData({data: 1})
    uniapp: this.data = 1

for循环：

微信小程序：(微信小程序也可以不写wx:for-index和wx:for-item，默认为index和item`)

<view wx:for="{{currentList}}" wx:for-index="s_index" wx:for-item="s_item"></view>

uni-app：文章来源地址https://www.toymoban.com/news/detail-608009.html

<view v-for="(s_item,s_index) in currentList"></view>

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>

跨界面获取选择的参数

    微信小程序：通过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; //这就是传递的参数
  }
},

动态修改元素高度：

// vue
 :style="'height: ' + the_height  + '%' "

// 微信小程序
style="height: {{the_height}}px"

到了这里，关于Uniapp与原生微信小程序开发区别对比的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

Uniapp与原生微信小程序开发区别对比