分布式微服务系统架构第123集：设备服务网络到微信小程序Taro开发效率，高并发架构加群联系作者vx：xiaoda042

加群联系作者vx：xiaoda0423

仓库地址：webvueblog.github.io/JavaPlusDoc…

提高 微信小程序 Taro 开发效率 以及让代码结构有类似 Java 微服务后端 的高效性，主要可以从以下几个方面着手：

1. 项目结构与模块化

保持项目结构清晰、模块化的设计，使得每个模块和功能的实现独立且易于维护。类似于 Java 后端微服务的架构理念，可以将小程序按功能划分为多个模块和组件。这样，开发团队可以专注于独立功能的开发和优化。

1.1 目录结构设计

类似于 Java 微服务的多模块结构，将项目按功能、层次、组件划分。Taro 项目的常见目录结构如下：

src/
  ├── api/              # API接口，类似于后端的控制器
  ├── assets/           # 静态资源（图片、字体等）
  ├── components/       # 公共组件（UI组件，类似后端的公共服务）
  ├── pages/            # 页面组件
  ├── services/         # 服务层，处理与后端的交互
  ├── store/            # 状态管理（如 Redux 或 Taro 的自带状态管理）
  ├── utils/            # 工具类函数，类似于后端的工具包
  ├── styles/           # 全局样式
  └── config/           # 配置文件

组件化与功能模块化：

每个页面功能对应一个组件，页面内的子组件都可以复用。
把类似 API 请求、状态管理（如 Redux）、业务逻辑、UI 组件都划分到不同模块中，保持每个模块功能单一。

2. API 与后端对接的封装

在 Taro 项目中，和 Java 微服务后端的通信大部分都是通过 HTTP 请求（如 RESTful API）进行的。我们可以使用类似后端的方式，将 API 请求封装成一个统一的请求层，增加代码的复用性和可维护性。

2.1 使用封装的请求库

在 Taro 中，可以封装网络请求的方法：

// utils/request.js
import Taro from '@tarojs/taro';

export const request = async (url, method = 'GET', data = {}) => {
  try {
    const res = await Taro.request({
      url,
      method,
      data,
      header: {
        'Authorization': `Bearer ${Taro.getStorageSync('token')}`,
        'Content-Type': 'application/json',
      }
    });
    return res.data;
  } catch (error) {
    console.error('Request failed:', error);
    throw error;
  }
};

// api/user.js
import { request } from '../utils/request';

export const getUserInfo = async () => {
  return await request('/api/user/info', 'GET');
};

这样可以做到和 Java 后端一样，统一管理 API 请求，避免重复代码，提升开发效率。

3. 状态管理与数据流控制

Java 后端中，微服务架构通常通过 事件驱动模型 或 分布式状态管理 来保证各个服务的独立性与高效性。在 Taro 中，推荐使用 全局状态管理（如 Redux、MobX 或 Taro 自带的状态管理）。这样可以在不同页面间共享状态，减少组件的层级嵌套与依赖，提高开发效率。

3.1 使用 Redux 管理全局状态

npm install @tarojs/redux @tarojs/redux-h5

// store/actions.js
export const setUserInfo = (data) => ({
  type: 'SET_USER_INFO',
  payload: data,
});

// store/reducers.js
const initialState = {
  userInfo: {},
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER_INFO':
      return { ...state, userInfo: action.payload };
    default:
      return state;
  }
};

export default reducer;

通过全局状态管理，可以像 Java 后端一样，通过中心化的方式管理应用中的数据流。

4. 异步操作与代码分割

Java 微服务后端常常通过异步任务来提高处理效率。在 Taro 小程序中，可以使用 async/await 处理异步操作，避免回调地狱，并利用 懒加载与按需加载 分割页面和组件，减少页面首屏加载时间。

4.1 懒加载与异步组件

const MyComponent = React.lazy(() => import('./MyComponent'));

使用 React 的 lazy 和 Suspense 来按需加载组件，类似后端服务的 API 按需请求。这可以提高页面加载的响应速度，避免一次性加载过多的资源。

