前端技术栈：将微信小程序代码自动转换成 Vue 代码

前段时间做了一个微信小程序，使用了云开发，但是云开发对业务逻辑的限制实在是太多了，因此想将其重构成 uni-app。最近将 wxml 改成 Vue 实在让人头大，因此“偷懒”使用 Python 写了一些正则表达式进行自动替换。

---

代码

直接上代码 →

import re

res = []  # 转换结果


# 使用正则表达式替换 wxml 中的内容
def convert(line):
    res_line = line
    # 匹配 bindchange="bindPickerClassTypeChange" --> @change="bindPickerClassTypeChange"
    ret = re.match(r'(.*)bind([\w|_]*?)="([\w|_]*?)"(.*)', res_line)
    if ret:
        res_line = line.replace('bind' + ret.group(2) + '="' + ret.group(3),
                                '@' + ret.group(2) + '="' + ret.group(3))

    # 匹配 wx:if="{{imgList.length<4}}" --> v-if="imgList.length<4"
    ret = re.match(r'(.*)(wx:if=\"{{)(.*)(}}\")(.*)', line)
    if ret:
        res_line = res_line.replace(ret.group(2) + ret.group(3), 'v-if="' + ret.group(3)).replace(
            ret.group(3) + ret.group(4), ret.group(3) + "\"")

    # 匹配 wx:for="{{imgList}}" --> v-for="(item,index) in imgList"
    ret = re.match(r'(.*)(wx:for=\"{{)(.*?)(}}\")(.*)', res_line)
    if ret:
        res_line = res_line.replace(ret.group(2) + ret.group(3), 'v-for="(item,index) in ' + ret.group(3)).replace(
            ret.group(3) + ret.group(4), ret.group(3) + "\"")

    # 匹配 wx:key="{{index}}" --> :key="index"
    ret = re.match(r'(.*)(wx:key=\"{{)(.*?)(}}\")(.*)', res_line)
    if ret:
        res_line = res_line.replace(ret.group(2) + ret.group(3) + ret.group(4), ':key="index"')

    # 匹配 data-id="{{item._id}}" --> :data-id="item._id"
    ret = re.match(r'(.*)data-(.*?)(\"{{)(.*?)(}}\")(.*)', res_line)
    while ret:  # 一行可能出现多个
        res_line = res_line.replace("data-" + ret.group(2) + ret.group(3) + ret.group(4) + ret.group(5),
                                    ":data-" + ret.group(2) + '"' + ret.group(4) + '"')
        ret = re.match(r'(.*)data-(.*?)(\"{{)(.*?)(}}\")(.*)', res_line)

    # 匹配 value="{{identity_index}}" --> :value="identity_index"
    ret = re.match(r'(.*)value="{{(.*?)}}"(.*)', res_line)
    if ret:
        res_line = res_line.replace('value="{{' + ret.group(2) + '}}"', ':value="' + ret.group(2) + '"')

    # 匹配 range="{{identity_list}}" --> :range="identity_list"
    ret = re.match(r'(.*)range="{{(.*?)}}"(.*)', res_line)
    if ret:
        res_line = res_line.replace('range="{{' + ret.group(2) + '}}"', ':range="' + ret.group(2) + '"')

    # 匹配 class="cu-modal {{modal=='ModalEdit'?'show':''}}" --> :class="'cu-modal'+[modal=='ModalEdit'?'show':'']"
    ret = re.match(r'(.*)class="([^"]*?){{(.*?)}}(.*?)"', res_line)
    if ret:
        res_line = res_line.replace('class="' + ret.group(2) + '{{' + ret.group(3) + '}}' + ret.group(4) + '"',
                                    ':class="\'' + ret.group(2) + '\'+[' + ret.group(3) + ']' + ret.group(4) + '"')

    # 匹配 style="animation-delay: {{(index+1)*0.1}}s;" --> :style="[{animationDelay: (index + 1)*0.1 + 's'}]"
    res_line = res_line.replace('style="animation-delay: {{(index+1)*0.1}}s;"',
                                ':style="[{animationDelay: (index + 1)*0.1 + \'s\'}]"')

    return res_line


# 打开需要转换的 .wxml
with open("WeChat.wxml", "r", encoding='utf-8') as f:  # 打开文件
    data = f.readlines()  # 读取文件
    for line in data:
        opLine = line.replace('isBack="{{true}}"', ':isBack="true"').replace('bindtap', '@click')
        opLine = convert(opLine)
        res.append(opLine)

# 将转换结果写入
with open("uniApp.vue", "w", encoding='utf-8') as f:
    f.write("<template>\n\t<view>\n")  # Vue 头部内容
    for line in res:
        f.write(line)
    f.write(
        "\n\n\t</view>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t}\n\t},\n\tmethods: {"
        "\n\t}\n}\n</script>\n\n<style>\n</style> ")  # Vue 尾部内容

---

“食用”步骤

1. 将需要转换的 wxml 命名为 “WeChat.wxml”，并放在与 Python代码的同级目录下；
2. 运行 Python 代码；
3. 转换后的结果会生成在同级目录的 “uniApp.vue”。

---

持续更新

• 本程序暂未支持 js 的转换
• 欢迎各位大佬丰富本项目（GitHub 地址：https://github.com/SongXJ01/WeChat2UniApp）