笔记来源:编程导航。
概述
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
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);
}
...
}