你还在为创建页面wxml、wxss、json、js和组件wxml、wxss、json、js四个类型文件而烦恼吗？

在新建页面和新建组件时，如果使用非微信开发者工具，独立建立四个类型的文件无疑是件繁琐麻烦的事情，所以咱们可以求助工具来解决这个问题。以下是我开发的两个npm包，分别对应着使用命令创建页面和组件。

1.全局安装npm包

// 创建页面
npm install wx-page-template-js -g

// 创建组件
npm install wx-component-template-js -g

// 使用命令

2. 使用命令创建页面或组件（先在终端进入页面和组件创建所在目录）

// 创建页面,多个单词使用"_"连接
page 页面名称，如page index/order_list

// 创建组件,多个单词使用"_"连接
component 组件名称，如：component hello_world

3.页面效果

wxml

<!-- 页面骨架 -->
<view class="container">
  page template
</view>

<!-- 组件骨架 -->
<view class="container">
  component template
</view>

wxss

/* 页面默认样式 */
.container {
  min-height: 100vh;
}
/* 模板默认样式 */
.container {

}

json

// 页面
{
  "navigationBarTitleText": ""
}

// 组件
{
  "component": true,
  "usingComponents": {}
}

js

// 页面
/* * @Author:
 * @Date: 2021-12-27 17:03:54
 * @Description:
 */
Page({
  data: {}
});

// 组件
/* * @Author:
 * @Date: 2021-12-27 17:02:25
 * @Description:
 */
Component({
  properties: {},
  data: {}
});

页面生成个性化配置（package.json）

// 页面js文件顶部注释
/*
 * @Author: $author
 * @Date: $date
 * @Description:
 */

// package.json文件中增加配置
"pageTemplateConfig": {
    "author": "い 狂奔的蜗牛", // ts/js顶部注释$author
    "pageTitle": "页面标题", // 页面标题
    "pageTemplateDir": "/Users/snail/Desktop/test_template" // 自定义模板路径（wxml、wxss、json、ts/js所在目录）,如果不指定，则使用自带模板
  }

组件生成个性化配置（package.json）

// 组件js文件顶部注释
/*
 * @Author: $author
 * @Date: $date
 * @Description:
 */

// package.json文件中增加配置
  "componentTemplateConfig": {
    "author": "い 狂奔的蜗牛",  // ts/js顶部注释$author
    "componentTemplateDir": "/Users/snail/Desktop/test_2"  // 自定义模板绝对路径（wxml、wxss、json、ts/js所在目录）,如果不指定，则使用自带模板
  }

github：wx-component-template-js

github：wx-page-template-js