更新：新版HBuilderX已经实现新建页面时自动创建文件夹、自动创建vue文件、自动添加pages.json信息。
========以下为过期信息，但可以作为利用node扩展HBuilderX功能的一个案例============
之前有小伙伴提到过，uni-app 创建页面时，应该同步 pages.json 等相关配置信息。
鉴于目前 HBuilderX 中还未实现此功能，这里分享一个简单的方法来实现此功能。
var fs = require('fs');
var jsonPath = 'pages.json';
var dirPath = 'pages/{name}';
var pagePath = 'pages/{name}/{name}.vue';
var pageReg = /{name}/g;
var encodeType = 'utf8';
var comment = '//pages数组中第一项表示应用启动页';
var pageTpl =
'<template>\n\
\t<view>\n\
\n\
\t</view>\n\
</template>\
\n\
<script>\n\
\texport default {\n\
\n\
\t}\n\
<\/script>\n\
\n\
<style>\n\
\n\
</style>';
var build = function (name) {
// 创建目录
fs.mkdir(dirPath.replace(pageReg, name), (err) => {
if (err) {
throw err;
}
// 创建vue文件
fs.writeFile(pagePath.replace(pageReg, name), pageTpl, encodeType, err => {
if (err) {
throw err;
}
// 同步pages.json中的内容
try {
var pagesJson = '';
var pagesOptions = null;
pagesJson = fs.readFileSync(jsonPath, encodeType).replace(comment, '');
pagesOptions = JSON.parse(pagesJson);
pagesOptions.pages.push({
path: pagePath.replace(pageReg, name),
style: {
navigationBarTitleText: name
}
});
fs.writeFileSync(jsonPath, JSON.stringify(pagesOptions), encodeType);
} catch (err) {
if (err) {
throw err;
}
}
});
});
};
/**
* 根据名称，创建目录及vue文件，并在pages.json中新增page的配置。
*/
if (process.argv.length !== 3) {
console.log('参数个数不正确！');
} else {
build(process.argv[2]);
}
使用方法
将附件中的 build.js 文件解压出来，放在 uni-app 项目的根目录下。
在 uni-app 项目的根目录下打开一个命令行工具
$ node build.js {page}
{page} 就是页面名称，比如输入
$ node build.js hello
就会在 pages 目录下新建一个 hello 目录以及下一级的 hello.vue，同时 pages.json 中的 pages 节点，也会新增页面的配置。
{
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}, {
"path": "pages/hello/hello.vue",
"style": {
"navigationBarTitleText": "hello"
}
}],
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#0faeff",
"backgroundColor": "#fbf9fe"
}
}
缺点
之后 HBuilderX 会逐步完善此类操作功能，这里的示例小伙伴们可以参考继续做扩展。
