导读：相同点1、页面标签基本相同view，text、scroll-view，input、picker、swiper等等2、api基本相同,wx换成uni即可原生写法：wx.request、wx.sh...
相同点
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
