跳到主要内容
版本:3.x

从原生小程序迁移过来?

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

全局变量

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

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

对于这种模式,Taro 提供了一些兼容的手段:

React

可以使用入口组件的 taroGlobalData 属性兼容这种写法:

app.js
class App extends Component {
// 设置全局变量 "x"
taroGlobalData = {
x: 1,
}

// ...
}
index.js
function Index() {
// 获取并使用全局变量 "x"
const app = Taro.getApp()
console.log(app.x)

// ...
}

Vue3

可以使用 Taro 提供的 Vue 插件 setGlobalDataPlugin 兼容这种写法:

app.js
// 使用插件,设置全局变量 "x"
import { createApp } from 'vue'
import { setGlobalDataPlugin } from '@tarojs/taro'

const App = createApp(...)
App.use(setGlobalDataPlugin, {
x: 1
})
index.vue
<script>
// 获取并使用全局变量 "x"
const app = Taro.getApp()
console.log(app.x)
</script>

API 的 scope

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

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

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

1. 层级过深

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

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

相关讨论:#9357

2. 使用了 <CustomWrapper>

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

Taro v3.6.3+ 推荐使用以下方式获取:

示例代码
class Index extends React.Component {
onReady () {
// 获取到 CustomWrapper 这个自定义组件对象,也就是所说的 scope
const ctx = document.getElementById('demo').ctx
}

render () {
return (
<View className='index'>
<CustomWrapper id='demo'>
<Text>Hello world!</Text>
</CustomWrapper>
</View>
)
}
}

Taro v3.6.2 及以下版本可以通过以下方式获取(需要对应小程序平台支持 selectComponent API):

示例代码
<CustomWrapper id="demo" />

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

dataset

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