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

前置工作：

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

工具：

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

小程序类型：

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

小程序技术框架：

# 使用 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; // 默认true
  hideLoading?: boolean; // 默认 false
}

// get  
const 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，保存。

使用方法如下代码

扫描二维码关注公众号，回复： 14302549 查看本文章

状态管理：

@reduxjs/toolkit

路由

小程序自带的路由系统

docs.taro.zone/docs/router

入口文件添加 page 路由

export default {
  pages: [
    'pages/index/index',
    'pages/logs/logs'
  ]
}
复制代码

跳转方法

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

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

分包

参考文档

UI 库：

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

图表：

f2 or echart

环境：

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

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

单元测试：

主要依赖：

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

参考

mock:

基于mock插件

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

发布：

目前是自主发布

执行 build

yarn build:weapp
复制代码

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

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