在 Taro 小程序 开发中，为了实现类似于 微服务 的高效开发模式，我们可以借鉴 微服务架构 中的设计理念，通过 模块化、功能划分、组件化、接口管理、分层设计 等方式来组织代码。以下是一个参考的 Taro 小程序开发项目结构，它借鉴了微服务架构的设计，旨在提高开发效率和可维护性。

项目结构概览

src/
  ├── api/                     # API请求接口，管理和后端的交互
  ├── assets/                  # 静态资源文件（图片、字体、样式等）
  ├── components/              # 可复用的公共组件（UI组件）
  ├── pages/                   # 页面组件，每个页面作为独立模块
  ├── services/                # 服务层，处理和后端业务逻辑相关的操作
  ├── store/                   # 全局状态管理（如 Redux、MobX 或 Taro 自带状态管理）
  ├── styles/                  # 全局样式
  ├── utils/                   # 工具函数（如日期格式化、字符串处理等）
  ├── config/                  # 配置文件（如接口地址、常量等）
  └── hooks/                   # 自定义 Hook（如果有的话）

1. API 管理：接口封装与管理

类似于 Java 微服务中的接口管理，我们可以在 Taro 中统一封装 API 请求模块。

1.1 API 请求封装（`api` 文件夹）

// src/api/request.js
import Taro from '@tarojs/taro';

const request = async (url, method = 'GET', data = {}) => {
  try {
    const response = await Taro.request({
      url,
      method,
      data,
      header: {
        'Authorization': `Bearer ${Taro.getStorageSync('token')}`,
        'Content-Type': 'application/json',
      },
    });
    return response.data;
  } catch (error) {
    console.error('Request error: ', error);
    throw error;
  }
};

export default request;

1.2 API 模块（`api` 文件夹）

// src/api/user.js
import request from './request';

// 获取用户信息
export const getUserInfo = async () => {
  return await request('/api/user/info', 'GET');
};

// 更新用户信息
export const updateUserInfo = async (data) => {
  return await request('/api/user/update', 'POST', data);
};

2. 服务层：业务逻辑层（`services` 文件夹）

类似于后端的业务层，Taro 中的 服务层 处理与前端的业务逻辑相关的操作。

2.1 服务层管理（`services` 文件夹）

// src/services/auth.js
import { getUserInfo } from '../api/user';

// 登录验证
export const checkUserLogin = async () => {
  const userInfo = await getUserInfo();
  return userInfo ? true : false;
};

// 用户状态检查
export const checkUserStatus = async () => {
  const userInfo = await getUserInfo();
  return userInfo && userInfo.status === 'active';
};

3. 状态管理：全局状态管理（`store` 文件夹）

通过 状态管理，我们可以在 Taro 小程序中实现类似微服务的“全局管理”机制。可以使用 Taro 的自带状态管理、Redux 或 MobX。

3.1 使用 Taro 的自带状态管理

// src/store/index.js
import Taro from '@tarojs/taro';

const store = {
  userInfo: null,
  setUserInfo(userInfo) {
    this.userInfo = userInfo;
    Taro.setStorageSync('userInfo', userInfo);
  },
  getUserInfo() {
    return this.userInfo || Taro.getStorageSync('userInfo');
  }
};

export default store;

3.2 订阅与更新状态

// src/store/actions.js
export const setUserInfo = (data) => ({
  type: 'SET_USER_INFO',
  payload: data
});

4. 页面结构与组件化：解耦业务逻辑与 UI

类似微服务中每个服务的解耦，Taro 小程序的页面和 UI 组件 也是解耦的。每个页面可以包含多个小的 UI 组件，每个组件负责自己的功能。

4.1 页面模块（`pages` 文件夹）

// src/pages/home/index.jsx
import React, { Component } from 'react';
import { View } from '@tarojs/components';
import { getUserInfo } from '../../services/auth';
import Footer from '../../components/Footer';

export default class HomePage extends Component {
  async componentDidMount() {
    const userInfo = await getUserInfo();
    console.log(userInfo);
  }

  render() {
    return (
      <View>
        <Footer />
      </View>
    );
  }
}

4.2 组件化（`components` 文件夹）

// src/components/Footer.jsx
import React from 'react';
import { View, Text } from '@tarojs/components';

const Footer = () => {
  return (
    <View className="footer">
      <Text>Footer Section</Text>
    </View>
  );
};

