技术栈：react+ts+taro+taroUI,后期根据需要配置taro-hook.

大致内容是全局安装taro,从github上拉取最新的项目模板，选择taroUI版本。elf-taro项目中简单集成了dva，各种验证规范，request和腾讯地图。可以直接拿来使用，不过这个项目的依赖项版本过低，配置tailwindCSS不方便(weapp-tw 建议版本升级到最新版)。

elf-taro这个项目的作者也说了，慎重升级依赖项，升级了之后node-sass安装一直失败。模板是个好模板，升级成本太高QAQ。

另：

建议使用nrm切换npm源，.npmrc文件中写死的包和源对应关系不受全局源控制，所以.npmrc中有旧的淘宝源需要删掉，否则不生效。
taro全局版本和项目版本必须对上，系统中切换版本不成功需要到taro所在的目录删掉重新安装。但是不同的node版本可以安装不同的taro版本。

找到NODE目录，删除tao文件夹。

初始化项目

全局安装taro

用 npm 安装 CLI  
$ npm install -g @tarojs/cli  
  
# OR 使用 yarn 安装 CLI  
$ yarn global add @tarojs/cli （安装之后需要配置yarn的环境变量）
//配置环境变量： https://www.cnblogs.com/icey-Tang/p/17550062.html


npm info @tarojs/cli 查看taro版本

taro init myApp 在进行全局安装的情况下初始项目

npx @tarojs/cli init myApp 在不进行全局安装的情况下初始化项目

报错 ‼ 获取 taro 全局配置文件失败，不存在全局配置文件：C:\Users\sunshu\.taro-global-config\index.json.

解决方案：单独跑node_modules包

安装taro周边库 taro-hooks taro-ui

 //taro-hooks
 pnpm i taro-hooks
 //taro-ui
 pnpm i taro-ui

配置别名

// config/index.js
const path = require('path')
// ...
alias: {
  '@components': path.resolve(__dirname, '..', 'src/components'),
  '@utils': path.resolve(__dirname, '..', 'src/utils')
}

配置tailwindCSS

taro配置tailwindCSS教程

使用weapp-tw能用tailwind的大多数特性。

安装ahook, dayJs, className, dva-core, dva-immer, dva-model-extend，react-redux, redux,redux-logger

略...

配置commit及lint

"commitizen": "^4.3.0",
"commitlint-config-cz": "^0.13.3",
"cz-conventional-changelog": "^3.3.0",
"cz-customizable": "^7.0.0",
"eslint": "^8.12.0",
"eslint-config-taro": "3.6.30",
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-react": "^7.8.2",
"eslint-plugin-react-hooks": "^4.2.0",
"husky": "^8.0.0",
"lint-staged": "^15.2.5",

  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  },
  "lint-staged": {
    "*.{jsx,ts,tsx}": [
      "prettier --write",
      "git add"
    ]
},

script中配置：

"commit": "git-cz",
"release": "standard-version",
"log": "conventional-changelog -p angular -i CHANGELOG.md -s -w -r 0",
"prepare": "husky install",
"commit-msg": "commitlint --config .commitlintrc.js -e -V"

报错：

RR_PNPM_FETCH_404  GET https://registry.npmjs.org/--no-install: Not Found - 404

This error happened while installing a direct dependency of /root/.local/share/pnpm/store/v3/tmp/dlx-9631

--no-install is not in the npm registry, or you have no permission to fetch it.

解决方案：github.com/typicode/hu…

pnpm install husky@8 --save-dev \
  && pnpx husky-init \
  && pnpx -- github:typicode/husky-4-to-8 --remove-v4-config

重新安装，报错：

 Recieved ‘HUSKY_PARAMS‘ as value for -E | --env, but environment variable ‘HUSKY_PARAMS‘ is

.precommit配置

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

lint-stage

不过这里有一个问题，执行完了命令之后，我的node_modules就变成了ignore_node_modules.node_modules反而变成了一个快捷方式。需要手动改名字，这里还需要排查原因。

破案了:应该是执行以上命令的时候的副作用，莫名添加了"": "link:/" 删了就好了

PS：

为什么真机和开发者工具表现不一致

微信小程序运行在三端：iOS、Android 和用于调试的开发者工具。
三端的JS脚本执行环境是各不相同的：

在 iOS 上，小程序的 javascript 代码是运行在 JavaScriptCore 中。
在 Android 上，小程序的 javascript 代码是通过 X5 JSCore来解析。
在开发工具上，小程序的 javascript 代码是运行在 nwjs 中。

参考文章：

taro最佳实践

taro开发文档

根据环境配置服务端地址：

const accountInfo = wx.getAccountInfoSync();
// env类型 develop:开发版、trial:体验版、release:正式版
const env = accountInfo.miniProgram.envVersion;
if (!env) {
  console.error("获取运行环境失败!");
}

const serveConfig = {
  develop: "https://dev-shcsp.tisi.com.cn/hcsp-gateway/",
  trial: "https://test-shcsp.tisi.com.cn/hcsp-gateway/",
  release: "https://ihcsp.tisi.com.cn/hcsp-gateway/",
};

console.log(env);
const baseApi = serveConfig[env];

taro项目及模板搭建

初始化项目

为什么真机和开发者工具表现不一致