Uniapp从入门到放弃

文章	评论	标签
61	0	114

自从微信小程序推出后，各个平台的小程序如火如荼跟进，据不完全统计有支付宝百度360字节京东等不下10家大的平台，对于开发者而言，虽然小程序降低了开发门槛，如果要应用同时支持其中多家平台也是个头疼的问题，目前有个跨平台的开发技术，笔者之前使用过mpvue和taro，都是一次编译到处运行的框架。这次要介绍的是另外一个平台uniapp，囊括app/web/小程序多端的跨平台开发框架。

uniapp的介绍

uniapp解决的痛点问题: 多端泛滥、体验不好、跨平台生态不丰富
特性:
1）跨平台更多 - 一套代码、多端发行
2）运行体验更好（使用weex）
3）通用技术栈:使用vue语法、微信小程序api(内嵌mpvue)
4）开放生态，组件更丰富(支持小程序自定义组件&SDK，原生混合编码，插件市场)
教程: https://ke.qq.com/course/3169971
基本上熟悉vue和小程序开发的开发半天就可以入门了

uniapp支持的平台

| PLATFORM | 解释 | 备注 |
| app-plus | app平台生成打包资源 | |
| h5 | H5 | |
| mp-alipay | 支付宝 | |
| mp-baidu | 百度 | |
| mp-weixin | 微信 | |
| mp-toutiao | 字节 | |
| mp-lark | 飞书 | |
| mp-qq | qq | |
| mp-360 | 360 | |
| mp-kuaishou | 快手 | |
| mp-jd | 京东 | |
| mp-xhs | 小红书 | |
| quickapp-webview | 快应用 | |
| quickapp-webview-union | 快应用联盟 | |
| quickapp-webview-huawei | 快应用华为 | |

uniapp的使用

# 安装vue
npm install -g @vue/cli@4
# 创建项目
vue create -p dcloudio/uni-preset-vue my-project
# 运行和发布
npm run dev:%PLATFORM%
npm run build:%PLATFORM%

uniapp的生命周期

应用生命周期

1.onLaunch
说明:当uniapp初始化完成触发，全局只触发一次
2.onShow
当uni-app启动，或从后台进入前台显示
3.onHide
当uni-app从前台进入后台
4.onError
当uniapp 报错时触发
5.onUniNViewMessage
对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
6.onUnhandledRejection
对未处理的 Promise 拒绝事件监听函数（2.8.1+）
7.onPageNotFound
页面不存在监听函数
8.onThemeChange
监听系统主题变化

页面生命周期

1.onInit
说明:监听页面初始化，其参数同onLoad参数，为上个页面传递的数据,参数类型为Object(用于页面传参)，触发时机早于onLoad
2.onLoad
监听页面加载，其参数为上个页面传递的数据，参数类型为Object（用于页面传参），参考示例
3.onShow
监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
4.onReady
监听页面初次渲染，注意如果渲染速度快，会在页面进入动画完成前触发
5.onHide
监听页面隐藏
6.onUnload
监听页面卸载
7.onResize
监听页面尺寸变化
8.onPullDownRefresh
监听用户下拉动作，一般用于下拉刷新，参考示例
9.onReachBottom
页面滚动到底部的事件(scroll-view滚到底)，常用于下拉下一页数据
10.onShareAppMessage
用户点击右上角分享
11.onPageScroll
监听页面滚动，参数为Object
12.onShareTimeline
监听用户点击右上角转发到朋友圈
13.onAddToFavorites
监听用户点击右上角收藏
14.onTabItemTap
点击 tab 时触发，参数为Object，具体见下方注意事项

组件生命周期

1.beforeCreate
在实例初始化之后被调用，详见
2.created
在实例化创建完成后被立即调用
3.beforeMount
在挂载开始之前被调用
4.mounted
挂载到实例上去之后调用，详见注意:此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
5.beforeUpdate
数据更新时调用，发生在虚拟DOM打补丁之前
6.updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
7.beforeDestory
实例销毁之前调用。在这一步，实例仍然完全可用
8.destroyed
Vue实例销毁之后。调用后，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

uniapp语法和开发

主要参考vue的语法：https://cn.vuejs.org/

数据绑定 v-bind

事件监听 v-on

// 事件映射表，左侧为 WEB 事件，右侧为 uni-app 对应事件
{

click: 'tap',
touchstart: 'touchstart',
touchmove: 'touchmove',
touchcancel: 'touchcancel',
touchend: 'touchend',
tap: 'tap',
longtap: 'longtap',
input: 'input',
change: 'change',
submit: 'submit',
blur: 'blur',
focus: 'focus',
reset: 'reset',
confirm: 'confirm',
columnchange: 'columnchange',
linechange: 'linechange',
error: 'error',
scrolltoupper: 'scrolltoupper',
scrolltolower: 'scrolltolower',
scroll: 'scroll'

}

条件渲染

v-if
v-else
v-else-if
v-show

列表渲染 (在遍历对象时使用v-for in，而在遍历数组时使用v-for of)

v-for="(item, index) in items"

uniapp跨平台

使用ifdef来判断

<!-- #ifdef APP-PLUS -->
        <image src="../../static/underestimated2.png" mode="widthFix"></image>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
            <image src="../../static/underestimated_white2.png" mode="widthFix"></image>
        <!-- #endif -->

uniapp 运行

Cmd+R 运行可选择运行到各不同平台

uniapp发布

菜单发行->云打包/本地打包/小程序等

uniapp实例

商城 https://github.com/gz-yami/mall4j
账本 https://github.com/letsgo0/BillApp
账本 https://github.com/imxiongstu/FenziBill
todo https://github.com/linzowo/uniapp-todolist