登录

1. 使用Taro.login()获取code
2. 将code传给后端获取token/open_id
3. 获取useInfo授权（可选）

const res = await Taro.login();
await getToken(res.code); // 后端接口

微信支付

1. 先调用后端支付接口，应当返回如下参数
2. 将后端返回的参数，传入Taro.requestOrderPayment

interface Option {
     /** 时间戳，从 1970 年 1 月 1 日 00:00:00 至今的秒数，即当前的时间 */
     timeStamp: string
     /** 随机字符串，长度为32个字符以下 */
     nonceStr: string
     /** 统一下单接口返回的 prepay_id 参数值，提交格式如：prepay_id=*** */
     package: string
     /** 订单信息，仅在需要校验的场景下需要传递，具体见[接口说明](https://developers.weixin.qq.com/miniprogram/dev/framework/ministore/minishopopencomponent2/API/order/requestOrderPayment) */
     orderInfo?
     /** 外部 APP 用户 ID */
     extUserUin?: string
     /** 签名算法 */
     signType?: keyof SignType
     /** 签名，具体签名方案参见 [小程序支付接口文档](https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_7&index=3) */
     paySign: string
   }

 const res = await pay();// 后端接口
 Taro.requestOrderPayment({
   ...res,
   success: (res1) => {
     // do something
     console.log(res1, "requestOrderPayment success");
   },
   fail: (err) => {
     toast("去借钱 " + total);
     console.log(err, "requestOrderPayment err");
   },
 });

分享小程序

1. 在全局配置app.config.ts中添加enableShareAppMessage: true
2. 在app.tsx/page.tsx中添加Taro.showShareMenu
3. 在可分享的页面中添加Taro.useShareAppMessage钩子

// app.config.ts
export default defineAppConfig({
  enableShareAppMessage: true,
  enableShareTimeline: true,
})

// app.tsx
Taro.showShareMenu({
    showShareItems: ["wechatFriends", "wechatMoment"],
  });

// home/index.tsx或者其他页面me/index.tsx
Taro.useShareAppMessage((res)=>{
	return {
    	title: "邀您一起KO一杯～今日一切都OK！",
    	imageUrl: icons.icon_share, // 自定义封面
    	path: `/pages/home/index?token=${getLoad("token")}`, // 自定义path，可以在router.params里获取参数
  	};
})

触发Tabbar和 back，不刷新page

1. 针对Tabbar，可以使用Taro.useTabItemTap(callback)
2. back问题，可以使用Taro.useDidShow(callback)，Tabbar切换也会触发

// page.tsx
Taro.useTabItemTap({
	// some init function
})
Taro.useDidShow({
	// some init function
})

弹窗问题

在小程序中首栈页面的弹窗中，点返回按钮会退出小程序。 可使用Taro自带的PageContainer组件

import { PageContainer } from "@tarojs/components";

<PageContainer
	show={showRegionPop}
	onClickOverlay={() => setShowRegionPop(false)}
	round
	className="backdrop"
>
	{* some components *}
</PageContainer>

路由栈限制问题

官方说明,页面栈不可超过10个，每次使用navigateTo都会增加一个。 大于10个需要手动清空Taro.reLauch

1. 封装自定义跳转、back函数
2. 使用getCurrentPages().map(v => v.route)获取当前页面栈数量
3. 当大于10，使用reLauch清空，并额外存储这10个记录
4. 这样返回就会有问题，检测当前页面是否为页面栈第0项,是则reLauch到该路由,并移除一个存储中的页面

export const navTo = (url: string) => {
  const routers = getCurrentPages().map((v) => v.route);
  if (routers.length >= 10) {
    setLoad("routers", routers); // 存storage
    Taro.reLaunch({ url });
    return;
  }
  Taro.navigateTo({ url });
};

export const navBack = () => {
  const routers = getCurrentPages().map((v) => v.route);
  const saveRouters = getLoad("routers");
  if (routers.length === 1) {
    if (saveRouters.length === 1) {
      Taro.navigateBack();
      return;
    }
    Taro.reLaunch({ url: saveRouters.at(-1) });
    saveRouters.pop();
    setLoad("routers", saveRouters);
    return;
  }
  Taro.navigateBack();
};

留言

该文章持续记录中.... 有任何没写清楚的，请联系v+ laoyin666it