wx:xx和v-xx语法转换

133 阅读1分钟

wx:xx和v-xx语法转换

背景

wxml 支持wx:if wx:for 等语法

需要编译为vue2 支持的语法

解决办法

使用html解析器,解析标签的属性,判断属性名是wx:if 就改为v-if 如果是wx:for 就改为v-for 但是 这里需要注意的是,还需要针对 wx:for-index="idx" wx:for-item="itemName" 去做适配

比如:

<view wx:if="{{dataList.length}}" ></view>
<view wx:for="{{dataList}}"  wx:for-index="idx" wx:for-item="itemName" key="{{itemName.name}}"></view>

编译后:

<view v-if="dataList.length" ></view>
<view v-for="(itemName, idx) in dataList" key="{{itemName.name}}"></view>

带来的问题

如果看了后面的资料的话,会发现表达式的字面量都会被我编译为函数表达式,比如上面的wx:for 标签

<view v-for="(itemName, idx) in dataList" :key="_sz(renderData, 'itemName', 'name')"></view>

这时问题就来了,我们的renderData 是页面数据,但是页面数据是没有itemName 这个变量的。

该如何解决呢?(留给大家思考)

已有解决方案