小程序工程化

为了让开发更加快速、更加敏捷、更加高效的进行开发

管理第三方npm模块
使用TypeScript编写源码
使用预处理编写模块的样式
图片压缩
多环境支持

管理第三方npm模块

微信小程序的早期版本不支持使用第三方 npm 包，在基础库 2.2.1 版本才开始支持。但是微信小程序使用 npm 模块的方式与 Node.js 的并不完全相同，虽然同样可以用包管理工具（npm/yarn）安装 npm 模块，但是在小程序源码中引入（require）npm 模块的路径并不是node_modules，而是 miniprogram_npm 目录。

小程序会在（node_modules 目录中的模块）进行一次预构建，预构建的产出目录便是 miniprogram_npm ，最后才可以在小程序源码中引入

图片压缩

建议在小程序的源码中存放图片资源（因为图片体积太大，很容易超过小程序的代码体积上限）

但是如果在必要的场景下仍然难免会使用，比如预加载期间的 loading 图标通常是直接存放在小程序的代码目录中

可以使用webpack构建工具进行压缩

多环境支持

现在的开发一般都是使用了不同的配置文件，来区分对应的环境。来更好的进行开发

通常我们在写代码的时候至少存在两种环境：开发环境和生产环境。在开发环境中编写项目时会有一些为了提高调试效率而存在的功能，比如只打包不混淆、通过 SourceMap 直接定位到源码行等等。

有一些公司的做法是申请两个小程序，一个用来做开发测试，一个做生成。其实这样非常的浪费。而且这样的话测试还需要通过审核。

方式一

可以使用小程序的API来解决多环境问题
- wx.getAccountInfoSync() ：这个接口主要获取当前帐号信息

返回的结构：

属性	类型	说明
miniProgram	Object	小程序帐号信息
plugin	Object	插件帐号信息（仅在插件中调用时包含这一项）

miniProgram 的结构：

属性	类型	说明	最低版本
appId	string	小程序 appId
envVersion	string	小程序版本	2.10.0
version	string	线上小程序版本号	2.10.2

version这个参数是返回对应的版本号。它的值是develop、trial、release。

分别对应开发、体验和正式。

解决思路就很简单了，在启动的时候，先加载这个方法，根据version的返回值来判断当前的版本，根据不同的版本赋值不同的接口的前缀地址。

方式二

1、在小程序后台配置多个不同的环境，并分别获取相应的 AppID 和 AppSecret。

2、在小程序代码中，根据当前的环境设置相应的 AppID 和 AppSecret。例如，在开发环境中，可以设置开发环境的 AppID 和 AppSecret；在测试环境中，可以设置测试环境的 AppID 和 AppSecret 等。

3、在构建小程序代码时，根据不同的环境设置不同的代码构建参数。例如，在开发环境中，可以开启代码构建的调试模式；在生产环境中，可以关闭调试模式，并对代码进行压缩优化等

通过上述步骤，就可以实现小程序的多环境支持。在实际应用中，还可以通过配置不同的环境变量，来控制小程序的功能开关、服务器地址、接口配置等。

配合node脚本

通常小程序需要配合node脚本，进行小程序工程优化

通过node脚本来进行修改配置文件
通过自动化脚本来生成页面、组件，自动添加路由，而不需要手动添加

ci自动化上传生成体验版

nodejs脚本方式实现微信小程序代码自动上传生成体验版

利用了腾讯提供的工具miniprogram-ci (自动上传插件)
开发者可不打开小程序开发者工具，独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。

miniprogram-ci 目前提供以下能力：

上传代码，对应小程序开发者工具的上传
预览代码，对应小程序开发者工具的预览
构建 npm，对应小程序开发者工具的: 菜单 - 工具 - 构建npm
上传云开发云函数代码，对应小程序开发者工具的上传云函数能力
上传云托管代码，对应小程序开发者工具的上传云托管能力
上传云存储/静态托管文件，对应小程序开发者工具 - 云开发 - 云存储和静态托管文件管理
代理，配置 miniprogram-ci 的网络请求代理方式
支持获取最近上传版本的 sourceMap
支持 node 脚本调用方式和命令行调用方式

实现

首先，生成一个CI项目实例：

appid: 小程序/小游戏项目的 appid

type: 项目的类型，有效值 miniProgram/miniProgramPlugin/miniGame/miniGamePlugin

projectPath: 项目的路径，即 project.config.json 所在的目录

privateKeyPath: 私钥，在获取项目属性和上传时用于鉴权使用，在微信公众平台上登录后下载

js
const ci = require('miniprogram-ci')
const dayjs = require('dayjs');
// 注意： new ci.Project 调用时，请确保项目代码已经是完整的，避免编译过程出现找不到文件的报错。
(async () => {
  const project = new ci.Project({
    appid: '小程序AppID',  // 小程序AppID
    type: 'miniProgram',
    projectPath: 'dist/build/mp-weixin',  // 打包文件路径
    privateKeyPath: 'pro.key',  // 秘钥路径
  });
  const uploadResult = await ci.upload({
    project,
    version: '1.5.6',  // 版本号
    desc: `体验版本更新于${dayjs().format('YYYY-MM-DD HH:mm:ss')}`,  // 自定义备注
    setting: {
      es6: true,
    },
    onProgressUpdate: console.log,
  });
  console.log(uploadResult);
})();

版本化

version.ts

1、获取小程序的版本号，方便排查问题
- 用户在使用小程序的时候，不一定使用当前最新版本，可能是历史版本，需要根据某个版本去查bug
2、在微信小程序开发中，可以使用getAccountInfoSync方法来获取当前小程序的信息，其中包括小程序的appid、版本号、环境等信息。通过判断小程序的环境，可以自动切换API地址，以便在不同的环境下使用不同的API

ts
// 获取小程序信息
const accountInfo = wx.getAccountInfoSync()

// 小程序版本 develop、trial、release
const env = accountInfo.miniProgram.envVersion 

// 线上小程序版本号
const version = accountInfo.miniProgram.version 

管理第三方npm模块​

图片压缩​

多环境支持​

方式一​

方式二​

配合node脚本​

ci自动化上传生成体验版​

版本化​

管理第三方npm模块

图片压缩

多环境支持

方式一

方式二

配合node脚本

ci自动化上传生成体验版

版本化