export default Footer;

5. 工具函数：公共方法与工具（`utils` 文件夹）

在 Java 微服务中，经常会有一些公共的工具方法，在 Taro 项目中同样可以有一个工具模块，统一管理常用的工具方法。

5.1 工具函数

// src/utils/date.js
export const formatDate = (date) => {
  const d = new Date(date);
  return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
};

6. 配置文件：全局常量（`config` 文件夹）

在微服务中，常常会有全局配置项（如数据库连接、服务地址等）。在 Taro 小程序中，我们也可以将这些配置项存放在 config 目录中。

6.1 配置文件

// src/config/api.js
export const API_BASE_URL = 'https://api.example.com';
export const AUTH_TOKEN_KEY = 'auth_token';

7. 路由管理：模块化路由配置

Taro 小程序的页面路由可以根据业务逻辑进行模块化管理。

7.1 路由管理

javascript
复制编辑
// src/router.js
import Taro from '@tarojs/taro';
import HomePage from './pages/home';

export const routes = {
  '/home': HomePage,
};

export const navigateToPage = (url) => {
  if (routes[url]) {
    Taro.navigateTo({ url });
  }
};

通过使用 TypeScript，可以让你在开发时更早发现错误、提高代码质量。你可以在 Taro 中开启 TypeScript 支持，提供类型检查和编辑器提示。

# 安装 TypeScript 和 Taro 支持
npm install --save-dev typescript @tarojs/ts-plugin

在 tsconfig.json 文件中进行配置：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "react",
    "baseUrl": "./src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

提前考虑性能优化

Java 微服务开发中常常会考虑性能瓶颈（如数据库查询优化、缓存机制等）。在小程序中，性能优化同样不可忽视，尤其是在低端设备上。

页面加载优化：骨架屏与懒加载

你可以通过使用 骨架屏、懒加载 和 代码分割 技术来优化页面加载速度，提升用户体验。

骨架屏：可以在页面内容加载完成之前，展示一个骨架屏，避免空白页面。
懒加载：对于不常用的组件，可以采用懒加载来减少首屏加载时间。

// 异步加载组件
const LazyComponent = React.lazy(() => import('./LazyComponent'));

数据缓存与接口请求优化

对于频繁请求的接口，可以在前端使用缓存（如 LocalStorage 或 Taro.getStorageSync）来减少重复请求，提高性能。

// 缓存API响应数据
const cachedData = Taro.getStorageSync('userInfo');
if (!cachedData) {
  const data = await getUserInfo();
  Taro.setStorageSync('userInfo', data);
}

通过缓存数据和接口请求的优化，可以有效减少网络请求，提高页面加载速度。

使用日志与监控工具

和 Java 后端一样，进行 日志记录 和监控是微服务开发中非常重要的一部分，它帮助开发人员监控应用的健康状况并快速定位问题。

日志记录

你可以使用 Taro 的 console.log 或 第三方日志库 来记录运行时信息，特别是异常和关键操作。

// 使用日志记录关键信息
console.log('User info:', userInfo);

多端开发与跨平台支持

Java 微服务中，通常会通过 Spring Cloud 等技术提供跨平台服务。而在 Taro 小程序中，你可以通过一次开发，支持 微信小程序、支付宝小程序、H5 等多端平台。

跨平台支持：一次开发，适配多个小程序平台（微信、支付宝、小红书、字节跳动等）和 H5。
模块化与高可维护性：代码结构清晰，易于扩展和维护，适应不断变化的需求。
性能优化：考虑到低端设备和高并发情况，确保流畅的用户体验。
UI 和业务逻辑的解耦：UI 组件和业务逻辑要解耦，组件要易于复用，业务逻辑要聚焦在服务层。
支持国际化和多语言：支持不同市场的语言、货币、地区等差异。
可扩展性与自定义性：能够根据不同需求和市场定制不同功能模块，同时不影响其他模块的稳定性。

架构设计：

1. 项目目录结构设计

为了确保项目的扩展性和可维护性，我们需要将 Taro 小程序项目的各个功能模块划分清楚，以下是一个典型的目录结构：

