最近有一个小程序项目,因为一些原因项目架构选择了微信小程序原生+Taro 混编的方式进行开发,在开发的过程中发现 Taro 不支持使用原生的 behaviors 特性,因为混编的原因项目当中已有原生页面在使用 behaviors,所以需要一个方案在不影响其他页面的基础上使 Taro 也能使用这一特性。
behaviors 除了有类似 Mix 的效果,还有生命周期的封装性。所以咱们考虑的方向就是实现这两点就可以了。
最终以挂载一个空的原生组件(它使用了 behaviors)到 Taro 页面做为中转的方式解决了这一棘手的问题。通过中转组件就可以在 Taro 页面调用到 behaviors 的方法,以及使用 behaviors 生命周期的封装。
switchAccountBehaviors.js:
objectivec
export default Behavior({
pageLifetimes: {
show: function () {
this.judgeSwitchAccountRefresh();
}
},
methods: {
const judgeSwitchAccountRefresh = () => {
// do...
},
const doSome = () => {
// do...
}
}
});
wxml 为空的中转组件,路径:@/behaviors/components
objectivec
import switchAccountBehaviors from "@/behaviors/switchAccountBehaviors";
Component({
properties: {},
data: {},
behaviors: [switchAccountBehaviors],
methods: {}
});
Taro 页面的 index.config.js:
objectivec
export default ({
usingComponents: {
// 定义需要引入的第三方组件
// 1. key 值指定第三方组件名字,以小写开头
// 2. value 值指定第三方组件 js 文件的相对路径
"behaviors-component": "@/behaviors/components",
}
});
Taro 页面的 index.jsx
objectivec
// Taro 页面调用 behaviors 的方法
getCurrentInstance()?.selectComponent("#behaviors-component")?.doSome();
render() {
...
return (
<>
...
<behaviors-component id="behaviors-component" />
</>
)
}