评论

微信小程序开发中使用npm命令快速添加页面

使用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创建页面了。



最后一次编辑于  2021-07-16  
点赞 2
收藏
评论

1 个评论

  • Ben Meng
    Ben Meng
    2021-07-19

    不错,有点意思


    2021-07-19
    赞同
    回复
登录 后发表内容