src/
  ├── api/                     # API接口管理，统一与后端通信
  ├── assets/                  # 静态资源（图片、字体、图标等）
  ├── components/              # 可复用的UI组件
  ├── config/                  # 配置文件（如环境配置，API端点，跨平台适配等）
  ├── i18n/                    # 国际化管理
  ├── pages/                   # 页面模块
  ├── store/                   # 状态管理（如 Redux, MobX）
  ├── services/                # 业务逻辑层，处理数据和API交互
  ├── styles/                  # 全局样式，SCSS、CSS变量
  ├── utils/                   # 公共工具函数
  ├── hooks/                   # 自定义 Hooks，抽象业务逻辑
  ├── router/                  # 路由管理
  └── types/                   # TypeScript 类型定义

2. API接口管理

API接口是任何前端架构的核心，Taro小程序需要与不同的后端接口进行通信，而这些接口的实现会因平台和市场的不同而有所差异。我们可以在 api/ 目录下，建立一个统一的接口请求层，方便后续维护和扩展。

API 请求封装（`api/request.js`）

// src/api/request.js
import Taro from '@tarojs/taro';

const request = async (url, method = 'GET', data = {}, config = {}) => {
  const token = Taro.getStorageSync('token') || '';
  const headers = {
    'Authorization': `Bearer ${token}`,
    'Content-Type': 'application/json',
    ...config.headers,
  };
  
  try {
    const res = await Taro.request({
      url,
      method,
      data,
      header: headers,
      ...config
    });
    return res.data;
  } catch (error) {
    console.error('API request failed:', error);
    Taro.showToast({ title: '请求失败，请稍后重试', icon: 'none' });
    throw error;
  }
};

export default request;

国际化支持

为了支持不同市场的语言和货币，我们可以使用 i18n 来管理多语言内容，并根据不同平台进行配置。在 i18n/ 文件夹下，我们可以设置不同语言的资源文件。

国际化配置（`i18n/index.js`）

// src/i18n/index.js
import Taro from '@tarojs/taro';
import en from './en.json';
import zh from './zh.json';
import fr from './fr.json';

const translations = { en, zh, fr };

export const setLocale = (locale) => {
  Taro.setStorageSync('locale', locale);
  Taro.reLaunch({ url: '/pages/home/index' });
};

export const getLocale = () => {
  return Taro.getStorageSync('locale') || 'zh';
};

export const getTranslations = () => {
  const locale = getLocale();
  return translations[locale] || translations.zh;
};

语言资源文件（`i18n/en.json`）

{
  "greeting": "Hello, welcome to our service",
  "currency": "USD"
}

状态管理

Taro 提供了自带的状态管理，但为了保证架构的灵活性，我们可以使用 Redux 或 MobX 来管理全局状态。特别是在多平台或多语言需求的情况下，状态管理的统一性非常重要。

Redux 状态管理示例（`store/actions.js`）

// src/store/actions.js
export const setUser = (user) => ({
  type: 'SET_USER',
  payload: user,
});

export const setLocale = (locale) => ({
  type: 'SET_LOCALE',
  payload: locale,
});

Redux Reducers（`store/reducers.js`）

// src/store/reducers.js
const initialState = {
  user: null,
  locale: 'zh',
};

export const rootReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_USER':
      return { ...state, user: action.payload };
    case 'SET_LOCALE':
      return { ...state, locale: action.payload };
    default:
      return state;
  }
};

组件化与解耦

将 UI 组件和业务逻辑完全解耦是一个优秀架构的重要标志。在 Taro 中，我们可以利用 React 或 Vue 来进行组件化开发。每个页面或者功能模块都可以作为独立的组件进行开发、测试和复用。

组件示例（`components/Header.jsx`）

// src/components/Header.jsx
import React from 'react';
import { View, Text } from '@tarojs/components';

const Header = ({ title }) => {
  return (
    <View className="header">
      <Text>{title}</Text>
    </View>
  );
};

export default Header;

性能优化

优化性能是确保良好用户体验的关键，尤其是在低端设备或高并发情况下。以下是几种常用的性能优化方法：

懒加载：通过懒加载来减少首屏加载的资源。
骨架屏：使用骨架屏来提升用户的加载体验。
缓存策略：对于不常变化的数据，使用缓存策略（如 localStorage 或 Taro.getStorageSync）来减少接口请求。

