小程序轉(zhuǎn)vue靜態(tài)

前言,這個(gè)小插件只是為了方便把原有的小程序界面快速轉(zhuǎn)成vue框架能用的界面節(jié)省時(shí)間,不包含js 部分
使用淘寶的 flexible.js 方案 所以 1rem = 75px ,使用其他方案的rem 可以自行替換相關(guān)代碼

//作者 :咫尺天涯 聯(lián)系方式 827324885 
//1.1.1版本更新內(nèi)容
//更新部分正則  刪除部分小程序獨(dú)有但vue用不到而且可能引起報(bào)錯(cuò)的部分
//使用教程 和page文件同級(jí)即可 
//cmd 到本文件目錄下 然后執(zhí)行 node index.js  
//會(huì)自動(dòng)生成 .vue .css文件 不影響原小程序運(yùn)行
var fs = require("fs");
var path = require('path'); //解析需要遍歷的文件夾
var filePath = path.resolve('./pages');
fileDisplay(filePath);

function fileDisplay(filePath) {
   //根據(jù)文件路徑讀取文件,返回文件列表
   fs.readdir(filePath, function(err, files) {
       if(err) {
           console.warn(err)
       } else {
           //遍歷讀取到的文件列表
           files.forEach(function(filename) {
               
               var s = './pages/' + filename;
               fs.readdir(s, function(err, filesList) {
                   if(err) {
                       console.warn(err)
                   } else {
                       //讀取每個(gè)文件
                       for(var i = 0; i < filesList.length; i++) {
                           getfileList(s + '/' + filesList[i], s, filename)
                       }
                   }
               });
           });
       }
   });
}

function getfileList(flieName, ord, filename) {
   fs.readFile(flieName, 'utf8', function(err, data) {
       if(err) {
           console.warn(err)
       } else {
           //html部分轉(zhuǎn)換
           if(flieName.indexOf("wxml") != -1) {
               var dataName = '<template><div>' + data;
               replaceHtml(dataName, ord, flieName, filename)
           }
           //css部分抓獲
           if(flieName.indexOf("wxss") != -1) {
               replaceCss(data, ord, flieName, filename)
           }
       }
   });
}

function replaceCss(fileContent, fileUrl, s, fileName) {
   var str = fileContent;
       str = str.replace(/image/g, 'img');
   str = str.replace(/navigator/g, 'a');
   str = str.replace(/\d+rpx/g, function(a, b, c, d, e, f) {
       return(parseInt(a) / 75).toFixed(2) + 'rem';
   });
   var s = '<style scoped>' + str + '</style>';
   fs.writeFileSync(fileUrl + '/' + fileName + '.css', s);
}

function replaceHtml(fileContent, fileUrl, s, fileName) {
   var str = fileContent;
   str = str.replace(/image/g, 'img');
   str = str.replace(/view/g, 'div');
   str = str.replace(/text/g, 'span');
   str = str.replace(/bindtap/g, '@onclick');
   str = str.replace(/block/g, 'template');
   str = str.replace(/wx:if/g, 'v-show');
   str = str.replace(/src=\'\{\{/g, ":src='");
   str = str.replace(/wx\:key=\"\*this\"/g, ' ');
   str = str.replace(/wx\:key\=\"index\"/g, ' ');
   str = str.replace(/navigator/g, 'router-link');
   str = str.replace(/wx:for="{{/g, 'v-for= "(item,index) in ');
   str = str.replace(/url\=\'..\//g, "to='");
   str = str.replace(/bindinput/g, '@input');

   //圖片路徑替換
   str = str.replace(/..\/..\/imgs/g, function(a, b, c, d, e, f) {
       return '../assets';
   });
   //rpx轉(zhuǎn)rem 
   str = str.replace(/\d+rpx/g, function(a, b, c, d, e, f) {
       return(parseInt(a) / 75).toFixed(2) + 'rem';
   });

   str += '</div>'
   str += '</template>';
   str += '<script>' + 'import vue from "vue"' + 'var vm = vue;' + 'export default {' + 'name:"' + fileName + '",' + ' data() {return {}}, ' + 'methods: {} ' + '}' + '</script>';
   //新建文件
   fs.writeFileSync(fileUrl + '/' + fileName + '.vue', str);
}

html部分編譯前


image.png

html部分編譯后


image.png

css部分編譯前


image.png

css部分編譯后


image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容