你还在为创建页面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](/user/Author):
* [@Date](/user/Date): 2021-12-27 17:03:54
* [@Description](/user/Description):
*/
Page({
data: {}
});
// 组件
/* * [@Author](/user/Author):
* [@Date](/user/Date): 2021-12-27 17:02:25
* [@Description](/user/Description):
*/
Component({
properties: {},
data: {}
});
页面生成个性化配置(package.json中配置)
// 页面js文件顶部注释
/*
* [@Author](/user/Author): $author
* [@Date](/user/Date): $date
* [@Description](/user/Description):
*/
// package.json文件中增加配置
"pageTemplateConfig": {
"author": "い 狂奔的蜗牛", // ts/js顶部注释$author
"pageTitle": "页面标题", // 页面标题
"pageTemplateDir": "/Users/snail/Desktop/test_template" // 自定义模板路径(wxml、wxss、json、ts/js所在目录),如果不指定,则使用自带模板
}
组件生成个性化配置(package.json中配置)
// 组件js文件顶部注释
/*
* [@Author](/user/Author): $author
* [@Date](/user/Date): $date
* [@Description](/user/Description):
*/
// package.json文件中增加配置
"componentTemplateConfig": {
"author": "い 狂奔的蜗牛", // ts/js顶部注释$author
"componentTemplateDir": "/Users/snail/Desktop/test_2" // 自定义模板绝对路径(wxml、wxss、json、ts/js所在目录),如果不指定,则使用自带模板
}
github: https://github.com/llf137224350/wx-component-template-js