uniapp和原生微信小程序的异同

1、页面标签 基本相同

view，text、scroll-view，input、picker、swiper等等

 

2、api基本相同,wx换成uni即可

原生写法：wx.request、wx.showModal、wx.showToast、wx.showLoading、wx.chooseImage、wx.switchTab、wx.navigateTo、wx.setStorageSync等等

uniapp写法：uni.request，uni.showModal、uni.showToast、uni.showLoading、uni.chooseImage、uni.switchTab、uni.navigateTo、uni.setStorageSync等等

3、生命周期函数相同

onLoad，onShow，onPullDownRefresh、onReachBottom、onShareAppMessage等等

 

点击事件写法不同

原生小程序是bindtap

<image bindtap="preview"></image>

uniapp是@click

<image @click="preview"></image>

 

传参方式不同

原生写法是data-xxx

<image bindtap="preview" data-src = '{{item.src}}' ></image>

 

  preview(e) {

   console.log( e.currentTarget.dataset.src)

  },

uniapp写法

<image @click="preview(item.src)" ></image>

 

  preview(src) {

   console.log(src)

  },

 

input的value值绑定并监听

原生写法是    <input value='{{sex}}' bindinput='jianting'></input>

jianting(e){ //实时监听

console.log(e.detail.value)

}

 

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

 

属性绑定

 

原生写法是   <image src='{{src}}' ></image>

uniapp写法是 <input :src='src'></input>

 

更新视图方法

 

原生写法 

 this.setData({

      data: 1

    })

 

uniapp写法是 this.data = 1

 

列表循环

 原生写法 <view class="flexcost mtb30" wx:for="{{list}}" wx:key='item.goodsOrderId' >{{item.name}}</view> //默认是item

 uniapp写法 <view v-for="(item, index) in list" :key="item.goodsOrderId">{{item.name}}</view>