import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'

export default class Index extends Component {
  state = {
    msg: 'Hello World！',
  }

  componentWillMount() {}

  componentDidShow() {}

  componentDidHide() {}

  render() {
    return (
      <View className="index">
        <Text>{this.state.msg}</Text>
      </View>
    )
  }
}

Taro UI

Taro 3 只能配合使用 taro-ui@next 版本

安装命令： npm i taro-ui@next

一款基于 Taro 框架开发的多端 UI 组件库。

Taro 项目基于 node，请确保已具备较新的 node 环境（>=16.20.0），推荐使用 node 版本管理工具 [nvm] 来管理 node，这样不仅可以很方便地切换 node 版本，而且全局安装时候也不用加 sudo 了。

请注意

由于 Taro 部分能力使用 Rust 开发，在 Windows 上，请确保安装了 Microsoft Visual C++ Redistributable。

查看 Taro 全部版本信息

可以使用 npm info 查看 Taro 版本信息，在这里你可以看到当前最新版本

npm info @tarojs/cli

npm info @tarojs/cli

@tarojs/cli@4.0.12 | MIT | deps: 16 | versions: 1003
cli tool for taro
https://github.com/NervJS/taro#readme

keywords: taro, weapp

bin: taro

dist
.tarball: https://registry.npmjs.org/@tarojs/cli/-/cli-4.0.12.tgz
.shasum: de813007db214165a71e43d20586922a4851150d
.integrity: sha512-d3KzFplb1p8Ohk0QsMNSt/XleskveNfNBK+Wy27VdGk5cMwBVWKCNDQHXYzn1+Uw0HXT4k/KzXDxRVW7TvsnCw==
.unpackedSize: 443.4 kB

dependencies:
@tarojs/binding: 4.0.12           axios: ^1.6.8                     minimist: ^1.2.8
@tarojs/helper: 4.0.12            cli-highlight: ^2.1.11            ora: ^5.4.1
@tarojs/plugin-doctor: ^0.0.13    download-git-repo: ^3.0.2         semver: ^7.6.0
@tarojs/service: 4.0.12           envinfo: ^7.12.0                  validate-npm-package-name: ^5.0.0
@tarojs/shared: 4.0.12            inquirer: ^8.2.6
adm-zip: ^0.5.12                  latest-version: ^5.1.0

maintainers:
- yuche <i@yuche.me>
- xuanzebin <492247143@qq.com>
- defaultlee <weitaozsh@gmail.com>
- drchan <798095202@qq.com>
- kyjo <bestkyjo@gmail.com>
- qq592743779 <592743779@qq.com>
- advancedcat <wshx1938@163.com>
- baosiqing <baosiqing@163.com>
- zakary <zakarycode@Gmail.com>
- liuzejia <790868516@qq.com>

dist-tags:
1.x: 1.3.46                         beta: 4.0.10-beta.4                 next: 4.0.2
2.x: 2.2.22                         canary: 4.0.7-canary.6              nightly: 3.6.24-nightly.10
3.0: 3.0.29                         experimental: 0.0.0-experimental.2  theta: 3.6.15-theta.0
alpha: 4.1.0-alpha.1                latest: 4.0.12                      v3-latest: 3.6.36

taro --version
👽 Taro v1.3.9

1.3.9

� Taro v1.3.9
                                                                                                                        
  Taro CLI 1.3.9 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.21.3 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.22 - C:\Users\23979\AppData\Roaming\npm\yarn.CMD
      npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD

npm install -g @tarojs/cli@3.0.0    # 安装 Taro 3.0.0

nvm list

    20.18.0
    18.20.7
    16.20.2
  * 14.21.3 (Currently using 64-bit executable)

切换 Taro 版本

如果你需要使用不同版本的 Taro，可以先卸载当前版本，然后安装所需版本：

npm uninstall -g @tarojs/cli  # 卸载当前版本的 Taro
npm install -g @tarojs/cli@3.2.0   # 安装 Taro 3.2.0

# 卸载当前版本
npm uninstall -g @tarojs/cli

# 安装所需的版本（例如 Taro 3.2.0）
npm install -g @tarojs/cli@3.2.0

项目初始化

