Name: 小程序基础模板

模板简介

基础模板通过 gulp 构建开发工作流，不再依赖微信开发者工具创建 typescript 项目，即可使用 ts、less、sass 等扩展语法，并可以扩展自定义的工作流。同时模板还集成了通过"用户中心"统一的 C 端应用鉴权、UI 组件库(插件化管理)、数据 MOCK 服务、Lint 语法检查、可扩展单元测试、统一的数据埋点 SDK、以及自动化 CI/CD。

模板还致力于提供大多数小程序通用功能的集成，比如标准 http 请求的封装、小程序生命周期的拦截，响应式状态管理、以及首页隐私协议弹窗等业务组件、获取地理位置等工具库......

node 版本

node-version：>=16.0.0

vscode 相关插件

1. ESLint
2. Prettier
3. vscode weapp api
4. vscode wxml
5. vscode-wechat
6. wxml

安装

npm install

环境配置

1. 在 gulp/config.js 中配置小程序的信息，如果 QA 环境和生产环境是用同一个小程序，qa 和 product 配置相同信息。本地 dev 调试使用 qa 中的配置。
2. 要实现自动化 CI/CD，需要在微信公众平台->开发->开发设置->小程序代码上传，关闭 IP 白名单，同时拷贝上传密钥到 ci/private.qa 或者 private.prod 中，运行 npm run qa 或 npm run prod 即可上传至体验版。
3. src/utils/settings 管理小程序业务相关配置，例如设置 needAgreement 即可选择是否打开隐私协议弹窗等

启动命令

• npm run dev #启动本地开发模式，小程序使用 QA 环境的配置
• npm run qa #CI 机器人自动打包发布至 QA 小程序的体验版
• npm run prod #CI 机器人自动打包发布至生产小程序的体验版
• npm run prod:watch #启动本地开发模式，小程序使用生产环境的配置

开发目录

src/

预览调试目录

dist/ 微信开发者工具引入该目录预览调试

目录介绍

assets/

静态资源目录，尽量不要使用大尺寸图片，小程序主包有 2M 容量限制，实际超过 1.9M 时就不允许上传了，图标尽量使用 svg 格式，同时图标字体在小程序里只能用网络路径。

compileInit/

该目录文件是通过 gulp 自动生成，开发者无须管理，模板构建时区分环境，获取版本号、获取小程序 tabbar 时模板使用

components/

UI 组件目录，基础的功能组件由统一的组件库提供，所以这里存放的是公共的业务组件

filter/

类似 vue 中过滤器的用法，直接作用于 wxml

helper/

1. api.ts 统一管理所有的接口
2. index.ts 管理所有公共的业务 hooks
3. location.ts 管理地理位置相关的 hooks

miniX/

全局统一的响应式状态管理，类似 vuex。store.ts 中声明 state 和对应的 mutations，mutations 中的方法，统一使用 set_前缀拼接对应 state，例：set_name。

触发 mutation

import MiniX from "../../miniX/index";
MiniX.commit("set_agreementVisible", false);

获取 state，在页面或组件中声明 globalState，例：

globalState: {
    agreementVisible: {
        observer(newVal: boolean, oldVal: boolean) {

        }
    }
}

pages/

建议按照 tabbar 来存放页面，所有与该 tabbar 相关的功能都存放到该目录，某个页面无法确定存到位置，可以新建 common/other 的目录存放。

styles/

• method.less，配置 less 公共方法
• variable.less，配置 less 公共变量

utils/

• base64.ts，提供加解密 base64 方法，request 模块有用到
• message.ts，简单封装了 wx.toast 和 wx.showLoading
• proxyPage.ts，对微信页面和组件中各个生命周期进行了拦截，此处可以添加公共的拦截逻辑，模板在此处也注入了 Minix
• pubSubCenter.ts，封装了简易版的发布订阅中心
• request.ts，统一的 http 请求，包括文件上传请求，可扩展兼容各种请求需求
• settings.ts，统一的业务配置中心，建议所有的配置都放到这里
• storage.ts，封装了缓存相关，分别提供了两种模式，即重新进入小程序，缓存是否被清除
• types.ts，存储项目常量集
• util.ts，常用工具函数

其它

app.ts 和 app.json 中，除了自身功能外，还引入了统一的埋点 SDK，以及 UI 组件库

常见问题

1. 运行报错，提示 npm/interopRequireDefault 相关报错，请删除根目录下.cache-npm 文件重新运行
2. node 版本过高，gulp 相关依赖可能需要同步升级匹配