在用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数组中。

 

GitHub 加速计划 / js / json
41.72 K
6.61 K
下载
适用于现代 C++ 的 JSON。
最近提交(Master分支:1 个月前 )
960b763e 4 个月前
8c391e04 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