选用Taro做技术框架的原因:最近公司需要开发一款新的小程序,主要是做付费知识相关的产品,涉及到了虚拟商品支付,对于IOS的对于虚拟商品支付的种种限制,加上类似小程序的相关调研,决定IOS支付的方式走h5公总号支付绕开限制,所以在框架选型上面需要一套代码加一点兼容代码,就可以生成小程序和H5版本的库,考虑到本身技术栈以react为主,所以最后老大选择了Taro进行开发 对于Taro的简单介绍以及提供能力可以浏览 Taro初探 需求场景在微信小程序里面,需要做助力、拼团等逻辑的时候,有些需要鉴权的接口等,要再用户授权登录完毕之后,在请求的 之所以要用户授权登录而不用小程序的静态登录方式,是因为在兼容H5的时候,登陆流程是通过公众号登录的,在不想产生多余的数据下,使用用户的 我们这边与后端约定是先通过用户授权 小程序的登录流程如下由于小程序的生命周期机制,生命周期是异步执行的,生命周期之间是无法阻塞执行,如果在 解决思路利用修饰器 举个例子在分享助力的场景下,新用户点击分享用户的卡片进来小程序,需要弹出一个授权弹框等用户授权登陆成功以后,才能进行助力接口的调用。 要注意的是,劫持的是当前声明周期的方法,并不会阻塞到其他生命周期,例如劫持 代码分享主要分享修饰器的使用以及作用,登陆逻辑主要参考流程图即可,代码暂不做分享 写一个能劫持传入组件生命周期的修饰器由于Taro暂时不支持无状态组件,所以只能使用HOC的反向劫持能力,继承传入的组件,这个时候就可以通过等待登录逻辑完成,再执行劫持的生命周期 withLogin.jsconst LIFE_CYCLE_MAP = ['willMount', 'didMount', 'didShow'];
/** * * 登录鉴权 * * @param {string} [lifecycle] 需要等待的鉴权完再执行的生命周期 willMount didMount didShow * @returns 包装后的Component * */
function withLogin(lifecycle = 'willMount') {
// 异常规避提醒
if (LIFE_CYCLE_MAP.indexOf(lifecycle) < 0) {
console.warn(
`传入的生命周期不存在, 鉴权判断异常 ===========> $_{lifecycle}`
);
return Component => Component;
}
return function withLoginComponent(Component) {
// 避免H5兼容异常
if (tool.isH5()) {
return Component;
}
// 这里还可以通过redux来获取本地用户信息,在用户一次登录之后,其他需要鉴权的页面可以用判断跳过流程
// @connect(({ user }) => ({
// userInfo: user.userInfo,
// }))
class WithLogin extends Component {
constructor(props) {
super(props);
}
async componentWillMount() {
if (super.componentWillMount) {
if (lifecycle === LIFE_CYCLE_MAP[0]) {
const res = await this.$_autoLogin();
if (!res) return;
}
super.componentWillMount();
}
}
async componentDidMount() {
if (super.componentDidMount) {
if (lifecycle === LIFE_CYCLE_MAP[1]) {
const res = await this.$_autoLogin();
if (!res) return;
}
super.componentDidMount();
}
}
async componentDidShow() {
if (super.componentDidShow) {
if (lifecycle === LIFE_CYCLE_MAP[2]) {
const res = await this.$_autoLogin();
if (!res) return;
}
super.componentDidShow();
}
}
}
$_autoLogin = () => {
// ...这里是登录逻辑
}
}
}
export default withLogin;
复制代码
注意使用的组件内必须有对应定义的生命周期,而且 需要登录鉴权页面的使用方式pages/xxx/xxx.jsimport Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import withLogin from './withLogin'
@withLogin()
class Index extends Component {
componentWillMount(){
console.log('Index willMount')
// 需要带accessToken调用的接口等
}
componentDidMount(){
console.log('Index didMount')
}
render() {
console.log('Index render');
return <View />;
}
}
export default Index;
复制代码
注意
利用修饰器这个特性,我们还可以对小程序做一层浏览打点,分享封装等操作 |
温馨提示:这篇文章没有解决您的问题?欢迎添加微信:18948083295,有微信小程序专业人员,保证有问必答。转载本站文章请注明转自http://www.okeydown.com/(微信小程序网)。
- 微信扫描二维码关注官方微信
- ▲长按图片识别二维码