uniapp 从开发到上架应用文档（三）

3  系统设计关键部分

3.1  pages.json

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

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

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

分包加载介绍

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

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

开启分包

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

 

无分包配置

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

 

添加分包配置

配置分包：

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

在pages.json文件中根层级（与”pages”选项同级）添加：

 

 

分包配置对应的目录

 

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

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

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

分包效果：

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

 

 

主包分包页面之间转跳

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

 

 

 

分包资源：

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

 

在分包中应用的图片资源

 

在主包中应用的图片资源

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

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

 

查看资源所在的包

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

3.2  api（接口目录）

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

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

 

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

3.3  androidPrivacy.json

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

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

 

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

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

 

3.4  条件编译

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

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

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

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

1，仅在app出现

 

3，仅在小程序上有

 

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