使用命令创建模板项目：

$ taro init myApp

npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目：

$ npx @tarojs/cli init myApp

在创建完项目之后，Taro 会默认开始安装项目所需要的依赖，安装使用的工具按照 yarn > cnpm > npm 顺序进行检测。一般来说，依赖安装会比较顺利，但某些情况下可能会安装失败，这时候你可以在项目目录下自己使用安装命令进行安装：

# 进入项目根目录  
$ cd myApp  
  
# 使用 yarn 安装依赖  
$ yarn

编译运行

使用 Taro 的 build 命令可以把 Taro 代码编译成不同端的代码，然后在对应的开发工具中查看效果。

Taro 编译分为 dev 和 build 模式：

dev 模式（增加 --watch 参数） 将会监听文件修改。
build 模式（去掉 --watch 参数） 将不会监听文件修改，并会对代码进行压缩打包。
dev 模式生成的文件较大，设置环境变量 NODE_ENV 为 production 可以开启压缩，方便预览，但编译速度会下降。

需要注意开发者工具的项目设置：

需要设置关闭 ES6 转 ES5 功能，开启可能报错
需要设置关闭上传代码时样式自动补全，开启可能报错
需要设置关闭代码压缩上传，开启可能报错

npm show @tarojs/cli version

安装最新稳定版本的 Taro：

npm install -g @tarojs/cli@latest

2. 使用 Taro 3.x 版本

对于大部分开发者来说，Taro 3.x 版本是推荐的版本，因为：

Taro 3.x 提供了跨平台支持（微信小程序、支付宝小程序、H5等），并且保持了较高的稳定性。
版本 3.x 相比于 Taro 2.x 在性能和功能上进行了优化，特别是在多端支持上，3.x 更加完美适配了不同平台的需求。

为什么选择 Taro 3.x 版本：

支持多平台构建：微信小程序、支付宝小程序、字节小程序、H5等。
React 与 Vue 支持：支持 React 和 Vue 两种开发模式，你可以根据团队的技术栈选择合适的模式。
大范围社区支持：Taro 3.x 版本是社区广泛使用的版本，问题解决和支持文档也更完善。

安装 Taro 3.x 版本：

npm install -g @tarojs/cli@3.x

锁定 Taro 版本

在 package.json 中锁定版本：

{
  "devDependencies": {
    "@tarojs/cli": "^3.0.0"
  }
}

设计稿及尺寸单位

在 Taro 中尺寸单位建议使用 px、 百分比 %，Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成 H5 时将默认转换为以 rem 为单位的值。

如果你希望部分 px 单位不被转换成 rpx 或者 rem ，最简单的做法就是在 px 单位中增加一个大写字母，例如 Px 或者 PX 这样，则会被转换插件忽略。

结合过往的开发经验，Taro 默认以 750px 作为换算尺寸标准，如果设计稿不是以 750px 为标准，则需要在项目配置 config/index.js 中进行设置，例如设计稿尺寸是 640px，则需要修改项目配置 config/index.js 中的 designWidth 配置为 640：

/config/index.js

const config = {
  projectName: 'myProject',
  date: '2018-4-18',
  designWidth: 640,
  ....
}

目前 Taro 支持 750、 640 、 828 三种尺寸设计稿，他们的换算规则如下：

const DEVICE_RATIO = {
  640: 2.34 / 2,
  750: 1,
  828: 1.81 / 2,
}

API

在编译时，Taro 会帮你对样式做尺寸转换操作，但是如果是在 JS 中书写了行内样式，那么编译时就无法做替换了，针对这种情况，Taro 提供了 API Taro.pxTransform 来做运行时的尺寸转换。

Taro.pxTransform(10) // 小程序：rpx，H5：rem

分包加载

微信客户端 6.6.0，基础库 [1.7.3]及以上版本开始支持。开发者工具请使用 1.01.1712150 及以上版本。

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过 30M（服务商代开发的小程序不超过 20M）
单个分包/主包大小不能超过 2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

小程序端特有属性

只在部分小程序中支持的属性，H5、RN 均不支持。

