标签：原生 uniapp 异同 微信 data uni 写法 wx

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

标签：原生,uniapp,异同,微信,data,uni,写法,wx
来源： https://www.cnblogs.com/xiaozhuangge/p/15385745.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。