静态限制

这里所讲的静态限制,其根本原因是微信小程序有一些信息是配置在json文件的,而json文件是无法在运行时修改的,必须在编译阶段生成对应的文件,所以我们称其为静态限制。

入口文件

关于入口文件的限制,我们在入口文件 中已经做了详细说明。

组件导入路径

每一个微信小程序的自定义组件都有一个相应的 JSON 配置文件。

{
    "component": true,
    "usingComponents": {
        "XXX": "./components/xxx/index"
    },
    "componentGenerics": {}
}

这里的 usingComponents 字段定义了组件需要引用的其他组件。

考虑如下的 React Native 代码:

import XXX from './xxx'
import {YYY} from './yyy'
import z from './zzz'

const Z1 = z.Z1

class HelloWorld extends React.Component {
    render() {
        return (
            <View>
                <XXX/>
                <YYY/>
                <Z1/>
            </View>
        )  
    }
}

当我们使用 AST 静态分析这段代码的时候,如何生成微信小程序端的 usingComponents 呢?

首先根据 import 语句,可以先分析出如下结果:

{
    "usingComponents": {
        "XXX": "./xxx",
        "YYY": "./yyy"
    }
}

XXX, YYY 组件可以直接分析出其路径,那么Z1组件呢?Z1的组件路径仅仅在静态分析阶段是无法得知的,所以这里我们得出我们的第二个静态限制:

组件的引入,需要在 import/require 语句就直接写明,转化引擎需要静态分析出组件路径。

错误案例如下:

import A from 'A'
const B = requie('B')
const Ac = A.c
const Bd = B.d
const x = <Ac/>
const y = <Bd/>

正确使用:

import {A} from 'A'
import B from 'B'
const { C }  = require('C')
const D  = require('D')

const x = <A/>
const y = <B/>
const z = <C/>
const zz = <D/>

xxComponent识别

正如我们在属性传递JSX&组件 里面指出的一样,在使用 this.props.xxComponent 的时候,需要写全路径,不能直接写xxComponent,这也是因为我们需要在静态编译阶段确定出属性是 JSX 片段,从而进行特殊处理。

最后

这些静态限制受限于微信小程序,暂时没有有效的解决方案,希望开发者严格遵守以上要求和约定。

results matching ""

    No results matching ""