用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等等

不同点

1.开发语言不同：

uni-app是在vue基础上开发，语言采用js，h5，css，而原生微信小程序是在js基础上开发的。

2.开发流程不同：

uni-app可以使用vscode，webstrom等现代前端开发工具进行开发，支持多平台；而微信小程序只能使用微信开发者工具进行开发，仅支持微信小程序和云开发，不能跨平台。

3.部署资源不同：

uni-app只需要支持一份资源就可以实现跨平台，部署是简单便捷的；而微信小程序需要针对每一个平台进行编译，另外要上传到微信审核，才能实现跨平台。

4.点击事件写法不同

原生小程序是bindtap

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

uniapp是@click

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

5.传参方式不同

 原生写法是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)
},

6.input的value值绑定并监听

原生写法是    
<input value='{{sex}}' bindinput='jianting'></input>
 jianting(e){ //实时监听
      console.log(e.detail.value)
 }
uniapp写法是 
<input v-model='sex'></input>

7.属性绑定

原生写法是   <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>