一、需求背景： 1、实现低代码开发多个平台项目
2、减少手动改写page.json文件
3、实现自动化配置和打包
二、实现步骤
1、第一步你是要会点nodejs
2、搭建node环境（应该老司机不用过多赘述，新手查阅node官网）
3、咱们就直接 上硬菜
（1）构建一个page.json的模型
module.exports = {
globalStyle: {//顶部导航条、状态配置
navigationBarTextStyle: 'black',
navigationBarTitleText: '混合开发',
navigationBarBackgroundColor: '#ffffff',
backgroundColor: '#ffffff'
},
tabBar: { // 底部导航配置
color: '#666',
selectedColor: '#4a9ff8',
backgroundColor: '#f7f7f7',
borderStyle: 'white',
list: [
{
pagePath: 'pages/index/index',
iconPath: '',
selectedIconPath: '',
text: '首页'
},
{
pagePath: 'pages/doctor/index',
iconPath: '',
selectedIconPath: '',
text: '医生'
},
{
pagePath: 'pages/personal/index',
iconPath: '',
selectedIconPath: '',
text: '我的'
}
]
},
// uniIdRouter: {// 路由守卫
// loginPage: "pages/personal/login", // 登录页面路径
// needLogin: [
// "pages/personal/detail/.*" // 需要登录才可访问的页面列表，可以使用正则语法
// ],
// resToLogin: true // 自动解析云对象及clientDB的错误码，如果是客户端token不正确或token过期则自动跳转配置的登录页面，配置为false则关闭此行为，默认true
// },
}
（2）封装nodejs工具，其主要功能是读取配置文件去重写系统默认的page.json文件
// 将子路由模块配置文件转化为 uniapp 配置文件格式
const buildRouter = route => {
const res = []
const { baseUrl, children } = route// 传值，要解析生成page.json文件的配置对象
children.forEach(i => {
const obj = {
path: baseUrl + i.path,
style: {
navigationBarTitleText: i.name
}
}
Object.keys(i).forEach(ii => {
!['path', 'name'].includes(ii) && (obj.style[ii] = i[ii])
})
res.push(obj)
})
return res
}
const getRouter = () => {
const srcPath = path.resolve(__dirname, './modules')
const result = fs.readdirSync(srcPath)
let router = []
result.forEach(r => {
const route = require('./modules/' + r)
router = [...router, ...buildRouter(route)]
})
return router
}
router.pages = getRouter()
fs.writeFile(
__dirname + '/../pages.json',
JSON.stringify(router, null, ' $\t'),
e => e ? console.error(e) : console.log('配置文件更新成功')
)
（3）自定义配置路由模板用于输出对应的json文件
module.exports = {
baseUrl: 'pages/',输出到page.json文件里面的pages对象中path，其结果是baseURL和children对象里面的path的拼接结果
children: [ // 移动端浏览器h5
{
path: 'index/index',
navigationBarTitleText: '首页4'
},
{
path: 'doctor/index',
navigationBarTitleText: '医生'
},
{
path: 'personal/index',
navigationBarTitleText: '我的'
},
{
path: 'personal/register',
name: '注册',
'app-plus': {
titleNView: {
buttons: [
{
text: '消息',
fontSize: '16px'
}
]
}
}
},
{
path: 'personal/login',
name: '登录'
}
],
UpChildren: [// 微信H5、云闪付小程序通用
{
path: 'index/index',
navigationBarTitleText: '首页',
navigationStyle:"custom"
},
{
path: 'doctor/index',
navigationBarTitleText: '医生',
navigationStyle:"custom"
},
{
path: 'personal/index',
navigationBarTitleText: '我的',
navigationStyle:"custom"
},
{
path: 'personal/register',
name: '注册1',
'app-plus': {
titleNView: {
buttons: [
{
text: '消息1',
fontSize: '16px'
}
]
}
}
},
{
path: 'personal/login',
// name: '登录1'
}
],
WXChildren: [
{
path: 'index/index',
navigationBarTitleText: '首页4'
},
{
path: 'doctor/index',
navigationBarTitleText: '医生1'
},
{
path: 'personal/index',
navigationBarTitleText: '我的2'
},
{
path: 'personal/register',
name: '注册1',
'app-plus': {
titleNView: {
buttons: [
{
text: '消息1',
fontSize: '16px'
}
]
}
}
},
{
path: 'personal/login',
name: '登录1'
}
],
}
在终端输入 node router/build.js 命令 敲回车
这样小伙伴们在去打开你的page.json文件就变成你想要的了
关注我，一起学习更多前端知识。
