uni-app的优势
跨平台更多,真正做到一套代码多端发行,支持原生代码混写和原生sdk集成。
运行体验更好。组件、api与微信小程序一致,兼容weex原生渲染。
通用技术栈,学习成本更低。Vue的语法,微信小程序的api,对于前端开发人员来说更容易上手。
开放生态,组件更丰富。支持通过npm安装第三方包;支持微信小程序自定义组件及sdk;兼容mpvue组件及项目;app端支持与原生混合
应用的生命周期
onlaunch 当uni-app初始化完成时触发
onshow 当uni-app启动时
onhide 当uni-app进入后台时
onerror 当uni-app报错时
onUniNViewMessage 对 nvue 页面发送的数据进行监听
onUnhandledRejection 对未处理的 Promise 拒绝事件监听函数
onPageNotFound页面不存在监听函数
onThemeChange监听系统主题变化
页面的生命周期
oninit 监听页面初始化
onload 监听页面加载
onshow 监听页面显示
onready 监听页面初次渲染完成
onhide 监听页面隐藏
onunload 监听页面卸载
onresize 监听窗口尺寸变化
onPullDownRefresh 下拉刷新
onReachBottom 触底加载更多
onTabItemTap 点击tab时触发
onShareAppMessage 分享
onPageScroll 监听页面滚动
组件的生命周期 (和vue一样)
beforecreate created beforemount mounted beforeupdate updated beforedestroy destroyed
事件定义和传参
定于 v-on 简化@
列子
<button type="default" @click="handleEvent">点击事件</button>
export default {
data() {
return {
title: 'Hello tledu'
}
},
onLoad() {
},
methods: {
handleEvent(e) {
console.log("点击了按钮")
console.log(e)
}
}
}
配置tabbar
在 pages.json 中配置跟小程序的基本一样
color tab 上的文字默认颜色
selectedColor tab 上的文字选中时的颜色
backgroundColor tab 的背景色
borderStyle black tabbar 上边框的颜色,可选值 black/white
blurEffect none iOS 高斯模糊效果,可选值 dark/extralight/light/none(
list Array tab 的列表,详见 list 属性说明,最少2个、最多5个 tab
position bottom 可选值 bottom、top top 值仅微信小程序支持
fontSize 10px 文字默认大小
iconWidth 24px 图标默认宽度(高度等比例缩放)
spacing 3px 图标和文字的间距
height 50px tabBar 默认高度
midButton 中间按钮 仅在 list 项为偶数时有效