leidenglai/weapp-taro-typescript

微信小程序demo，使用 Taro 框架。React+TypeScript 语法，Mobx 管理数据，Taro UI 框架。

现在taro更新变化较大，所以本项目仅做参考学习 2022/04/26

使用 React 和 TypeScript 写小程序

微信小程序端，使用 Taro 框架。React+TypeScript 语法，Mobx 管理数据，Taro UI 框架。

Taro 框架

Taro 介绍 · Taro

Taro是一套遵循 React 语法规范的多端开发解决方案。现如今市面上端的形态多种多样，Web、React-Native、微信小程序等各种端大行其道，当业务要求同时在不同的端都要求有所表现的时候，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。 使用Taro，我们可以只书写一套代码，再通过Taro的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动小程序、H5、React-Native 等）运行的代码。

开发环境

yarn 使用终端或者 cmd 安装 yarn安装 | Yarn 中文文档

进入项目根目录，执行如下命令安装依赖包：

yarn

开始开发

小程序调试模式

yarn dev:weapp

h5 调试模式

yarn dev:h5

开发时可以先在 h5 模式下完成大部分业务逻辑和 UI 调试，然后同时开启小程序和 H5 模式，对照查看效果，调试页面。

构建小程序发布文件

yarn build:weapp

概述

虽然微信小程序很强大，但是小程序对于开发者来说，确实不太友好，还好现在也有一些开源的小程序框架，此项目选用了Aotu.io「凹凸实验室」出品的 Taro 框架。 框架采用React 语法风格，组件生命周期与 React 保持一致，最后编译成各端小程序和 H5，本项目仅兼容了微信小程序。但是可以用很小的代价将项目兼容其他端。 项目采用了 Mobx 管理数据，这是 React 流行的数据管理方案之一，简单、可扩展的状态管理，需要注意项目使用的是 Mobx 4 版本。 同时项目使用 TypeScript 语法，给 JavaScript 加上类型系统，提高了开发效率和代码质量。

技术栈

1. Taro // 小程序框架，项目管理、开发、编译打包
2. yarn // 包管理器
3. Taro UI // UI 框架，使用了里面的组件，项目中进行了个性化定制
4. React //语法风格
5. TypeScript // 语言类型系统
6. Sass // style 模块
7. Mobx // 数据管理方案
8. lodash // 辅助函数

资源

• 项目配置 解释 package.json 文件 — JavaScript 标准参考教程（alpha）
• Taro 中文文档：Taro 介绍 · Taro
• React 中文文档：React 中文文档 - 用于构建用户界面的 JavaScript 库
• Mobx 中文文档：MobX 介绍 · MobX 中文文档
• TypeScript 中文文档：文档简介 · TypeScript 中文网 · TypeScript——JavaScript 的超集
• Taro UI：Taro UI | O2Team
• Lodash.js 中文文档： https://www.html.cn/doc/lodash/
• scss：Sass 参考手册 | Sass 中文文档

##目录结构

— config/  // 构建配置，Taro默认生成
— dist/ // 小程序构建缓存和输出目录
— node_modules/   // 所以依赖安装包文件
— src/            // 项目文件
    assets/ // 所有资源文件 如图片、字体、样式文件
    components/// 组件目录
    interface/// 公共接口
	  libs // 手动导入的库，此目录不会进行代码检查和压缩编译
    pages/ // 项目页面目录，对应微信小程序的pages
    services/// 与后端交互的接口请求文件
    stores/  // mobx数据管理
    utils/  // 一些中间件、插件方法等
    app.scss// 项目的配置
    app.tsx// 应用入口
— .babelre  // babel插件的配置文件
- .eslintignore   // eslint配置
- .eslintrc.json  // eslint配置
- .stylelintrc.json  // stylelint配置
- tsconfig.json   // ts语言的配置
— package.json  // 项目描述文件
— README.md // 项目文档
- project.config.json // 小程序配置文件

##PS

1. 如果出现 node-saas 导致安装失败，可以将 yarn 源切换到淘宝的再试试 yarn config set sass_binary_site http://cdn.npm.taobao.org/dist/node-sass -g

Node-sass 比较特殊，建议提前进行安装，规避可能出现的各种异常错误。 npm i -g node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node_sass/

weapp-taro-typescript's Issues

yarn 不过

node-pre-gyp ERR! build error
node-pre-gyp ERR! stack Error: Failed to execute '/usr/local/Cellar/node/12.4.0/bin/node /Users/galen/Temporary/weapp-taro-typescript/node_modules/node-gyp/bin/node-gyp.js build --fallback-to-build --module=/Users/galen/Temporary/weapp-taro-typescript/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64/fse.node --module_name=fse --module_path=/Users/galen/Temporary/weapp-taro-typescript/node_modules/fsevents/lib/binding/Release/node-v72-darwin-x64 --napi_version=4 --node_abi_napi=napi' (1)
node-pre-gyp ERR! stack at ChildProcess. (/Users/galen/Temporary/weapp-taro-typescript/node_modules/fsevents/node_modules/node-pre-gyp/lib/util/compile.js:83:29)
node-pre-gyp ERR! stack at ChildProcess.emit (events.js:200:13)
node-pre-gyp ERR! stack at maybeClose (internal/child_process.js:1021:16)
node-pre-gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:283:5)
node-pre-gyp ERR! System Darwin 18.6.0
node-pre-gyp ERR! command "/usr/local/Cellar/node/12.4.0/bin/node" "/Users/galen/Temporary/weapp-taro-typescript/node_modules/fsevents/node_modules/node-pre-gyp/bin/node-pre-gyp" "install" "--fallback-to-build"
node-pre-gyp ERR! cwd /Users/galen/Temporary/weapp-taro-typescript/node_modules/fsevents
node-pre-gyp ERR! node -v v12.4.0
node-pre-gyp ERR! node-pre-gyp -v v0.10.3
node-pre-gyp ERR! not ok