10分钟快速搭建小程序项目

前置工作：

• 申请一个小程序，并把相关人员授予开发权限等其他权限
• 配置安全域名

工具：

微信开发者工具：developers.weixin.qq.com/miniprogram…

小程序类型：

saas: 可以无限复制多个一模一样的小程序，但是他们的主体不一样（extAppid），甚至可以拖拽生成形态各异的小程序单体：开盘助手

小程序技术框架：

基于taro+react技术栈 docs.taro.zone/docs

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli

# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli 

样式：

less + css modules

默认文件名是xxx.module.less 带(module)才使用 css modules，不带 module后缀的，是使用普通全局 css

数据请求：

对 taro.request 的二次封装，支持 taro 的方法以外，多了 params 和 customOption 参数

export interface CustomRequestOption {envEnum?: EnvEnumType; // 默认从store中获取showError?: boolean; // 默认truehideLoading?: boolean; // 默认 false
}

// getconst getTest = () => {const params = {a: '1',b: 'cc',};Api.getTest({ params, customOption: { envEnum: '-1', showError: false } });
};

// post
const postTest = () => {const data = {a: '1',b: 'cc',};Api.postTest({ data, customOption: { envEnum: '-1', showError: false } });}; 

图标：

因为小程序对 svg 支持不友好，故降级到 font class

前往iconfont 后台，复制远程地址//at.alicdn.com/xxx/xxx/xxx.css 的内容粘贴到 iconfont.less，保存。

使用方法如下代码

状态管理：

@reduxjs/toolkit

路由

小程序自带的路由系统

docs.taro.zone/docs/router

1.入口文件添加 page 路由

export default {pages: ['pages/index/index','pages/logs/logs']
} 

2.跳转方法

// 跳转到目的页面，打开新页面
Taro.navigateTo({url: '/pages/page/path/name'
})

// 跳转到目的页面，在当前页面打开
Taro.redirectTo({url: '/pages/page/path/name'
}) 

分包

参考文档

UI 库：

偏向于自己写组件，或者如下：

taro-ui

NutUI

taroify

@antmjs/vantui

Tard

图表：

f2 or echart

环境：

目前只申请一个小程序，小程序没有测试、预发布、正式环境。

默认正式环境，加一个后门去切换环境，包括 mock

单元测试：

主要依赖：

• jest
• esting-library/jest-dom
• esting-library/react
• esting-library/user-event
• @testing-library/react-hooks

参考

mock:

基于mock插件

根目录 /mock 里面自己创建自己的 mock 数据

发布：

目前是自主发布

1.执行 build

yarn build:weapp 

2.到小程序开发工具上传代码，且填写备注

上传版本号统一为x.x.x，例如当前体验版本为 0.0.1，那么就依次提交 0.0.2，0.0.3 等，注意同一版本号只能提交一次，所以提交前需要确认当前体验版本的最新版本号，在此版本号累加一位。