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写法：quest，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='goodsOrderId' >{{item.name}}</view> //默认是item  uniapp写法 <view v-for="(item, index) in list" :key="dsOrderId">{{item.name}}</view>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。