你还在为创建页面wxml、wxss、json、js和组件wxml、wxss、json、js四个类型文件而烦恼吗?
发布于 3 年前 作者 lei00 3966 次浏览 来自 分享

在新建页面和新建组件时,如果使用非微信开发者工具,独立建立四个类型的文件无疑是件繁琐麻烦的事情,所以咱们可以求助工具来解决这个问题。以下是我开发的两个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

github: https://github.com/llf137224350/wx-page-template-js

1 回复

跟 IDE编辑器自带的功能一样么。

如果在vscode上开发 也可以下载miniapp的开发插件。支持在 app.json里写路径名字 保存会自动生成这几个文件。或者跟IDE一样右键新建~

回到顶部