【分享】快速新建 uni-app 页面

更新：新版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 会逐步完善此类操作功能，这里的示例小伙伴们可以参考继续做扩展。