属性	类型	描述
[networkTimeout]	Object	网络超时时间
[debug]	Boolean	是否开启 debug 模式，默认关闭
[permission]	Object	小程序接口权限相关设置
[requiredBackgroundModes]	String Array	需要在后台使用的能力，如「音乐播放」
[preloadRule]	Object	分包预下载规则
[entryPagePath]	String	小程序默认启动首页
[workers]	String	Worker 代码放置的目录
[navigateToMiniProgramAppIdList]	String Array	需要跳转的小程序列表，详见 wx.navigateToMiniProgram

networkTimeout

各类网络请求的超时时间，单位均为毫秒。

属性	类型	必填	默认值	描述
request	Number	否	60000	[Taro.request] 的超时时间，单位：毫秒
connectSocket	Number	否	60000	[Taro.connectSocket]的超时时间，单位：毫秒
uploadFile	Number	否	60000	[Taro.uploadFile] 的超时时间，单位：毫秒
downloadFile	Number	否	60000	[Taro.downloadFile]的超时时间，单位：毫秒

Taro.connectSocket(option)

创建一个 WebSocket 连接。

并发数

1.7.0 及以上版本，最多可以同时存在 5 个 WebSocket 连接。
1.7.0 以下版本，一个小程序同时只能有一个 WebSocket 连接，如果当前已存在一个 WebSocket 连接，会自动关闭该连接，并重新创建一个 WebSocket 连接。

Taro.connectSocket({
  url: 'ws://echo.websocket.org/echo',
  success: function () {
    console.log('connect success')
  }
}).then(task => {
  task.onOpen(function () {
    console.log('onOpen')
    task.send({ data: 'xxx' })
  })
  task.onMessage(function (msg) {
    console.log('onMessage: ', msg)
    task.close()
  })
  task.onError(function () {
    console.log('onError')
  })
  task.onClose(function (e) {
    console.log('onClose: ', e)
  })
})

属性	类型	必填	默认值	描述
scope.userLocation	PermissionObject	否		位置相关权限声明

PermissionObject 结构：

属性	类型	必填	默认值	描述
desc	string	是		小程序获取权限时展示的接口用途说明。最长 30 个字符

app.config.js

export default {
  pages: ['pages/index/index', 'pages/logs/logs'],
  permission: {
    'scope.userLocation': {
      desc: '你的位置信息将用于小程序位置接口的效果展示',
    },
  },
}

requiredBackgroundModes

申明需要后台运行的能力，类型为数组。目前支持以下项目：

audio: 后台音乐播放
location: 后台定位

app.config.js

export default {
  pages: ['pages/index/index'],
  requiredBackgroundModes: ['audio', 'location'],
}

注：在此处申明了后台运行的接口，开发版和体验版上可以直接生效，正式版还需通过审核。

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

app.config.js

export default {
  entryPagePath: 'pages/index/index',
}

使用 Worker 处理多线程任务时，设置 Worker 代码放置的目录。

当小程序需要使用 [Taro.navigateToMiniProgram]接口跳转到其他小程序时，需要先在配置文件中声明需要跳转的小程序 appId 列表，最多允许填写 10 个

useExtendedLib

基础库 2.2.1 开始支持

指定需要引用的扩展库。目前支持以下项目：

weui: WeUI 组件库

指定后，相当于引入了对应扩展库相关的最新版本的 npm 包，同时也不占用小程序的包体积。rc 工具版本支持分包引用。用法如下：

app.config.js

export default {
  useExtendedLib: {
    weui: true,
  },
}

页面配置

每一个小程序页面都可以使用 .config.js 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖全局配置 app.config.json 的 window 中相同的配置项。

文件需要 export 一个默认对象，配置项遵循微信小程序规范，并且对所有平台进行统一。

注意：

Taro v3.4 之前，page.config.js 里引用的 JS 文件没有经过 Babel 编译。(Taro v3.4 开始支持）
Taro v3.4 支持在页面 JS 中使用 definePageConfig 宏函数定义页面配置，代替 page.config.js 文件。
多端差异化逻辑可以使用 process.env.TARO_ENV 变量作条件判断来实现。
page.config.js 不支持多端文件的形式，如 index.weapp.js 这样是不起作用的。

componentDidShow (options)

程序启动，或切前台时触发。

componentDidHide ()

程序切后台时触发。

onPullDownRefresh ()

监听用户下拉动作。

onReachBottom ()

监听用户上拉触底事件。

onAddToFavorites (Object)

监听用户点击右上角菜单“收藏”按钮的行为，并自定义收藏内容。

onShareAppMessage (Object)

监听用户点击页面内转发按钮（Button 组件 openType='share'）或右上角菜单“转发”按钮的行为，并自定义转发内容。

onShareTimeline ()

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。

示例代码

// 跳转到目的页面，打开新页面
Taro.navigateTo({
  url: '/pages/page/path/name',
})

// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
  url: '/pages/page/path/name',
})

