uniapp是一个跨端开发框架，基于 vue.js 技术栈。开发者编写一套代码，可发布到 iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。

uniapp 底层集成了 native 技术，就是 h5+引擎，能调用手机原生 api，所以 uniapp 能开发接近原生性能的 app。

uniapp微信小程序

里面有内置组件、接口、扩展组件、常用模板，这些功能覆盖了我们平时大部分的场景，可以扫码体验一下

生态环境

uniapp 官方的 qq 群目前已经有 35 个了，都是 2000 人的大群。

还有各种基于 uniapp 的开源组件库，比如 uViewUI、uni-ui、uCharts、ColorUI，使用率最高的是 uViewUI，整体上看，生态还算不错。

开源组件库

uViewUI

uView UI是 uni-app 生态专用的 UI 框架，拥有非常全面的组件。uni-app 插件地址

全面兼容 nvue，原生渲染，高性能
兼容安卓，iOS，微信小程序，H5，QQ 小程序，百度小程序，支付宝小程序，头条小程序
60+精选组件，丰富API，功能丰富，多端兼容，快速集成，开箱即用

微信小程序

注意：vue和nvue区别

uni-app是逻辑和渲染分离的，渲染层在app端提供了两套排版引擎。

vue文件使用的webview渲染， nvue(native vue的缩写)文件使用weex原生渲染，性能更佳。
vue和nvue的组件、js写法是一样的，css不一样，原生排版的能用的css必须是flex布局
nvue也可以多端编译，输出H5和小程序，但nvue的css写法受限，不开发App，不建议使用nvue。
一个App中可以同时使用两种页面

uni-ui

uni-ui是 DCloud 前端团队自家人开发的全端兼容、高性能UI框架。uni-app 插件地址

代码示例地址：ext.dcloud.net.cn/plugin?id=4…

组件演示地址：hellouniapp.dcloud.net.cn

组件文档地址：uniapp.dcloud.io/component/u…

uCharts

uCharts是一款高性能跨平台的图表库，PC、H5、APP、小程序、Vue。uni-app 插件地址

微信小程序

MP-CU

MP-CU，原名是 ColorUI，是一个高颜值的 css 库，MP-CU收费，原 ColorUI免费。 uni-app 插件地址

微信小程序

官方文档

官方文档从入门介绍、学习教程、组件、API、插件、注意事项等都有介绍。如果文档看不下去，可以直接从插件市场导入现成代码学习。

插件市场

插件市场将插件分为前端组件、JS SDK、uni-app 前端模板、App 原生插件、uniCloud 等 7 大类、20 多个子类

社区、QQ 群

社区案例相当多，90%的问题都能在上面找到解决方案，里面找不到的也可以加官方 QQ 群咨询问题。

选型指南

多端开发框架对比横评，参考：juejin.im/post/5e8e8d…
只做 App，flutter、react native 等 App 跨平台框架对比，参考：ask.dcloud.net.cn/article/360…
只做小程序，原生 wxml 开发、wepy、mpvue、taro 的对比，ask.dcloud.net.cn/article/358…
uni-app 和微信原生开发的详细比较评测，参考：ask.dcloud.net.cn/article/364…

uniapp、flutter、react-native浅析

语法学习

生命周期

应用生命周期

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

页面生命周期

