**文档说明：** > 本文档目的在于帮助基于 Uniapp 进行移动开发的人员 **快速上手、规避问题、提升效率**。将以流程提纲的方式，整理开发过程各阶段可能出现的问题点以及思路。对官方文档中已有内容，会贴附链接，尽量不做过多阐述以免冗余。 > > 使用时可根据需求和自身掌握情况，从目录跳转查看。 > > Uniapp 使用 Vue 语法+微信小程序 API，有二者基础可快速上手，开发 APP 还会用到 [HTML5+规范](https://www.html5plus.org/doc/h5p.html) ，有非常丰富的原生能力。在此还是建议尽量安排时间通读官方文档，至少留下既有功能的印象，来增强对 Uniapp 开发的掌握，游刃有余的应对各类开发需求。

## 开发准备
### 小程序 #### 后台配置 - 小程序个别类目需要行业资质，需要一定时间来申请，根据项目自身情况尽早进行 `服务类目` 的设置以免影响上线时间。 - 必须在后台进行 [服务器域名配置](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html#_1-%E6%9C%8D%E5%8A%A1%E5%99%A8%E5%9F%9F%E5%90%8D%E9%85%8D%E7%BD%AE)，域名必须为 `https` 。否则无法进行网络请求。注意 **每月只有 5 次修改机会**。 > 在开发工具中可配置不验证 https，这样可以临时使用非 https 接口进行开发。非 https 真机预览时需要从右上角打开调试功能。 - 如果有 webview 需求，必须在小程序管理后台配置域名白名单。 #### 开发工具 - 下载 [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/stable.html) - 设置 → 安全 → 打开“服务端口”。打开后方可用 HbuilderX 运行并更新到微信开发者工具。
### APP #### 证书文件 - 准备苹果开发账号 - ios 证书、描述文件 [申请方法](https://ask.dcloud.net.cn/article/152) > 证书和描述文件分为开发(Development)和发布(Distribution)两种，Distribution 用来打正式包，Development 用来打自定义基座包。 > > ios 测试手机需要在苹果开发后台添加手机登录的 Apple 账号，且**仅限邮箱方式注册的账号**，否则无法添加。
### Uniapp #### 创建 Uni-app 项目根据 [文档](https://uniapp.dcloud.io/quickstart-hx?id=%e5%88%9b%e5%bb%bauni-app) 操作即可，新建时建议先不选择模板，因为模板后期也可以作为插件导入。这里推荐一个 UI 框架 [uView](https://www.uviewui.com/)，兼容 Nvue 的 Uniapp 生态框架。 #### 路由 - **配置：** 路由的开发方式与 Vue 不同，不再是 router，而是参照小程序原生开发规则在 pages.json 中进行 [配置](https://uniapp.dcloud.io/collocation/pages?id=pages)，注意 path 前面不加"/"。 - **跳转：** 路由的跳转方式，同样参照了小程序有 [navigator 标签](https://uniapp.dcloud.io/component/navigator) 和 [API](https://uniapp.dcloud.io/api/router?id=navigateto) 两种。 1. **navigator 标签：** 推荐使用有助于 SEO([搜索引擎优化](https://developers.weixin.qq.com/community/develop/doc/000a0a1191c3a817e7a9c6f1e51409?highLine=SEO))。 2. **API：** 常用跳转方式 `uni.navigateTo()`、`uni.redirectTo()` 、`uni.switchTab()`，即可处理大部分路由情况。需注意： - [tabBar 页面](https://uniapp.dcloud.io/collocation/pages?id=tabbar) 仅能通过 `uni.switchTab` 、``方法进行跳转。 - 如需求特殊可以自定义开发 tabBar，即 pages.json 中不要设置 tabBar，这样也就不需要使用 `uni.switchTab` 了。 - url 前面需要加"/" - **问题点：** 小程序页面栈最多 10 层。也就是说使用 `uni.navigateTo` 最多只能跳转 9 层页面。 **解决：** 这里不推荐直接使用 `uni.redirectTo` 取代来处理，会影响用户体验，除非产品设计如此。建议在会出现同页面跳转的页面(例：产品详情 → 点击底部更多产品 → 产品详情 →...)，封装一下页面跳转方法，使用 `getCurrentPages()` 方法获取当前页面栈的列表，根据列表长度去判断使用什么路由方法。路由方法的选择根据实际情况决定 [官方文档](https://uniapp.dcloud.io/api/router?id=navigateto)。 ```javascript //页面跳转 toPage(url){ let pages=getCurrentPages() if(pages.length<9){ uni.navigateTo({url}) }else{ uni.redirectTo({url})//根据实际情况选择路由方法 } } ``` #### 分包加载 > 提前规划好分包，使代码文件更加规整，全局思路更加清晰。可以根据业务流程或者业务类型来设计分包。[官方文档](https://uniapp.dcloud.io/collocation/pages?id=subpackages) - **分包加载的使用场景：** 1. 主包大小超过 2m。 2. 访问落地页启动较慢(因为需要下载整个主包)。 - **分包优化：** 除页面可以分包配置，静态文件、js 也可以配置分包。可以进一步优化落地页加载速度。在 `manifest.json` 中**对应平台**下配置 `"optimization":{"subPackages":true}` 来开启分包优化。开启后分包目录下可以放置 static 内容。 ```json //manifest.json源码 { ..., "mp-weixin" : {//这里以微信为例，如有其他平台需要分别添加 ..., "optimization" : { "subPackages" : true } } } ``` - **分包预载** 通过分包进入落地页后，可能会有跳转其他分包页面的需求。开启分包预载，在落地页分包数据加载完后，提前加载后续分包页面，详见 [官方文档](https://uniapp.dcloud.io/collocation/pages?id=subpackages) #### 生命周期 - Uniapp 的**页面**生命周期建议使用 `onLoad`、`onShow`、`onReady`、`onHide` 等，也可以使用 vue 生命周期 `created`、`mounted` 等，但是**组件**的生命周期**仅支持**vue 生命周期的写法。 #### easycom 组件模式 - **说明：** 只要组件安装在项目的 `components` 目录下或 `uni_modules` 目录下，并符合 `components/组件名称/组件名称.vue` 的目录结构，就可以不用引用、注册，直接在页面中使用。 `easycom` 为默认开启状态，可关闭。可以根据需求配置其他路径规则。详见 [官方文档](https://uniapp.dcloud.io/component/README?id=easycom%e7%bb%84%e4%bb%b6%e8%a7%84%e8%8c%83) - **代码举例：** 非 easycom 模式 ```vue ``` 使用 easycom 模式 ```vue ``` #### 是否使用 Nvue - **Nvue 开发** - 优点：原生渲染，性能优势明显(性能优势主要体现在长列表)、启用纯原生渲染模式( `manifest` 里设置 `app-plus` 下的 `renderer:"native"` ) 可进一步减少打包体积(去除了小程序 webview 渲染相关模块) - 缺点：与 Vue 开发存在 [差异](https://uniapp.dcloud.io/nvue-outline?id=nvue%e5%bc%80%e5%8f%91%e4%b8%8evue%e5%bc%80%e5%8f%91%e7%9a%84%e5%b8%b8%e8%a7%81%e5%8c%ba%e5%88%ab)，上手难度相对较高。并且设备兼容性问题较多。 - 使用：适合仅开发 APP，并且项目对性能有较高要求、组件有复杂层级需求的情况下使用。 - **Nvue+vue 混合开发** - 优点：性能与开发难度折中的选择，即大部分页面使用 Vue 开发，部分有性能要求的页面用 Nvue 开发。 - 缺点：同 Nvue 开发。并且当应用没有长列表时，与 Vue 开发相比性能提升不明显。 - 使用：适合需要同时开发 APP+小程序或 H5，并且项目有长列表的情况下使用。 - **Vue 开发** - 优点：直接使用 Vue 语法进行开发，所有开发平台皆可兼容。 - 缺点：在 APP 平台，使用 webview 渲染，性能比较 Nvue 相对差。 - 使用：适合除需要 Nvue 开发外的所有情况。如果 APP 没有性能要求可使用 vue 一锅端。 #### 跨域 - 如需开发 H5 版本，本地调试会碰到跨域问题。 - **3 种解决方案：** 1. 使用 HbuilderX 内置浏览器预览。内置浏览器经过处理，不存在跨域问题。 2. 在 `manifest.json` 中配置，然后在封装的接口中判断 url ```json // manifest.json { "h5": { "devServer": { "proxy": { "/api": { "target": "https://***.***.com", "pathRewrite": { "^/api": "" } } } } } } ``` ```javascript //判断当前是否生产环境 let url = (process.env.NODE_ENV == 'production' ? baseUrl : '/api') + api; ``` 3. 创建一个 `vue.config.js` 文件，并在里面配置 devServer ```javascript // vue.config.js module.exports = { devServer: { proxy: { '/api': { target: 'https://***.***.com', pathRewrite: { '^/api': '' } } } } }; ``` 如果 2、3 方法同时使用，2 会覆盖 3。 #### 一键登录 - **5+APP 一键登录**，顾名思义：使用了 HTML5+规范、仅 APP 能用。[官方指南](https://ask.dcloud.net.cn/article/38009) - 小程序、H5 没有 HTML5+扩展规范。小程序可以使用 `