Taro开发日志

Taro开发日志

Taro 微信小程序开发日志

开发和性能似乎都不太友好，改用Remax

一、技术栈选择

  • 语言：TypeScript
  • 框架库：React(Taro)
  • 状态管理：Redux
  • UI：taroify

二、快速开始

1
2


npx @tarojs/cli init myApp

1
2
3


cd myApp
yarn

1
2
3


yarn dev:weapp
yarn build:weapp
  • 打开微信小程序开发者工具
  • 选择dist目录作为项目
  • 如果有AppID则输入，没有则忽略

三、使用taroify组件库

  • 安装
1
2


yarn add @taroify/core
  • 自动按需引入组件 (推荐)
1
2
3


//安装插件
yarn add -D babel-plugin-import

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


// babel.config.js
module.exports = {
  plugins: [
    [
      "import",
      {
        libraryName: "@taroify/core",
        libraryDirectory: "",
        style: true,
      },
      "@taroify/core",
    ],
    [
      "import",
      {
        libraryName: "@taroify/icons",
        libraryDirectory: "",
        camel2DashComponentName: false,
        style: () => "@taroify/icons/style",
      },
      "@taroify/icons",
    ],
  ],
};

1
2
3


// 插件会自动将代码转化为方式二中的按需引入形式
import { Button } from "@taroify/core"
  • 浏览器适配

Taroify 默认采用 rem 单位，需要对 @taroify 里的样式单位进行转换适配。

1
2
3
4
5
6
7


// config/index.js
const config = {
  h5: {
    esnextModules: ["@taroify"],
  }
}

四、使用Redux

  • 安装
1
2


yarn add react-redux @types/react-redux @reduxjs/toolkit

1
2
3


//注意这里使用的是taro改造的devtools插件（目前 devtools 功能用不了）
yarn add -D @tarojs/plugin-react-devtools
  • 配置taro插件
1
2
3
4
5
6
7
8


//config/dev.js
config = {
  plugins: [
    '@tarojs/plugin-react-devtools'
  ],
  // ...
}
  • 编译项目
1
2


yarn dev:weapp
  • 在浏览器打开

http://localhost:8097/

五、错误解决

1. electron 安装错误

RequestError: connect ETIMEDOUT 2xxxxx3.166:443

1
2
3
4
5


//解决方式
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

npm install --save-dev electron
此页面上有什么