在用uni-app开发小程序项目中,按官方文档需要把所有页面路径都放到pages.json文件下,导致pages.json文件较大,可读性差。更主要的是多人开发时,合入代码时会产生冲突。有没有办法可以动态生成pages.json文件呢?
当然有,请看:https://blog.csdn.net/fungleo/article/details/105165774
这种方法需要运行项目之前先node router/build.js 事先生成pages.json文件。还有没有其他办法? 请看下文:
uni-app自带一个webpack loader钩子文件pages.js,在项目根目录下建立pages.js(与pages.json同级)即可生效。通过此文件就可以把动态生成的pages对象覆盖掉pages.json文件。代码如下:
/*
*uni-app自带一个webpack loader钩子文件pages.js,在项目根目录下建立pages.js(与pages.json同级)即可生效
* pages.js要求CommonJS规范,直接通过module.exports输出一个钩子函数。
*/
let pages = require('./router/buildRouter.js')
module.exports = (pagesJson, loader) => {
//此钩子函数必须返回一个json对象
return pages
}
在项目根目录下新建router文件夹,并新建buildRouter.js文件,看下其内容:
/*此文件用来动态加载pages下的页面路径
*/
let pagesJson = {
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
// /pages/目录下的模块名称
const mainPages = ['auth', 'set']
mainPages.forEach((item) => {
const moduleRouter = require(`../pages/${item}/PagesConfig.js`)
moduleRouter.forEach((subItem) => {
pagesJson.pages.push(subItem)
})
})
module.exports = pagesJson
在pages/目录下每个模块下新建一个PagesConfig.js文件,此文件用来管理此模块下的所有页面路径。我们遍历所有模块名把PagesConfig.js中的页面路径都放到pagesJson对象中,最后生成了完整的pages.json文件内容。
之后的开发中,如果在已有的模块中新增页面,只需把页面路径写入到对应模块的PagesConfig.js文件中,如果是新增模块的话,还需要把模块名称写入到buildRouter.js中的mainPages数组中。