您现在的位置是：首页 >技术杂谈 >uniapp使用Nodejs自动化配置page.json生成多套终端代码网站首页技术杂谈

需求背景：

        1、使用轻量级框架开发一个便于维护的一套代码；

        2、要同时适配微信小程序、h5网页版、APP；

        3、要同时兼容嵌入云闪付小程序和输出到银行APP应用上（从0到1学习云闪付开发，云闪付小程序崛起之玩转云闪付小程序）

痛点：

        1、开发人员、成本有限不能加大投入；

        2、应用软件UI、功能相似度80%；

        3、针对不同应用（微信小程序、h5网页版、APP）终端配置的tab按钮是不同的；

综上几点考虑最终采用了vue+uniapp的框架进行开发

一、首先对原生uniapp框架进行二次改造：

1、第一步你是要会点nodejs

2、搭建node环境（应该老司机不用过多赘述，新手查阅node官网）

3、咱们就直接 上硬菜

创建文件目录

（1）构建一个page.json的模型

module.exports = {

  globalStyle: {//顶部导航条、状态配置

    navigationBarTextStyle: 'black',

    navigationBarTitleText: '混合开发',

    navigationBarBackgroundColor: '#ffffff',

    backgroundColor: '#ffffff'

  },

  tabBar: { // 底部导航配置

    color: '#666',

    selectedColor: '#f2f2f2',

    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(jj => {
      !['path', 'name'].includes(jj) && (obj.style[jj] = i[jj])
    })
    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, ' $	'),
  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文件就变成你想要的了