Taro + rematch + 云开发实践(一)-初始化项目

2,140 阅读3分钟

引言

最近想尝试小程序云开发又不想为此单独去学习原生小程序,遂做了一波功课,具体可查看凹凸实验室的文章 小程序多端框架全面测评 因本人使用的是React,所以选择了react写法的Taro

本文将教你如何搭建项目 github.com/zhixiaoqian…

个人认为最佳实践主要知识点如下:

初始化项目

安装及使用 模板请选择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 (链接包含项目搭建流程)

  1. 安装 Taro UI
npm install taro-ui
# OR 使用 yarn 安装
yarn add taro-ui
  1. 引入所有样式
// app.js
import 'taro-ui/dist/style/index.scss' // 引入组件样式 - 方式一
  1. 按照文档使用组件即可

将原有redux替换为rematch

  1. 删除src下 actions & constants & reducers 文件

  2. 安装 rematch 及相关插件

npm install @rematch/core @rematch/loading @rematch/immer @rematch/updated
# OR 使用 yarn 安装
yarn add @rematch/core @rematch/loading @rematch/immer @rematch/updated
  1. 修改app.js 如下
import configStore from './store'
// 修改为
import store from './store'

// 删除这一行
const store = configStore()
  1. 修改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
  1. 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,
}

  1. 配置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')
},
  1. 组件中使用store
@connect(({ global }) => ({
  global
}), ({ global }) => ({
  ...global
}))

配置云开发 云开发官方文档

  1. src下添加 cloud 文件夹

  2. 修改配置 将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    项目配置文件

调试小程序

  1. 导入项目

AppID 注册小程序账号

  1. 排查自己修改的项目问题

    1. 解决console里的问题
    2. 解决不掉好好看下这篇文章

总结

至此,一个简单的Taro云开发环境就搭建完成,在开发时还是会遇到各种各样的坑,在接下来的文章里会写关于小程序、云函数等等一些问题的解决方案,喜欢这篇的话请继续关注后续文章。

第一次写文章还是有点小激动的哈哈哈哈