api的差別（基本相同，只是換成wx或者uni的區(qū)別）：

    微信小程序：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

函數(shù)傳參事件

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

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

函數(shù)接收參數(shù)

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

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

input的value值綁定并監(jiān)聽

    原生小程序綁定是value, 監(jiān)聽是bindinput。
	Uniapp是v-model。

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

jianting(e){ //實時監(jiān)聽
	console.log(e.detail.value)
}

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

更新視圖方法

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

for循環(huán)：

微信小程序：(微信小程序也可以不寫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：文章來源地址http://www.zghlxwxcb.cn/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動態(tài)接收圖片：

    微信小程序：<image src="{{item.img}}"></image>
    uni-app：<image :src="item.img"></image>

頁面?zhèn)鲄ⅲ?/h3>

    微信小程序：<navigator url="/pages/live?id={{item.room_id}}"></navigator>
    uni-app：<navigator :url="'/pages/live?id=' + item.room_id"></navigator>
    兩者接收參數(shù)都是在onLoad(options){}方法中獲取，在此不多提及。

全局數(shù)據(jù)定義：

    微信小程序：globalData:{baseUrl:"www.com"}
    uni-app：this.prototype.baseUrl = "https://www.ccc"

全局數(shù)據(jù)調(diào)用：

    微信小程序：getApp().globalData.baseUrl

    uni-app：this.baseUrl

數(shù)組拼接：

    微信小程序(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>

跨界面獲取選擇的參數(shù)

    微信小程序：通過getCurrentPages()獲取頁面棧，然后調(diào)用上n個頁面的setData()方法，把數(shù)據(jù)存到上n個頁面中。

// 選擇參數(shù)的頁面
chooseItem(data) {
 const pages = getCurrentPages();
 const prevPage = pages[pages.length - 3]; //上兩個頁面
 prevPage.setData({
   myName: data,
 });
 wx.navigateBack({ delta: 2 }); //返回到上兩個頁面
},
// 獲取參數(shù)的頁面，即上述的->原填寫表單頁
onShow() {
   const pages = getCurrentPages();
   if (pages[pages.length - 1]) {
     const currPage = pages[pages.length - 1]; // 當前頁面
     this.brandNum = currPage.data.myName; //這就是傳遞的參數(shù)
   }
 },

    uni-app：通過getCurrentPages()獲取頁面棧，然后使用prevPage.$vm.id = id，把數(shù)據(jù)存到上n個頁面中。。

// 選擇參數(shù)的頁面
chooseItem(data) {
  const pages = getCurrentPages();
  const prevPage = pages[pages.length - 3]; //上兩個頁面
  prevPage.$vm.id = id; // 區(qū)別只是這里不同
  uni.navigateBack({ delta: 2 }); //返回到上兩個頁面
},
// 獲取參數(shù)的頁面，即上述的->原填寫表單頁
onShow() {
  const pages = getCurrentPages();
  if (pages[pages.length - 1]) {
    const currPage = pages[pages.length - 1]; // 當前頁面
    this.brandNum = currPage.data.myName; //這就是傳遞的參數(shù)
  }
},

動態(tài)修改元素高度：

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

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

到了這里，關(guān)于Uniapp與原生微信小程序開發(fā)區(qū)別對比的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！