小程序后台编译

后台编译 uni-app 工程

1.0 介绍

需求是要在后端对 uni-app 进行管理（非 Hbuilder），根据官方文档了解到，只有使用 vue-cli创建的项目才能用命令行进行编译，所以对 uni-app 骨架进行修改。

由于HBuilderx更新过于频繁，会导致移动端小程序兼容很麻烦，所以需要到后端统一版本打包。

2.0 重构骨架

将之前 HBuilderx 创建的工程，复制到了 src 下面

2.1 重构前

┌─api                     接口封装
├─common                常用库封装
│─components            符合vue组件规范的uni-app组件目录
│  └─comp-a.vue         可复用的a组件
├─hybrid                App端存放本地html文件的目录，详见
├─platforms             存放各平台专用页面的目录，详见
├─pages                 业务页面文件存放的目录
│  └─index
│     └─index.vue       index页面
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
├─main.js               Vue初始化入口文件
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
└─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见

2.2 重构后

├─.hbuilderx
├─dist
│  ├─build
│  ├─dev
│  └─release
├─node_modules
├─public
├─src
├   ├─api
│   │  ├─pai-ui
│   │  └─uview-ui
│   │      └─locales
├   ├─common
│   │  └─uview-ui
├   ├─components
│   │  ├─flyrise
│   │  └─page-nav
├   ├─pages
│   │  ├─pai-ui
│   │  └─uview-ui
├   ├─static
│   │  ├─pai-ui
│   │  │  ├─attach
│   │  │  ├─home
│   │  │  ├─list
│   │  │  └─login
│   │  └─uview
│   │      ├─common
│   │      └─example
├   └─utils
├       └─luch-request
│           ├─adapters
│           ├─core
│           └─helpers
├─.gitignore
├─babel.config.js
├─package.json
├─package-lock.json
├─postcss.config.js
├─README.md
└─tsconfig.json

3.0 编译命令

npm run dev:%PLATFORM%
npm run build:%PLATFORM%

%PLATFORM% 可取值如下：

4.0 注意事项

• 目前使用npm run build:app-plus会在/dist/build/app-plus下生成app打包资源。如需制作wgt包，将app-plus中的文件压缩成zip（注意：不要包含app-plus目录），再重命名为${appid}.wgt， appid为manifest.json文件中的appid。
• dev 模式编译出的各平台代码存放于根目录下的 /dist/dev/目录，打开各平台开发工具选择对应平台目录即可进行预览（h5平台不会在此目录，存在于缓存中）；
• build 模式编译出的各平台代码存放于根目录下的 /dist/build/ 目录，发布时选择此目录进行发布；
• dev和 build 模式的区别：
  1. dev模式有 SourceMap 可以方便的进行断点调试；
  2. build 模式会将代码进行压缩，体积更小更适合发布为正式版应用；
  3. 进行 环境判断 时，dev 模式 process.env.NODE_ENV 的值为 development，build模式 process.env.NODE_ENV 的值为 production。

5.0 编译器区别

• cli 创建的项目，编译器安装在项目下。并且不会跟随HBuilderX升级。如需升级编译器，执行 npm update，或者手动修改 package.json 中的 uni 相关依赖版本后执行 npm install。更新后可能会有新增的依赖并不会自动安装，手动安装缺少的依赖即可。
• HBuilderX可视化界面创建的项目，编译器在HBuilderX的安装目录下的plugin目录，随着HBuilderX的升级会自动升级编译器。
• 已经使用cli创建的项目，如果想继续在HBuilderX里使用，可以把工程拖到HBuilderX中。注意如果是把整个项目拖入HBuilderX，则编译时走的是项目下的编译器。如果是把src目录拖入到HBuilderX中，则走的是HBuilderX安装目录下plugin目录下的编译器。
• cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

6.0 更新编译器版本

1. 查看 HBuilderX对应的 NPM 依赖版本: 打开 @dcloudio/vue-cli-plugin-hbuilderx"target="_blank">NPM版本记录，版本号 2.0.0- 后面是与 HBuilderX对应的版本号且小版本不会超过9，比如 HBuilderX2.7.5.20200518 对应的版本号 2.0.0-27520200518001，2.0.0-271420200618 对应的为 2.0.0-27920200618002。
2. 批量修改 package.json 中 uni 相关依赖为指定的版本号（去掉版本号前面 ^）。
3. 对于有变化的依赖进行增删，提示不存指定版本的依赖可以保留原始版本或者删除，运行时提示缺少的依赖自行安装。

7.0 中台对接

中台微应用中，使用的是编译后的 wgt 文件，所以需要后台对接一下

1. 全局安装vue-cli

   npm install -g @vue/cli

2. 使用vue-cli 创建工程（或者直接使用开发者上传的项目）

   vue create -p dcloudio/uni-preset-vue my-project

3. 使用 vue-cli 对小程序项目进行编译：

npm run build:app-plus

4. 编译成功后，根目录/dist/build/app-plus 会生成app打包资源；

5. 将app-plus中的文件压缩成zip（注意：不要包含app-plus目录），再重命名为${appid}.wgt；

6. 然后 wgt 文件上传到此工程的服务端（建议自动上传，并去除之前的手动上传动作）。

pai deploy micro -n pai-demo -t d:\work\__UNI__3D0884F.wgt -v 1.0.0 //建议移除

8.0 H5 资源部署

8.1 DCloud 云部署

云部署的示例

前端网页托管基于uniCloud的能力，为开发者的html网页提供更快速、更安全、更省心、更便宜的网站发布。

• 更快速：不经过web server，页面和资源直接上cdn，就近访问，速度更快。
• 更安全：不存在传统服务器各种操作系统、web server的漏洞。不怕DDoS攻击，永远打不垮的服务。
• 更省心：无需再购买虚拟机、安装操作系统、配置web服务器、处理负载均衡、处理大并发、处理DDoS攻击……您什么都不用管，只需上传您写的页面文件
• 更便宜：uniCloud由DCloud联合阿里云和腾讯云推出，其中阿里云版本完全免费。

前端网页托管，自带一个测试域名，仅用于产品体验及测试可快速体验前端网页部署的完整流程，该域名有如下限制：

• 阿里云每分钟最多60次请求，默认每日仅允许10个公网IP访问，超出部分，需通过手动方式将来源IP加入白名单,IP白名单也会有数量限制
• 腾讯云限速100K/s

8.2 基于前端工程重构

基于前端的Nuxtjs对小程序重构，开发一个快速发布小程序H5界面前端工程骨架，开发小程序之后，将编译后的H5界面放到nuxtjs 工程中。

9.0 pages.json 配置

小程序的 pages.json 中配置微应用的界面信息，在打包微应用时，会自动上传。

10.0 模板管理

方便用户选择自己需要的模板，能够快速开始开发

11.0 图片资源管理

用来管理小程序开发过程中的图片资源，方便移动端快速开发