Skip to main content
Version: 下个版本

从原生小程序迁移过来?

本篇将讲述 Taro 开发和原生小程序开发的主要差异。希望能帮助掌握原生小程序开发,但不太了解 Taro 的同学快速进行迁移。

全局变量#

在使用 React/Vue 时,全局变量推荐使用 React ReduxVuex 等状态管理工具进行管理。

而有时候一些从原生小程序转换过来的项目,会把全局变量挂载到 app 上,然后使用 getApp() 获取它们。改造为 React ReduxVuex 等状态管理方式成本比较大。

因此可以使用入口对象的 taroGlobalData 属性对这种写法进行兼容:

app.js
class App extends Component {
taroGlobalData = {
x: 1
}
render () {
return this.props.children
}
}
index.js
function Index () {
const app = Taro.getApp()
console.log(app.x)
return (...)
}

API 的 scope#

在原生小程序开发中,在自定义组件中调用一些 API,如 createCanvasContextcreateSelectorQuery 等时,需要传入指向自定义组件自身的 this,这里暂且称为 scope

但是 Taro 3 使用 <template> 标签进行渲染,一般不会使用上自定义组件,因此一般不需要传入。

只有两种情况会使用上自定义组件,这时需要正确传入 scope,否则此类 API 的调用会失败。

1. 层级过深#

对于模板不支持递归的小程序(微信、QQ、京东小程序等),当页面元素嵌套层级超过一定层数(默认为 16 层,可以通过配置 baseLevel 修改),会创建一个自定义组件协助递归。

此自定义组件的 scope 没有暴露给开发者,因此层级过深且需要调用此类 API 时,需要使用 <CustomWrapper> 组件包裹。

相关讨论:#9357

2. 使用了 <CustomWrapper>#

<CustomWrapper> 组件常用于优化更新性能。它本质上是一个小程序自定义组件。

示例代码
<CustomWrapper id='demo' />
const page = Taro.getCurrentInstance().page
// 获取到 CustomWrapper 这个自定义组件对象,也就是所说的 scope
const scope = page.selectComponent('#demo')

dataset#

小程序的 dataset 概念在 Taro 中得到部分实现,详细请看: