页面标签基本一致
无论是原生小程序还是uniapp,常用的页面标签基本相同,比如view
、text
、scroll-view
、input
、picker
、swiper
等。这些标签的使用方式和功能几乎一致,者可以无缝切换。
API调用方式相似
在API调用上,uniapp和原生小程序的写法非常相似,只需要将原生小程序中的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
等。
生命周期函数相同
uniapp和原生小程序的生命周期函数也保持一致,比如onLoad
、onShow
、onPullDownRefresh
、onReachBottom
、onShareAppMessage
等。这些函数的作用和调用时机完全一致,者无需重新学习。
模板与赋值方式差异
在模板和赋值方式上,原生小程序和uniapp有一些区别。原生小程序中,数据绑定通常使用{{}}
,而uniapp则采用了更接近Vue的语法。比如:
- 原生小程序:
bindtap
- uniapp:
@click
引入组件与传参方式不同
在引入组件和传参方式上,uniapp和原生小程序也有所不同。原生小程序通常使用data-xxx
来传递参数,而uniapp则采用了更简洁的语法。
input的value值绑定与监听
在input
组件的value
值绑定和监听上,uniapp和原生小程序的写法也有区别。原生小程序的写法较为繁琐,而uniapp则更加简洁。
属性绑定与更新视图方法
在属性绑定和更新视图的方法上,uniapp和原生小程序也有不同的实现方式。uniapp的写法更贴近Vue,者可以更轻松地实现数据绑定和视图更新。
列表循环的写法
在列表循环的写法上,uniapp和原生小程序也有一些差异。原生小程序默认使用item
和index
作为循环项和索引,而uniapp则允许者自定义变量名。
条件渲染的实现
在条件渲染方面,uniapp中的v-show
相当于原生小程序中的hidden
。原生小程序使用wx:if
来判断是否需要渲染代码块,而uniapp则使用v-if
和v-else
来实现类似的功能。
动态添加class
在动态添加class
方面,uniapp和原生小程序的实现方式也有所不同。uniapp提供了更灵活的方式来动态控制样式,者可以根据需要轻松实现样式切换。
通过以上对比,可以看出uniapp和原生小程序在方式上有许多相似之处,但也有一些细节上的差异。掌握这些差异,可以帮助者更高效地进行跨平台。