【React】初探 Taro，多端开发的基础实践（一）

Taro：多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信/京东/百度/支付宝/字节跳动/ QQ 小程序/快应用/H5/React Native 等的应用。

目录

1. 项目构建
2. 服务层 (Service)
3. 模型层 (Model)
4. 一些废话

项目构建

采用官方脚手架 @tarojs/cli，帮助文档 => 安装及使用 - Taro

⚠️CSS预处理器推荐使用 Sass ，因为 Taro 自带的 Taro UI 用的就是Sass，头铁的小伙伴也可以在 package.json/templateInfo/css 进行自定义配置，有想法的可以考虑加入 Ts

自定义初始化配置 ⬇️

// package.json
"templateInfo": {
   
   "name": "default",
   "typescript": false,
   "css": "scss"
}

坑位预留: 针对 Mac 发烧友，taro init 时候若出现 permission denied ，相关解决方案如下，详细地址 => taro在mac安装的坑 - 简书

sudo chown -R $(whoami) $(npm config get prefix)/{
   lib/node_modules,bin,share}

服务层(Service)

跨域解决方案与其他脚手架同理，但 Taro 针对 XHR 请求对外提供了 Taro.request 方法

// config/dev.js
h5: {
   
  devServer: {
   
    proxy: {
   
      '/api': {
   
        target: 'http://api.com/',  // 服务端地址
        changeOrigin: true,
        pathRewrite: {
   
          '/api': ''
        }
      }
    }
  },
}

基于 Taro.request 的二次封装，采用 Taro.showToast 进行异常捕获

import Taro from '@tarojs/taro'

const ERRORS = new Map([