当前位置: 首页 > news >正文

【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

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

登录

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

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

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

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

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

// 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);}...
}
http://www.lryc.cn/news/443698.html

相关文章:

  • 【设计模式-备忘录】
  • 【数据结构】排序算法系列——快速排序(附源码+图解)
  • Arthas thread(查看当前JVM的线程堆栈信息)
  • Tomcat_WebApp
  • 代码随想录算法训练营Day10
  • 十个服务器中毒的常见特征及其检测方法
  • LeetCode 每周算法 6(图论、回溯)
  • Selenium元素定位:深入探索与实践
  • 前端开发——(1)使用vercel进行网页开发
  • 故障诊断│GWO-DBN灰狼算法优化深度置信网络故障诊断
  • 【工具】Windows|两款开源桌面窗口管理小工具Deskpins和WindowTop
  • 【Unity杂谈】iOS 18中文字体显示问题的调查
  • 后端-navicat查找语句(单表与多表)
  • 基于springboot的在线视频点播系统
  • 笔记整理—内核!启动!—kernel部分(8)动态编译链接库与BSP文件
  • Cpp类和对象(中续)(5)
  • 深度学习02-pytorch-01-张量的创建
  • pg入门9—pg中的extentions是什么
  • JAVA:Nginx(轻量级的Web服务器、反向代理服务器)--(1)
  • 互斥锁和自旋锁
  • 救生圈检测系统源码分享
  • 容器技术--Dockerfile 构建镜像
  • Hive企业级调优[5]—— HQL语法优化之数据倾斜
  • 表示速度的speed与velocity语义辨析
  • Electron 图标修改
  • 项目扩展二:消息拉取功能的实现
  • C语言6大常用标准库 -- 4.<math.h>
  • 【图像匹配】基于SIFT算法的图像匹配,matlab实现
  • C++门迷宫
  • 用最通俗易懂的语言和例子讲解三维点云