【Taro】初识 Taro

笔记来源：编程导航。

概述

Taro 官方文档：https://taro-docs.jd.com/docs/ （跨端开发框架）

Taro 官方框架兼容的组件库：

taro-ui：https://taro-ui.jd.com/#/ （最推荐，兼容性最好）
nut-ui

下面的讲解是以 react + ts + taro + taro-ui 为主要技术。

基本页面开发

app.config.ts

export default defineAppConfig({// 路由pages: ["pages/index/index","pages/pub/index","pages/user/index"],// 页面属性window: {backgroundTextStyle: "light",navigationBarBackgroundColor: "#fff",navigationBarTitleText: "周家庄智慧旅游",navigationBarTextStyle: "black",},// 底部导航栏tabBar: {color: "#333",backgroundColor: "#fff",borderStyle: "white",list: [{pagePath: "pages/index/index",text: "首页",iconPath: "./assets/tabbar/tab_index.png",selectedIconPath: "./assets/tabbar/tab_index_seled.png"},{pagePath: "pages/pub/index",text: "功能",iconPath: "./assets/tabbar/tab_pub.png",selectedIconPath: "./assets/tabbar/tab_pub_seled.png"},{pagePath: "pages/user/index",text: "我的",iconPath: "./assets/tabbar/tab_user.png",selectedIconPath: "./assets/tabbar/tab_user_seled.png"}]}
});

注：全局修改主题色可以：

在 app.scss 中全局修改按钮主题色:

.at-button--primary {background: #88619a !important;border-color: #88619a !important;
}

普通页面路由遵循约定式路由，

在这里插入图片描述

View 相当于 html 中的 div。

index.config.ts 里面存放该页面的一些配置：

export default definePageConfig({navigationBarTitleText: '用户页'
})

页面见数据传递

方法 1：url params

https://taro-docs.jd.com/docs/apis/route/navigateTo

比如：result?answerList=[A,B,C]

方法 2：全局状态

https://taro-docs.jd.com/docs/context#contextprovider

方法 3：本地数据存储（推荐，较为简单）

https://taro-docs.jd.com/docs/apis/storage/setStorageSync

小程序特有的奇怪bug，不生效的时候记得清理缓存。

网络请求

小程序中无法直接使用主流的 axios。我们可以使用适配器：https://github.com/bigmeow/taro-platform/tree/master/packages/axios-taro-adapter

此外，还可以增加一些额外配置，比如拦截器等。

// app.ts
import Taro, { useLaunch } from "@tarojs/taro";
import { PropsWithChildren } from "react";
import "taro-ui/dist/style/index.scss"; // 引入组件样式 - 方式一
import "./app.scss";function App({ children }: PropsWithChildren) {useLaunch(async () => {const res = await Taro.login();console.log(res);// todo 拿到 res.code 后，调用后端登录});return children;
}export default App;

需要后端支持，后端开发小程序登录可以使用 WxJava 库。

怎么保证小程序全局自动登录？

1）首次进入 app 时，在 app.ts 中触发自动登录

2）每次操作出现未登录时，立刻调用登录函数，作为一种兜底

存在的问题：用户首次进入的页面需要获取到用户信息，但是自动登录是异步的，可能在登录完成前，就已经请求了用户信息，结果后端响应未登录，怎么办呢？

理想情况下是自动登录后，才进行其他的请求和操作，防止出现 “未登录” 的报错，需要用户刷新重试。

答案：使用全局状态管理，在页面内用 useEffect 监听登录状态的变化，如果已登录，再获取用户信息。

其他兜底策略：显示登录按钮

其他注意事项：在需要获取用户信息的位置，建议调用 getLoginUser 函数获取到最新的用户信息（而不是前端的缓存），适用于积分动态变化的场景。

怎么存储 session 和携带 cookie 信息？

相比于 web 开发，小程序除了可能要维护已登录用户信息外，还要自己额外维护 cookie。

可以通过全局请求响应拦截器，登录响应后自动设置 Cookie 到本地存储、发请求时自动取出 Cookie 并设置到请求头中。

示例代码如下：

// 请求拦截器
const requestInterceptor = (config: InternalAxiosRequestConfig) => {config.headers.cookie = Taro.getStorageSync(COOKIE_KEY);return config;
};// 响应拦截器
const responseInterceptor = (response: AxiosResponse) => {// 自动种上 Cookie（和业务逻辑无关，弥补小程序没有 Cookie 管理机制）const cookie = response.headers["Set-Cookie"];if (cookie) {Taro.setStorageSync(COOKIE_KEY, cookie);}...
}