函数名	说明	平台差异说明	最低版本
onInit	监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad	百度小程序	3.1.0+
onLoad	监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
onShow	监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
onReady	监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
onHide	监听页面隐藏
onUnload	监听页面卸载
onResize	监听窗口尺寸变化	App、微信小程序、快手小程序
onPullDownRefresh	监听用户下拉动作，一般用于下拉刷新，参考示例
onReachBottom	页面滚动到底部的事件（不是 scroll-view 滚到底），常用于下拉下一页数据。具体见下方注意事项
onTabItemTap	点击 tab 时触发，参数为 Object，具体见下方注意事项	微信小程序、QQ 小程序、支付宝小程序、百度小程序、H5、App、快手小程序、京东小程序
onShareAppMessage	用户点击右上角分享	微信小程序、QQ 小程序、支付宝小程序、字节小程序、飞书小程序、快手小程序、京东小程序
onPageScroll	监听页面滚动，参数为 Object	nvue 暂不支持
onNavigationBarButtonTap	监听原生标题栏按钮点击事件，参数为 Object	App、H5
onBackPress	监听页面返回，返回 event = {from:backbutton、 navigateBack} ，backbutton 表示来源是左上角返回按钮或 android 返回键；navigateBack 表示来源是 uni.navigateBack ；详细说明及使用：onBackPress 详解 (opens new window)。支付宝小程序只有真机能触发，只能监听非 navigateBack 引起的返回，不可阻止默认行为。	app、H5、支付宝小程序
onNavigationBarSearchInputChanged	监听原生标题栏搜索输入框输入内容变化事件	App、H5	1.6.0
onNavigationBarSearchInputConfirmed	监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。	App、H5	1.6.0
onNavigationBarSearchInputClicked	监听原生标题栏搜索输入框点击事件（pages.json 中的 searchInput 配置 disabled 为 true 时才会触发）	App、H5	1.6.0
onShareTimeline	监听用户点击右上角转发到朋友圈	微信小程序	2.8.1+
onAddToFavorites	监听用户点击右上角收藏	微信小程序	2.8.1+

组件生命周期

uni-app 组件支持的生命周期，与 vue 标准组件的生命周期相同。这里没有页面级的 onLoad 等生命周期：

函数名	说明	平台差异说明
beforeCreate	在实例初始化之前被调用。详见(opens new window)
created	在实例创建完成后被立即调用。详见(opens new window)
beforeMount	在挂载开始之前被调用。详见(opens new window)
mounted	挂载到实例上去之后调用。详见 (opens new window)注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用`$nextTick`Vue 官方文档(opens new window)
beforeUpdate	数据更新时调用，发生在虚拟 DOM 打补丁之前。详见(opens new window)	仅 H5 平台支持
updated	由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见(opens new window)	仅 H5 平台支持
beforeDestroy	实例销毁之前调用。在这一步，实例仍然完全可用。详见(opens new window)
destroyed	Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见(opens new window)

路由跳转

uni.navigateTo

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面详细

uni.redirectTo

关闭当前页面，跳转到应用内的某个页面。详细

uni.reLaunch

关闭所有页面，打开到应用内的某个页面。详细

uni.switchTab

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。详细

uni.navigateBack

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。详细

状态管理

vuex

uni.storage

这块看下对应 api 的具体用法，这个状态数据是持久化的，除非你调用它的清除接口，这个数据会一直缓存在本地。详细

组件库

接口请求

一般的接口请求就用 uni.request(object)就可以，如果需要用到请求拦截、自定义参数，可以使用 luch-request，它是基于 Promise 开发的 uni-app 跨平台请求库。 luch-request

页面栈

路由方式	页面栈表现	触发时机
初始化	新页面入栈	uni-app 打开的第一个页面
打开新页面	新页面入栈	调用 API uni.navigateTo 、使用组件
页面重定向	当前页面出栈，新页面入栈	调用 API uni.redirectTo 、使用组件
页面返回	页面不断出栈，直到目标返回页	调用 API uni.navigateBack 、使用组件、用户按左上角返回按钮、安卓用户点击物理 back 按键
Tab 切换	页面全部出栈，只留下新的 Tab 页面	调用 API uni.switchTab 、使用组件、用户切换 Tab
重加载	页面全部出栈，只留下新的页面	调用 API uni.reLaunch 、使用组件

全局文件

pages.json

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、路由、窗口样式、原生的导航栏、底部的原生tab 、小程序分包等。

它类似微信小程序中app.json的页面管理部分。注意：定位、权限申请等资源属于app.json的内容，uni-app 是在 manifest 中配置。

这里罗列了常用的

属性	类型	必填	描述	平台兼容
globalStyle	Object	否	设置默认页面的窗口表现
pages	Object Array	是	设置页面路径及窗口表现
easycom	Object	否	组件自动引入规则	2.5.5+
tabBar	Object	否	设置底部 tab 的表现
subPackages	Object Array	否	分包加载配置

manifest.json

manifest.json 文件是应用的配置文件，用于指定应用的 AppID、名称、打包版本、启动页、图标、APP 功能模块、权限、原生插件、H5 配置、小程序配置等。

