【Taro】初识 Taro

news2024/9/22 7:33:27

笔记来源：编程导航。

概述

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);
  }
  ...
}