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>
