uniapp动态生成pages.json路由
安装好nodejs
打开uniapp官网 uniapp官网
创建项目
vue create -p dcloudio/uni-preset-vue my-project
安装好以后打开项目
这是我本地目录结构
pages随便写几个测试页面
router目录路由配置文件
globalStyle配置globalStyle.js
module.exports = {
globalStyle: {
navigationBarTextStyle: 'white',
navigationBarTitleText: 'test',
navigationBarBackgroundColor: '#4a9ff8',
backgroundColor: '#4a9ff8'
}
}
tabBar配置tabBar.js
module.exports = {
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"iconfontSrc":"",
"list": [{
"pagePath": "pages/index",
"iconPath": "",
"selectedIconPath": "",
"text": "test",
"iconfont": {
"text": "",
"selectedText": "",
"fontSize": "17px",
"color": "#000000",
"selectedColor": "#0000ff"
}
}, {
"pagePath": "pages/test",
"iconPath": "",
"selectedIconPath": "",
"text": "test"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "",
"iconWidth": "24px",
"backgroundImage": ""
}
}
}
build.js关键pages.json打包配置文件
主要用到node require(‘fs’)模块对文件进行读写
const fs = require('fs')
const path = require('path');
const globalStyle = require('./globalStyle.js');
const tabBar = require('./tabBar.js');
const routerPage=[];
const removeStringValue=function(str, val) {
return str.split(val).join('');
};
function removeArrayValue(arr, value) {
return arr.filter(item => item !== value);
};
const getPage = () => {
const srcPath = path.resolve(__dirname, '../pages')
const pages = removeArrayValue(fs.readdirSync(srcPath),".DS_Store");
pages.forEach((itemP,index)=>{
if(itemP.indexOf(".vue")!=-1){
routerPage.push({
path:"pages/"+removeStringValue(itemP,'.vue')
});
}else{
const srcPathChildren = path.resolve(__dirname, '../pages'+'/'+itemP);
const pagesChildren = removeArrayValue(fs.readdirSync(srcPathChildren));
pagesChildren.forEach((itemC,index)=>{
routerPage.push({
path:"pages/"+itemP+"/"+removeStringValue(itemC,'.vue')
});
});
};
});
return routerPage;
};
const writeFilePages={
"pages":getPage(),
"globalStyle":globalStyle,
"tabBar":tabBar,
};
fs.writeFile(
__dirname + '/../pages.json',
JSON.stringify(writeFilePages, null, ' '),
function(err){
if (err) {
console.error('写入文件时发生错误:', err);
return;
};
console.log('文件已成功写入');
}
)
主要逻辑就是通过fs.readdirSync()读取目录,查看有多少文件,判断是否有子目录继续遍历
然后对数据进行处理转为json对象
这个方法主要处理mac系统创建文件的时候会有多余隐藏文件进行删除操作
function removeArrayValue(arr, value) {
return arr.filter(item => item !== value);
};
处理完成输出pages.json文件
fs.writeFile(
__dirname + '/../pages.json',
JSON.stringify(writeFilePages, null, ' '),
function(err){
if (err) {
console.error('写入文件时发生错误:', err);
return;
};
console.log('文件已成功写入');
}
)
打包测试即可看到根据目录动态生成pages.json文件