【Taro】初识 Taro

笔记来源:编程导航。

概述

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

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

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

基本页面开发

app.config.ts

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 中全局修改按钮主题色:

scss 复制代码
.at-button--primary {
  background: #88619a !important;
  border-color: #88619a !important;
}

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

View 相当于 html 中的 div。

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

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

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

登录

理论上用户打开小程序就可以自动登录,不需要自己点按钮,只不过获取不到昵称和头像罢了。

以前我做小程序(23 年前)之所以要点按钮才能登录是为了获取用户头像信息,那会儿能获取到,现在获取不到了,直接前端调用 wx.login 就可以直接拿到 code,然后将 code 给后端,让后端从微信服务器获取 openId 即可。

所有 wx 小程序的原生函数在 Taro 几乎都有对应的接口,比如 Taro.login == wx.login。

https://docs.taro.zone/docs/apis/open-api/login/

这里面的 code 相当于 token,主要用作身份校验。

ts 复制代码
// 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 并设置到请求头中。

示例代码如下:

javascript 复制代码
// 请求拦截器
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);
  }
  ...
}
相关推荐
少恭写代码1 天前
duxapp放弃了redux,在duxapp中局部、全局状态的实现方案
react native·taro·redux·duxapp
Engss7 天前
Taro React-Native Android apk 打包
android·react native·taro
少恭写代码12 天前
通过duxapp提供的基础方法、UI组件、全局样式,快速编写项目
react native·移动开发·taro·duxapp
Feather_7413 天前
taro微信小程序assets静态图片不被编译成base64
微信小程序·小程序·taro
hammer101014 天前
taro底部导航,Tabbar
前端·typescript·taro
那就可爱多一点点17 天前
Taro构建的H5页面路由切换返回上一页存在白屏页面过渡
前端·微信小程序·taro
雪球干死黄旭东19 天前
taro+taro-ui学习
学习·ui·taro
搬砖的前端22 天前
微信小程序:miniprogram-ci自动打包工具使用介绍以及支持配置环境变量、jekins打包、taro、uni-app三方工具
ci/cd·微信小程序·taro
Lanwarf-前端开发1 个月前
Taro 中 echarts 图表使用
前端·echarts·taro
少恭写代码1 个月前
duxui:基于Taro,兼容React Native、小程序、H5的多端UI库
react native·小程序·移动开发·taro·duxapp