wxml2vue 小程序转换器

wxml转vue — 用于将小程序视图层代码（wxml、wxss）一键转换为vue代码的vscode插件

功能

wxml转换：

1. 标签

• view 转 div
• text 转 span
• image 转 img
• block 转 template
• ...

2. 数据绑定

// 转换前
<view style="color: {{checked?'red':'blue'}}"></view>
// 转换后
<div :style="'color: '+(checked?'red':'blue')"></div>

3. 列表渲染

// 转换前
<view wx:for="{{list}}" wx:key="index"></view>
// 转换后
<div v-for="(item, index) in list" :key="index"></div>

4. 条件渲染

// 转换前
<view wx:if="show"></view>
// 转换后
<div v-if="show"></div>

wxss转换：

单位转换

• rpx 转 px

使用方法

可直接在wxml、wxss文件右击进行wxml2vue转换，也可将wxml、wxss拷贝到空vue模板文件后右击进行转换（转换结果会覆盖原文件）。

转换前

wxml:

wxss:

转换后