路由传参

可以通过在所有跳转的 url 后面添加查询字符串参数进行跳转传参，例如：

// 传入参数 id=2&type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test',
})

决定不同端要加载的组件

/** 源码（React JSX） */
<View>
  {process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
  {process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
</View>

/** 编译后（微信小程序）*/
<View>
  {true && <ScrollViewWeapp />}
</View>
/** 编译后（H5）*/
<View>
  {true && <ScrollViewH5 />}
</View>

分布式微服务系统架构第123集：设备服务网络到微信小程序Taro开发效率，高并发架构

1. 项目结构与模块化

1.1 目录结构设计

2. API 与后端对接的封装

2.1 使用封装的请求库

3. 状态管理与数据流控制

3.1 使用 Redux 管理全局状态

4. 异步操作与代码分割

4.1 懒加载与异步组件

项目结构概览

1. API 管理：接口封装与管理

1.1 API 请求封装（api 文件夹）

1.2 API 模块（api 文件夹）

2. 服务层：业务逻辑层（services 文件夹）

2.1 服务层管理（services 文件夹）

3. 状态管理：全局状态管理（store 文件夹）

3.1 使用 Taro 的自带状态管理

3.2 订阅与更新状态

4. 页面结构与组件化：解耦业务逻辑与 UI

4.1 页面模块（pages 文件夹）

4.2 组件化（components 文件夹）

5. 工具函数：公共方法与工具（utils 文件夹）

5.1 工具函数

6. 配置文件：全局常量（config 文件夹）

6.1 配置文件

7. 路由管理：模块化路由配置

7.1 路由管理

提前考虑性能优化

页面加载优化：骨架屏与懒加载

数据缓存与接口请求优化

使用日志与监控工具

日志记录

多端开发与跨平台支持

架构设计：

1. 项目目录结构设计

2. API接口管理

API 请求封装（api/request.js）

国际化支持

国际化配置（i18n/index.js）

语言资源文件（i18n/en.json）

状态管理

Redux 状态管理示例（store/actions.js）

Redux Reducers（store/reducers.js）

组件化与解耦

组件示例（components/Header.jsx）

性能优化

Taro UI

查看 Taro 全部版本信息

切换 Taro 版本

项目初始化

编译运行

安装最新稳定版本的 Taro：

2. 使用 Taro 3.x 版本

为什么选择 Taro 3.x 版本：

安装 Taro 3.x 版本：

锁定 Taro 版本

设计稿及尺寸单位

API

分包加载

小程序端特有属性

networkTimeout

Taro.connectSocket(option)

requiredBackgroundModes

useExtendedLib

页面配置

componentDidShow (options)

componentDidHide ()

onPullDownRefresh ()

onReachBottom ()

onAddToFavorites (Object)

onShareAppMessage (Object)

onShareTimeline ()

路由传参

决定不同端要加载的组件

1.1 API 请求封装（`api` 文件夹）

1.2 API 模块（`api` 文件夹）

2. 服务层：业务逻辑层（`services` 文件夹）

2.1 服务层管理（`services` 文件夹）

3. 状态管理：全局状态管理（`store` 文件夹）

4.1 页面模块（`pages` 文件夹）

4.2 组件化（`components` 文件夹）

5. 工具函数：公共方法与工具（`utils` 文件夹）

6. 配置文件：全局常量（`config` 文件夹）

API 请求封装（`api/request.js`）

国际化配置（`i18n/index.js`）

语言资源文件（`i18n/en.json`）

Redux 状态管理示例（`store/actions.js`）

Redux Reducers（`store/reducers.js`）

组件示例（`components/Header.jsx`）