前言,這個(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