/wxapp-typescript-demo

小程序 typescript 最佳实践 demo

Primary LanguageTypeScript

小程序 Typescript 最佳实践 DEMO

  • 使用 gulp 构建(支持 typescript 和 less/sass/scss)
  • 使用 typescript 编译
  • 使用 tslint + prettier 格式代码规范
  • 使用小程序官方 typing 库
  • 使用小程序 weui 组件库
  • 使用了 conventional-changelog 方案自动生成 CHANGELOG

封装了以下的能力

相关能力 说明
watch behavior 使用参考 watch-behavior
日志能力 封装了 LogManager 和实时日志的能力 ,参考地址
autolog behavior 配合日志能力,自动在 Component 中每一个方法调用的时候打印 log,参考地址
globalData behavior 只需要在 Component 中引入 GlobalData,则可以使用全局状态的能力,参考地址
页面跳转库 解决了带参数、锁住原跳转页面等问题,参考地址
pageparams behavior 配合页面跳转库的跳转参数使用,如果使用 pageParams 来跳转传参,使用该 behavior 可以自动更新到 data 中
request 通用请求库 处理包括 session 过期自动拉取登录接口续期等逻辑
promisify 工具库 将类似于 wx.request 等函数转化为 Promise 调用方式

扫码可以简单体验下 DEMO:

安装使用

# 安装依赖
npm install

# 全局安装依赖
npm install gulp prettier typescript commitizen --global

# 需要在小程序开发工具里【工具】-【构建npm】

# 启动代码
npm run dev

# 打包代码
npm run build

基本环境说明

husky

  1. 如果不希望在 git commit 的时候检查 commit 的规范,请在package.json文件中删掉"commit-msg"相关内容。
  2. 如果不希望在 git commit 的时候检查代码规范,请在package.json文件中删掉"pre-commit"相关内容。
{
  "husky": {
    "hooks": {
      "pre-commit": "pretty-quick --staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  }
}

commit 规范

git commit 的 message 遵循 Angular 规范

<commit 类型,不可省略>(<功能模块,可省略>): <功能内容,不可省略>
// 空一行
<详细内容,可省略>
// 空一行
<关闭Issue,此处可省略>

commit 类型包括:

  • feat:新功能(feature)
  • fix:修补 bug
  • docs:文档(documentation)
  • style: 格式(不影响代码运行的变动)
  • refactor:重构(即不是新增功能,也不是修改 bug 的代码变动)
  • test:增加测试
  • chore:构建过程或辅助工具的变动

如果 commit 类型为featfix,则该 commit 将现在 CHANGELOG.md 之中。

该项目更多使用方式参考前端 CHANGELOG 生成指南

项目结构

├─dist                              //编译之后的项目文件(带 sorcemap,支持生产环境告警定位)
├─src                               //开发目录
│  │  app.ts                        //小程序起始文件
│  │  app.json
│  │  app.less
│  │
│  ├─assets                     	//静态资源
│     ├─less						//公共less
│     ├─img						    //图片资源
│  ├─behaviors                     //通用behaviors
│  ├─components                     //组件
│  ├─utils                           //工具库
│  ├─config                           //配置文档
│     ├─cgi-config.ts                //cgi接口配置
│     ├─global-config.ts                //全局配置
│  ├─pages                          //小程序相关页面
│
│  project.config.json              //小程序配置文件
│  gulpfile.js                      //工具配置
│  package.json                     //项目配置
│  README.md                        //项目说明
│  tsconfig.json                     //typescript配置
│  tslint.json                     //代码风格配置

公共库使用说明

utils/request

通用请求,处理包括 session 过期自动拉取登录接口续期等逻辑。(适用于有单个登录接口来获取 session 的场景) 使用方式:

  1. config/global-config.ts文件里,更新SESSION_KEY的值(后台接口协议返回 key,例如"sessionId")。
  2. 如果有其他需要全局携带的参数,需要在utils/request/index.ts文件里,dataWithSession中带上。
  3. config/global-config.ts文件里,更新LOGIN_FAIL_CODES的值(错误码若为该数组中的一个,则会重新拉起登录,再继续发起请求)。