属性	类型	默认值	描述	最低版本
name	String		应用名称
appid	String	新建 uni-app 项目时，自动生成	应用标识
description	String		应用描述
locale	String	auto	设置当前默认语言，具体参考 locale
versionName	String		版本名称，例如：1.0.0。详见下方 Tips 说明
versionCode	String		版本号，例如：36
transformPx	Boolean	true	是否转换项目的 px，为 true 时将 px 转换为 rpx，为 false 时，px 为传统的实际像素
networkTimeout	Object		网络超时时间，详见
debug	Boolean	false	是否开启 debug 模式，开启后调试信息以 `info` 的形式给出，其信息有页面的注册，页面路由，数据更新，事件触发等
uniStatistics	Object		是否开启 uni 统计，全局配置	2.2.3+
app-plus	Object		App 特有配置
h5	Object		H5 特有配置
quickapp	Object		快应用特有配置，即将支持
mp-weixin	Object		微信小程序特有配置
mp-alipay	Object		支付宝小程序特有配置
mp-baidu	Object		百度小程序特有配置
mp-toutiao	Object		字节跳动小程序特有配置	1.6.0
mp-lark	Object		飞书小程序特有配置	3.2.12
mp-qq	Object		qq 小程序特有配置	2.1.0

uni.scss

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批 scss 变量预置。

uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在 scss 代码中使用这里的样式变量。

注意：

如要使用这些常用变量，需要在 HBuilderX 里面安装 scss 插件；
pages.json 不支持 scss，原生导航栏和 tabbar 的动态修改只能使用 js api

App.vue

App.vue是 uni-app 的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。

这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储 globalData

main.js

main.js是 uni-app 的入口文件，主要作用是初始化vue实例。

vue.config.js

vue.config.js 是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项，具体规范参考：vue.config.js

package.json

uni-app 通过在package.json文件中增加uni-app扩展节点，可实现自定义条件编译平台，只能扩展 web 和小程序平台，不能扩展 app 打包。详情

实践开发

开发工具

Hbuilder X

开发工具（推荐）

可以帮助我们快速生成页面模板和组件模板，可视化的页面配置，优秀的代码提示，代码补全能力等等。 HbuilderX 相比 vscode 还是有一些不足之处，一些插件生态不是很健全。开发uni-app还是推荐 HbuilderX （官方产品）

下载

VScode

开发工具

下载

微信开发者工具

小程序发布用，兼容问题调试，

下载

安卓模拟器

安卓 APP 调试用、支持数据线真机调试，兼容问题调试

下载

创建项目

新建项目

Hbuilder X

文件 > 新建 > 项目

微信图片_20220706135701.png

可以看到Hbuilder有很多现成的模板，包括了资讯、游戏、商城等，对于初学者学习非常友好，

VScode

使用vscode，我们先安装uniapp-snippet 插件(uniapp 代码片段提示)，然后在终端输入 vue create -p dcloudio/uni-preset-vue uni-app01，uni-app01 表示项目名称，这里有一点需要注意的是如果提示下载失败，可能是公司网络环境下载资源失败，需要用淘宝镜像解决一下 npm config set registry https://registry.npm.taobao.org/

当 uni-app 遇见 vscode

目录结构

微信图片_20220706141640.png

hybrid 主要用为webview的通信，例如商城系统接入H5的聚合支付，通过webview打开H5的支付网页，支付成功后带上流水号跳转指定hybrid地址，这是可以借助uni.postMessage方法通知APP支付已完成跳转支付成功界面。
unpackage 打包后的文件，包括了应用图标、热更新文件、微信和H5编译文件等
uview-ui UI组件库
androidPrivacy.json 安卓应用上架，服务协议、隐私政策前置授权文件
djj.keystore 安卓证书文件

开发调试

插件安装

工具 > 插件安装

注意：也支持插件市场导入

条件编译

适配问题

