引言
最近想尝试小程序云开发又不想为此单独去学习原生小程序,遂做了一波功课,具体可查看凹凸实验室的文章 小程序多端框架全面测评 因本人使用的是React,所以选择了react写法的Taro
本文将教你如何搭建项目 github.com/zhixiaoqian…
个人认为最佳实践主要知识点如下:
-
Rematch(redux最佳实践)
-
小程序云开发(小程序官方文档)
-
tcb-router(云开发云函数轻量级类路由库,解决单一云函数单独node_modules)
初始化项目
安装及使用 模板请选择redux模板改造成rematch比较方便
初始项目结构
├── dist 编译结果目录
├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── actions redux里的actions
| ├── asset 图片等静态资源
| ├── components 组件文件目录
| ├── constants 存放常量的地方,例如api、一些配置项
| ├── reducers redux里的reducers
| ├── store redux里的store
| ├── utils 存放工具类函数
| ├── pages 页面文件目录
| | ├── index index页面目录
| | | ├── index.js index页面逻辑
| | | └── index.css index页面样式
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
├── package.json
└── project.config.json 项目配置文件
修改项目
配置 Taro UI (链接包含项目搭建流程)
- 安装 Taro UI
npm install taro-ui
# OR 使用 yarn 安装
yarn add taro-ui
- 引入所有样式
// app.js
import 'taro-ui/dist/style/index.scss' // 引入组件样式 - 方式一
- 按照文档使用组件即可
将原有redux替换为rematch
-
删除src下 actions & constants & reducers 文件
-
安装 rematch 及相关插件
npm install @rematch/core @rematch/loading @rematch/immer @rematch/updated
# OR 使用 yarn 安装
yarn add @rematch/core @rematch/loading @rematch/immer @rematch/updated
- 修改app.js 如下
import configStore from './store'
// 修改为
import store from './store'
// 删除这一行
const store = configStore()
- 修改store/index.js 如下
import thunkMiddleware from 'redux-thunk'
import { init } from '@rematch/core'
import immerPlugin from '@rematch/immer'
import updatedPlugin from '@rematch/updated'
import LoadingPlugin from '@rematch/loading'
import models from '@/models'
const middlewares = [
thunkMiddleware
]
if (process.env.NODE_ENV === 'development') {
middlewares.push(require('redux-logger').createLogger())
}
const store = init({
models,
middlewares,
plugins: [
LoadingPlugin(),
immerPlugin(),
updatedPlugin() // 在一定的时间段内防止昂贵(频繁)的获取请求
]
})
export default store
- src下添加models文件夹
// 添加global.js, 相关写法请看官方文档
export default {
state: {},
reducers: {
// 方法名需已dispatch开头
dispatchSetGlobalInfo(state, payload) {
return { ...state, ...payload }
},
},
effects: {
}
}
// 添加index.js
import global from './global'
export default {
global,
}
- 配置alias
// config/index.js
const path = require('path')
alias: {
'@': path.resolve(__dirname, '..', 'src'),
'@/components': path.resolve(__dirname, '..', 'src/components'),
'@/pages': path.resolve(__dirname, '..', 'src/pages'),
'@/models': path.resolve(__dirname, '..', 'src/models'),
'@/store': path.resolve(__dirname, '..', 'src/store'),
'@/utils': path.resolve(__dirname, '..', 'src/utils')
},
- 组件中使用store
@connect(({ global }) => ({
global
}), ({ global }) => ({
...global
}))
配置云开发 云开发官方文档
-
src下添加 cloud 文件夹
-
修改配置 将cloud拷贝到dist
// config/index.js
copy: {
patterns: [
{ from: 'src/cloud', to: 'dist/cloud/' }, // 将云函数文件拷贝到dist
]
},
build
yarn dev:weapp 这时候会生成dist文件 在微信开发者工具打开dist文件即可
现在项目结构
├── dist 编译结果目录
| ├── cloud 云函数目录
├── config 配置目录
| ├── dev.js 开发时配置
| ├── index.js 默认配置
| └── prod.js 打包时配置
├── src 源码目录
| ├── cloud 云函数目录
| ├── models model文件目录
| ├── asset 图片等静态资源
| ├── components 组件文件目录
| ├── store redux里的store
| ├── utils 存放工具类函数
| ├── pages 页面文件目录
| | ├── index index页面目录
| | | ├── index.js index页面逻辑
| | | └── index.css index页面样式
| ├── app.css 项目总通用样式
| └── app.js 项目入口文件
├── package.json
└── project.config.json 项目配置文件
调试小程序
- 导入项目
AppID 注册小程序账号
-
排查自己修改的项目问题
- 解决console里的问题
- 解决不掉好好看下这篇文章
总结
至此,一个简单的Taro云开发环境就搭建完成,在开发时还是会遇到各种各样的坑,在接下来的文章里会写关于小程序、云函数等等一些问题的解决方案,喜欢这篇的话请继续关注后续文章。
第一次写文章还是有点小激动的哈哈哈哈