uniapp动态生成pages.json路由

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文件

更多内容请查看个人网站

www.yinkaiyan.cn

小程序