uniapp提供了内置 CSS 变量:
--status-bar-height为系统状态栏高度，此变量常用于自定义导航栏，还是很方便的。
--window-top: 内容区域距离顶部的距离 ,--window-bottom : 内容区域距离底部的距离。内容区域就是去除系统状态栏，原生导航栏和底部安全区的区域。
此外还有两个CSS变量在适配iphone过程中是常用到的：constant(safe-area-inset-bottom),env(safe-area-inset-bottom),如避开 iPhoneX 底部安全区：

  .safeArea {  
    padding-bottom: 0;  
    padding-bottom: constant(safe-area-inset-bottom);  
    padding-bottom: env(safe-area-inset-bottom);  
  }

业务场景

支付

流程：支付平台功能申请 -> manifest.json 里配置支付参数 -> uni-app 里调用 API 进行支付

uni.requestPayment统一各平台的客户端支付API，API运行在各端时，会自动转换为各端的原生支付调用API。

没有服务端开发经验的，可以使用uni的服务端uniCloud，官方提供了uniPay云端统一支付服务，前端统一的uni.requestPayment和云端统一的uniPay搭配，可以极大提升支付业务的开发效率。

平台支付流程

微信、支付宝支付

首先调用uni.getProvider获取APP支付鉴权，判断是否支持微信、支付宝支付

微信、支付宝APP支付
uni.requestPayment({
        provider: 'alipay',             //  alipay、wxpay
        orderInfo: res.data,            //  后端返回订单信息
        success: () => {},
        fail: () => {}
})


微信小程序支付
uni.requestPayment({
        provider: 'wxpay',
        timeStamp: res.data.timeStamp,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        signType: res.data.signType,
        paySign: res.data.paySign,
        success: () => {},
        fail: () => {}
})

网银H5、聚合支付

需借助webview访问网银、聚合支付的H5地址，然后通过uni.postMessage进行通信，web-view 可使用 @message 接收消息，判断支付结果。

消息推送

unipush

极光推送

教程文档

热更新、整包更新

通过plus.runtime.getProperty 获取APP的版本和接口返回的版本做对比判断是否需要更新。

热更新

整包更新

快捷登陆

以微信为例

1：微信开放平台注册应用，然后开通应用的分享、支付、登陆等功能

2： manifest.json 配置

3：代码实现，先 uni.getProvider 鉴权，

打包发版

安卓证书

1：安装JDK、JRE环境并配置环境变量

2：生成证书指令 keytool -genkey -alias 证书别名 -keyalg RSA -validity 20000 -keystore D:\证书文件名.keystore，输入密码、单位、姓名、地区等信息

3：查看证书 keytool -list -v -keystore D:\test.keystore

苹果证书

iOS证书和描述文件申请

应用软著

申请地址

苹果、安卓上架

安卓主流平台：华为、腾讯（应用宝）、阿里（豌豆荚）、小米、VIVO、OPPO、360（360 手机助手）、百度（百度手机助手）

注意点

应用的版本更新必须通过 App Store 、应用市场更新，自身 App 内不能包含提示更新功能
如果接入其他三方快捷登陆方式，必须接入Apple快捷登陆
应用介绍截图必须是真实截图，应用图标不能含有阴影、圆角
不允许出现 beta版、测试版等字样
服务协议、隐私政策必须完整，隐私政策包含应用隐私信息访问描述
坑太多慢慢踩

uni-app 实践总结

生态环境

开源组件库

uViewUI

uni-ui

uCharts

MP-CU

官方文档

插件市场

社区、QQ 群

选型指南

语法学习

生命周期

应用生命周期

页面生命周期

组件生命周期

路由跳转

uni.navigateTo

uni.redirectTo

uni.reLaunch

uni.switchTab

uni.navigateBack

状态管理

vuex

uni.storage

组件库

内置组件

扩展组件（uni-ui）

插件市场

接口请求

页面栈

全局文件

pages.json

manifest.json

uni.scss

App.vue

main.js

vue.config.js

package.json

实践开发

开发工具

Hbuilder X

VScode

微信开发者工具

安卓模拟器

创建项目

新建项目

Hbuilder X

VScode

目录结构

开发调试

插件安装

条件编译

适配问题

业务场景

支付

微信、支付宝支付

网银H5、聚合支付

消息推送

分享

热更新、整包更新

快捷登陆

打包发版

安卓证书

苹果证书

应用软著

苹果、安卓上架

微信小程序

H5打包发布