相同點
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、模板
//vue 模板只有一個根標簽
<template>
<view></view>
</template>
// 原生 wxml可以多個並列根標簽
<view></view>
<view></view>
2、賦值方式
// vue 直接賦值
this.list = ['1','2','3'];
// 原生 this.setData修改
this.setData({
list:['1','2','3']
})
3、點擊事件寫法不同
原生小程序是bindtap
<image bindtap="preview"></image>
uniapp是@click
<image @click="preview"></image>
4、引入組件
//原生
// 在頁面的.json配置文件中修改usingComponents
{
"usingComponents": {
// search是自定義的組件名，值是組件的文件地址
"search": "../../components/search/index"
}
}
5、傳參方式不同
原生寫法是data-xxx，且數據需要從e.currentTarget.dataset獲取
<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>
8、更新視圖方法
原生寫法
this.setData({
data: 1
})
uniapp寫法是 this.data = 1
9、列表循環
原生寫法 ，只需要綁定被渲染的數據，默認每一項為item，key為index
注意： 花括號和引號之間如果有空格，將最終被解析成為字符串
<view class="flexcost mtb30" wx:for="{{list}}" wx:key='goodsOrderId' wx:key="index">{{item.name}}</view> //默認是item
使用 wx:for-item 可以指定數組當前元素的變量名，
使用 wx:for-index 可以指定數組當前下標的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
uniapp寫法
<view v-for="(item, index) in list" :key="res.goodsOrderId">{{item.name}}</view>
10、條件渲染
- 原生：uniapp中的v-show相當於原生中的hidden
在框架中，使用 wx:if="" 來判斷是否需要渲染該代碼塊：
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 來添加一個 else 塊：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 <block/> 標簽將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意： <block/> 並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
- uniapp：使用
v-if或者v-show控制隱藏，同時存在v-else-if和v-else來添加else代碼塊,如果有多個需要一起判斷的，直包裹一個外層view，添加判斷
<view v-if="true">
<view></view>
<view></view>
</view>
wx:if vs hidden 即 v-forvsv-show
因為 wx:if 之中的模板也可能包含數據綁定，所以當 wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。
同時 wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時候才開始局部渲染。
相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。
11、動態添加class
// vue版本
<view :class="{active: current=== index}"></view>
// 原生
<view class="{{current === index ? 'current' : '' }}"></view>
參考鏈接：
https://www.cnblogs.com/xiaozhuangge/p/15385745.html
https://blog.csdn.net/l13640698113/article/details/109744057
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/conditional.html