3  系统设计关键部分

3.1  pages.json

与2.2中的pages搭配使用,这里主要记录分包机制。

一般在开发小程序的时候,一不小心就会造成包大小超过2m无法上传,一般处理方法就是图片方面的优化(放在服务器,图片压缩…),删除无用代码(uniapp打包后会分析依赖的代码,删除无用代码),再就是分包加载处理。

常开发的是微信小程序,以下都以微信小程序为例

分包加载介绍

在构建小程序分包项目时,则会输出一个或多个分包。每个有分包的小程序必定含有一个主包(也就是在/pages下)。通常在主包下放置默认启动页面及tabBar 页面,以及一些所有分包都需用到公共资源(自定义组件、js工具代码、图片等);而分包则是根据开发者的配置进行划分。

小程序启动时,默认会下载主包并启动主包内页面,当用户点击进入分包内某个页面时,客户端会把对应的分包下载下来,下载完成后再进行展示。

开启分包

在uniapp中开启分包时需要在对应的平台开启分包,开启分包的配置在manifest.json文件中,打开文件后HBuilderX会显示视图界面,但是选择微信小程序配置是没有开启分包的配置。

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_vue.js

 

无分包配置

需要点击最下面的源码试图,在json中配置,打开后找到mp-weixin选项(/* 小程序特有相关 */)添加"optimization":{"subPackages":true},至此已经在微信小程序平台打开了分包配置。

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_vue_02

 

添加分包配置

配置分包:

目前为止(2021-09-09),uniapp只支持mp-weixin、mp-qq、mp-baidu、mp-toutiao开启分包加载。多平台编译的话需要写条件编译进行判断环境。

在pages.json文件中根层级(与”pages”选项同级)添加:

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_底层应用开发_03

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_vue_04

 

 

分包配置对应的目录

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_uni-app_05

 

如上图可以有多个分包,但是微信小程序规定:

整个小程序所有分包大小不超过 20M

单个分包/主包大小不能超过 2M

分包效果

在微信开发工具中打开代码依赖分析视图可看到,已经分有一个主包和两个分包(rocA、rocB)

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_底层应用开发_06

 

 

主包分包页面之间转跳

转跳与平时一样写路径转跳就行,个人推荐第一种,如下:

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_vue.js_07

 

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_底层应用开发_08

 

 

分包资源

资源(图片、自定义组件、js工具代码)构建在分包中时,只能在分包使用不能在主包中使用;在主包里的资源主包分包都能使用,相当于公共资源。我这里只列举图片资源,其他的同理。

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_vue.js_09

 

在分包中应用的图片资源

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_底层应用开发_10

 

在主包中应用的图片资源

roc.jpg是在rocA分包下,所以主包不能使用,报错提示:

项目资源 rocA/static/roc.jpg 与页面不在同一个分包中导致无法正常加载

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_vue_11

 

查看资源所在的包

一般建议项目初期就规划好分包构建,通常启动页与tabbar页面及公共组件、js工具、图片等公用的资源在主包,其他的可按照功能模块划分分包。

3.2  api(接口目录)

该目录下为工程中所用到的所有接口,集中写在该目录下,注意尽量一个表的或者相近功能的接口放在一个js文件里。

其中reqBase.js是接口目录的配置文件:

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_vue_12

 

    如需使用本地测试环境,需要改变fly.config.baseURL =''"的域名。

3.3  androidPrivacy.json

因为随着国家政策的发布,移动端的用户体验等要求严格,需要开发者严格按照要求开发。

从HBuilderX3.2.1+版本开始新增androidPrivacy.json文件配置隐私政策提示框,支持真机运行查看效果,在androidPrivacy.json中也支持配置部分样式(如背景颜色、标题颜色、按钮颜色等)。
打开项目的manifest.json文件,切换到“App启动界面配置”,在“Android启动界面样式”中勾选“使用原生隐私政策提示框”

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_vue.js_13

 

注意!androidPrivacy.json不要添加注释,会影响隐私政策提示框的显示!!!

勾选后会在项目中自动添加androidPrivacy.json文件,可以双击打开自定义配置以下内容:

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_前端_14

 

3.4  条件编译

毕竟uniapp是支持一套代码多段运行的,但是并不是绝对的,某些代码可能会出现在默写平台无效的情况,此时需要用到条件编译,调高代码可用性。

条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

条件编译是利用注释实现的,在不同语法里注释写法不一样,

js使用 // 注释、
css 使用 /* 注释 */、
vue/nvue 模板里使用
json文件使用 // 注释、
以下以vue/nvue 模板里使用为例

1,仅在app出现

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_底层应用开发_15

 

3,仅在小程序上有

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_uni-app_16

 

如果在page.json里使用一定要注意,包裹在编译条件里

uniapp 运行到微信开发者工具 弹不出来项目 uniapp开发文档_vue.js_17