微信小程序开发中使用npm命令快速添加页面
在小程序开发过程中每个页面中引用了相同的脚本,为了快速创建页面,首先创建模板内容,使用npm命令进行创建页面。
第一步:npm 安装一下iconv-lite
第二步:在根目录创建scripts/page.js
内容如下:
/**
* pages页面快速生成脚本
* 用法:npm run tep `文件名`
* npm run page product/ProductClass
*/
const fs = require('fs');
var iconv = require('iconv-lite');
const dirName = process.argv[2];
const cover = process.argv[3];
console.log(dirName)
const dirNameArr = dirName.split('/')
const folder = dirNameArr[0]
const fileName = dirNameArr[1]
const capPirName = dirName.substring(0, 1).toUpperCase() + dirName.substring(1);
console.log(folder,fileName,capPirName,__dirname)
if (!dirName) {
console.log('文件夹名称不能为空!');
console.log('示例:npm run page product/ProductClass');
process.exit(0);
}
var curPath = __dirname.substring(0,__dirname.lastIndexOf('/'))
function loadjson(filepath)
{
var data;
try{
var jsondata = iconv.decode(fs.readFileSync(curPath + '/' + filepath, "binary"), "utf8");
data = JSON.parse(jsondata);
}
catch(err)
{
console.log(err);
}
return data;
}
function savejson(filepath, data)
{
var datastr = JSON.stringify(data, null, 4);
if (datastr)
{
try{
fs.writeFileSync(curPath + '/' + filepath, datastr);
}
catch(err)
{
}
}
}
const wxmlTemp = `
<view>
</view>
`
const jsTemp = `
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
tools.curPagePath(options)
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
})
`
const wxssTemp = `
`
const jsonTemp = `
{
"usingComponents": {},
"navigationBarTitleText": ""
}
`
if(!fs.existsSync(`pages/${folder}`)){
fs.mkdirSync(`pages/${folder}`)
}
if(!fs.existsSync(`pages/${folder}/${fileName}`)){
fs.mkdirSync(`pages/${folder}/${fileName}`)
}else{
// 如果文件夹存在则说明页面已创建,不能再操作了,否则会覆盖已有页面
if(cover && cover !=1){
process.exit(0);
}
}
process.chdir(`pages/${folder}/${fileName}`); // cd $1
fs.writeFileSync(`${fileName}.wxml`, wxmlTemp)
fs.writeFileSync(`${fileName}.json`, jsonTemp)
fs.writeFileSync(`${fileName}.wxss`, wxssTemp)
fs.writeFileSync(`${fileName}.js`, jsTemp)
var jsonPath = 'app.json'
var appJson = loadjson(jsonPath)
if(appJson){
var pages = appJson.pages
if(pages.indexOf(`pages/${folder}/${fileName}/${fileName}`) == -1){
pages.push(`pages/${folder}/${fileName}/${fileName}`)
}
savejson(jsonPath,appJson)
}
process.exit(0);
第三步:在package.json中添加
"scripts": {
"page": "node scripts/page"
}
然后就可以在终端输入npm run page product/productClass创建页面了。