Taro + Redux + 本地 Mock Server 微信小程序示例项目.zip

## 项目简介 本项目是[在线借书平台](https://github.com/imageslr/weapp-library)小程序使用 [Taro](https://nervjs.github.io/taro/docs/GETTING-STARTED.html) 重构后的版本，仅包含三个示例页面，非常简单。面向人群主要是 Taro/React/Redux 的初学者，目的是提供一个简单的实践项目，帮助理解 Taro 与 Redux 的配合方式与 Taro 的基本使用。本项目还提供了一个快速搭建本地 mock 服务的解决方案。 因为我也是刚接触 Taro/React，所以只是分享一些开发经验，绕开一些小坑。如果觉得不错的话，请点右上角“⭐️Star”支持一下我，谢谢！如果有问题，欢迎提 issue；如果有任何改进，也欢迎 PR。 扫码体验：  ## 技术栈 Taro + Taro UI + Redux + Webpack + ES6 + Mock ## 项目截图  ## 目录 - [项目简介](#项目简介) - [技术栈](#技术栈) - [项目截图](#项目截图) - [目录](#目录) - [运行项目](#运行项目) - [开始学习](#开始学习) - [Taro 简介](#taro-简介) - [开发工具](#开发工具) - [样式规范](#样式规范) - [CSS 预处理器](#css-预处理器) - [布局](#布局) - [BEM 命名规范](#bem-命名规范) - [组件样式](#组件样式) - [尺寸单位](#尺寸单位) - [项目初始化](#项目初始化) - [引入 Redux](#引入-redux) - [Redux 文件设置](#redux-文件设置) - [connect 方法](#connect-方法) - [参数](#参数) - [mapStateToProps](#mapstatetoprops) - [mapDispatchToProps](#mapdispatchtoprops) - [使用 connect 方法](#使用-connect-方法) - [异步 Action](#异步-action) - [API 封装](#api-封装) - [域名切换](#域名切换) - [封装请求](#封装请求) - [添加拦截器](#添加拦截器) - [async 和 await](#async-和-await) - [搭建本地 mock 服务](#搭建本地-mock-服务) - [搭建云托管 mock 服务](#搭建云托管-mock-服务) - [其他补充](#其他补充) - [Taro JSX](#taro-jsx) - [Taro 生命周期](#taro-生命周期) - [运行配置相关](#运行配置相关) - [允许在 sass 中通过别名引入其他 sass 文件](#允许在-sass-中通过别名引入其他-sass-文件) - [引入 iconfont 图标](#引入-iconfont-图标) ## 运行项目 本项目在以下环境中编译通过：taro v1.2.20、nodejs v8.11.2、微信开发者工具最新版。 首先需要安装必要的环境： ``` # 安装 nvm，已经安装请忽略 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash # 安装 nodejs v8.11.2 nvm install v8.11.2 # 切换 node 版本 nvm use v8.11.2 # 检查 node 版本 node --version ## 安装 taro npm install -g @tarojs/cli@1.2.20 ``` 克隆项目： ``` git clone https://github.com/imageslr/taro-library.git cd taro-library ``` 启动小程序： ``` # 安装依赖 npm install // 或者 yarn # 编译小程序 npm run dev:weapp ``` 启动 mock 服务 (新建一个终端，在项目根目录下执行)： ``` cd simplest-mock-server npm install gulp mock ``` 之后在微信开发者工具中导入项目，即可预览。 ## 开始学习 ### Taro 简介 [Taro](https://nervjs.github.io/taro/docs/GETTING-STARTED.html) 是一个遵循 [React](https://reactjs.org/) 语法规范的多端开发解决方案。最近想学习 React，于是就想到使用 Taro 重构很早之前开发的[在线借书平台](https://github.com/imageslr/weapp-library)小程序。虽然 Taro 上手有一定难度，但是其 React 框架比小程序原生更为灵活与规范，给我带来了非凡的开发体验。 在正式开始之前，您必须对 Taro 框架、 React 语法与小程序框架有一定的了解。此外，我建议您阅读以下文档，会更容易上手： - [Taro 官方文档](https://nervjs.github.io/taro/docs/README.html)：必读，开发时也会随时查阅 - [Taro UI 官方文档](https://taro-ui.aotu.io/#/docs/introduction)：推荐，本项目使用 Taro UI 作为 UI 组件库 - [React 官方文档](https://reactjs.org/docs/hello-world.html)：必读，掌握 React 语法的必经之路，读完 MAIN CONCEPTS 部分就差不多了。对应的中文文档[在这里](https://react.docschina.org/docs/hello-world.html)，与英文版略有区别 - [Redux 文档](https://www.redux.org.cn/)：推荐，Redux 是最经常与 React 搭配使用的状态管理库。不过这个文档过于详实，读起来比较费劲，推荐你掌握 Redux 三大概念（Action、Reducer、Store）后直接在实践中体会 Redux 的原理与作用 - [React.js 小书](http://huziketang.mangojuice.top/books/react/)：推荐，一步步从零构建 React 与 Redux，非常好的入门教程 - [Mock.js 文档](http://mockjs.com/examples.html)：推荐，速查模拟数据占位符与模板 ### 开发工具 开发工具：VS Code 代码规范：[Prettier](https://prettier.io/) 插件 + ES Lint 插件 VS Code 对 JSX 与 TypeScript 有天然的支持，使用 VS Code 开发 Taro，不需要配置任何插件就能实现 Taro 组件的自动 import 与 props 提示，非常方便。 代码格式化插件我选择 [Prettier](https://prettier.io/)，它屏蔽了很多配置项，强制遵循约定的规范。与之类似的格式化插件还有 Beautify，不过我更喜欢 Prettier 对 JSX 属性强制自动换行的风格。 ES Lint 是 JavaScript 与 JSX 的静态检测工具，安装 ES Lint 插件后在代码编写阶段就可以检测到不易发现的错误（如为常量赋值、变量未使用、变量未定义等等）。Taro 已经定义了一套 ES Lint 规则集，使用 taro-cli 生成的 Taro 项目基本不需要再作额外配置。 ### 样式规范 #### CSS 预处理器 [Taro UI](https://taro-ui.aotu.io/#/docs/introduction) 定义了很多[变量](https://github.com/NervJS/taro-ui/blob/dev/src/style/variables/default.scss)与[可复用的 mixins](https://github.com/NervJS/taro-ui/tree/dev/src/style/mixins/libs)。为了与 Taro UI 样式风格保持一致，本项目采用 Taro UI 所使用的 Sass 作为 CSS 预处理器。 #### 布局 优先使用 Flex 布局。学习 Flex 布局可以参考这两篇文章： - [阮一峰 - Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html) - [阮一峰 - Flex 布局教程：实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html) Taro UI 封装了一些常用的 [Flex 样式类](https://taro-ui.aotu.io/#/docs/flex)，包括： - 1~12 的栅格化长度类`at-col-1`、`at-col-2`等 - 栅格化偏移类`at-col__offset-1`等 - `flex`属性：超出换行`at-row--wrap`，宽度根据内容撑开`at-col--auto` - 对齐方式、排列方式 不过 Taro UI 并没有为`flex: none;`提供样式类。 #### BEM 命名规范 关于 BEM，网上有很多的教程，就不再细说了。`Block__Element--Modifier`的命名方式在 Sass 中很容易描述： ```less .block { //... &__element { //... &--modifier { //... } } } ``` #### 组件样式 对于`/components`目录下的可复用组件，使用`my`作为命名空间，避免被全局样式污染，比如`my-panel`、`my-search-bar`等。 组件可以使用`externalClasses`定义若干个外部样式类，或者开启`options.addGlobalClass`以使用全局样式。见[Taro 文档 - 组件的外部样式和全局样式](https://nervjs.github.io/taro/docs/component-style.html)。 如果希望能够在组件的`props`中直接传递`className`或者`style`，比如这样： ```JSX // index.jsx <MyComponent className='custom-class' style={/* ... */}> ``` Taro 默认并不支持这一写法。我们可以将`className`和`customStyle`作为组件的`props`，然后在`render()`中手动将这两个`props`添加到根元素上： ```JSX // my-component.jsx export default MyComponent extends Component { static options = { addGlobalClass: true } static defaul