angular之html转wxml模板node.js微信小程序wxml模板转换工具（初版）

╰+攻爆jí腚メ 2023-07-18 06:50 13阅读 0赞

转换js脚本：

const fs = require('fs');
    
    const jsdom = require('jsdom');
    
    const { JSDOM } = jsdom;
    
    const ngHtmlToWxml = ngHtmlFilePath => {
        const exists = fs.existsSync(ngHtmlFilePath);
    
        if (!exists) {
            console.error(ngHtmlFilePath + '不存在。 ');
            return;
        }
    
        const data = fs.readFileSync(ngHtmlFilePath, 'utf8');
    
        const dom = new JSDOM(data);
        // dom.window.document.querySelector("ion-content").innerHTML;
    
        const elements = dom.window.document.getElementsByTagName('*');
        for (let index = 0; index < elements.length; index++) {
            const element = elements[index];
    
            let clickValue = element.getAttribute('(click)');
            if (clickValue) {
                element.removeAttribute('(click)');
                element.setAttribute('bindtap', clickValue.substring(0, clickValue.indexOf('(')));
                const paramsArray = clickValue
                    .substring(clickValue.indexOf('(') + 1, clickValue.lastIndexOf(')'))
                    .split(',');
                paramsArray.forEach(ele => {
                    const paramsName = ele.trim();
                    if (paramsName) {
                        element.setAttribute('data-' + paramsName, `{
       {${paramsName}}}`);
                    }
                });
            }
    
            let ifValue = element.getAttribute('*ngIf');
            if (ifValue) {
                element.removeAttribute('*ngIf');
                element.setAttribute('wx:if', `{
       {${ifValue}}}`);
            }
    
            let forValue = element.getAttribute('*ngFor');
            if (forValue) {
                let forValueArrays = forValue.split(' ');
                element.removeAttribute('*ngFor');
                element.setAttribute('wx:for', `{
       {${forValueArrays[3]}}}`);
                element.setAttribute('wx:for-index', `i`);
                element.setAttribute('wx:for-item', `${forValueArrays[1]}`);
                element.setAttribute('wx:key', 'id');
            }
    
            // TODO 这里只处理了input
            let ngModel = element.getAttribute('[(ngModel)]');
            if (ngModel) {
                element.removeAttribute('[(ngModel)]');
                // input
                element.setAttribute('bindinput', ngModel);
            }
    
            // TODO 未完待续 哈哈哈 20200325 01:10
    
            
    
    
        }
    
        const body = dom.window.document.getElementsByTagName('body');
    
        const newHtml = body[0].innerHTML;
    
        return newHtml;
    };
    
    const saveWxml = (wxmlFilePath, wxml) => {
        const exists = fs.existsSync(wxmlFilePath);
        if (exists) {
            console.error(wxmlFilePath + '已存在！');
            return;
        }
        fs.writeFileSync(wxmlFilePath, wxml);
        console.log('wxml转换成功，请检查测试！');
    };
    
    const ngHtmlFilePath = './mall-product-details.page.html';
    
    const wxml = ngHtmlToWxml(ngHtmlFilePath);
    
    const wxmlFilePath = ngHtmlFilePath.replace('.html', '.wxml');
    
    saveWxml(wxmlFilePath, wxml);

依赖信息：

{
        "name": "wx-cli",
        "version": "1.0.0",
        "description": "",
        "main": "index.js",
        "scripts": {
            "test": "echo \"Error: no test specified\" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {
            "fs": "0.0.1-security",
            "jsdom": "^15.2.0"
        }
    }

执行方式： node  index.js

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM3Mjc4MDU_size_16_color_FFFFFF_t_70]: /images/20230528/6b0c7a66376741f082baddfbbc172630.png

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关【小程序】WXML 模板

目录 WXML 模板 1. 什么是 WXML 2. WXML 和 HTML 的区别 WXSS 样式 1. 什么是 WXSS 2. WXSS 和 CSS 的区别 J

水深无声/ 2024年03月30日 11:08/ 0 赞/ 93 阅读

相关小程序WXML之模板

WXML提供一种比较特殊的标签模板（template），可以在模板中定义代码片段，然后在不同的地方调用。这个有点类似C和java里面的函数方法。定义模板 ------

曾经终败给现在/ 2023年10月17日 09:04/ 0 赞/ 168 阅读

相关 angular之html转wxml模板node.js微信小程序wxml模板转换工具（初版）

转换js脚本： const fs = require('fs'); const jsdom = require('jsdom');

╰+攻爆jí腚メ/ 2023年07月18日 06:50/ 0 赞/ 14 阅读

相关微信小程序WXML语法之模板和引用

模板 WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。定义模板使用 name 属性，作为模板的名字。然后在`<templ

缺乏、安全感/ 2023年07月03日 02:35/ 0 赞/ 33 阅读

相关微信小程序（WXML模板文件二）

课程大纲（1）循环指令key属性补充（2）wx:if条件变异指令（3）`<block>`标签（4）hidden隐藏元素（5）模板

我就是我/ 2023年06月15日 09:45/ 0 赞/ 169 阅读

相关微信小程序（WXML模板文件二）

【本节大纲】（1）循环指令key属性补充（2）wx:if条件变异指令（3）标签（4）hidden隐藏元素（5）模板（6）引用（7）共同

约定不等于承诺〃/ 2023年06月15日 09:43/ 0 赞/ 68 阅读

相关 5.微信小程序（WXML模板文件二）

微信小程序（WXML模板文件二）大纲（1）循环指令key属性补充（2）wx:if条件变异指令（3）标签（4）hidden隐藏元素（5）模

朴灿烈づ我的快乐病毒、/ 2023年06月15日 07:24/ 0 赞/ 41 阅读

相关微信小程序（WXML模板文件一）

课程大纲（1）页面根元素（2）WXML简介（3）标签闭合、敏感性（4）数据驱动（5）数据绑定\{ \{\}\}—\{ \{\}\} （6）列

曾经终败给现在/ 2023年06月13日 04:35/ 0 赞/ 43 阅读

相关微信小程序（WXML模板文件一）

今日大纲（1）页面根元素（2）WXML简介（3）标签闭合、敏感性（4）数据驱动（5）数据绑定\{ \{\}\}—\{ \{\}\}

迷南。/ 2023年06月13日 03:22/ 0 赞/ 59 阅读

相关 4.微信小程序（WXML模板文件一）

微信小程序（WXML模板文件一）（1）页面根元素（2）WXML简介（3）标签闭合、敏感性（4）数据驱动（5）数据绑定\{ \{\}\}—\{ \

落日映苍穹つ/ 2023年06月12日 14:28/ 0 赞/ 44 阅读