uni-app的pages.json动态生成的方法

2021年09月15日 阅读数:1
这篇文章主要向大家介绍uni-app的pages.json动态生成的方法,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

分享如何动态修改 uni-app 项目的 pages.json。node

前言

最近遇到一个需求:项目中某些功能不在需求清单内,须要藏掉某些 h5 页面的入口再也不对部分用户开放。数据库

pages.json 介绍

pages.json 文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生 tabbar 等。npm

因为 pages.json 文件在项目中是写死的,因此就没法动态配置页面入口了 ????。json

解决方法

配置文件既然是写死的那怎么处理动态的页面配置需求呢?固然是有办法的,咱们能够选择在打包前根据本身的需求动态修改这个配置文件成为咱们须要的样子就能够了。markdown

因此答案就是咱们能够写(定制)一个 Node.js 脚本去读取这个全局配置文件进行修改加工以后再回写到 pages.json 便可。app

实现步骤

需求介绍(适用场景)

这里的具体需求是某地区用户在打开页面以后隐藏底部的 tabbar ,由于隐藏掉 tab 以后页面上就只剩一个 tabbar 了,因此效果与不设置 tabbar 一致。ide

脚本思路

使用 fs 读取 pages.json ,获得一个 json 字符串,把字符串转换为 json 对象后对须要裁剪的部分进行相应处理,最后再写入 pages.jsonui

在项目根目录新建一个 resetPages.js 文件用于存放脚本内容。code

参考内容以下:对象


const fs = require('fs');
const path = './src/pages.json';
fs.readFile(path, function(err, data) {
  if (err) {
    return console.error(err);
  }
  var pages = data.toString(),
    tmpJSON = pages;
  tmpJSON = tmpJSON.replace('/* 应用 */', '');
  tmpJSON = tmpJSON.replace(/\/\//g, '');
  let newPageObject = JSON.parse(tmpJSON);
  // 清空底部 tabbar
  newPageObject.tabBar.list.length = 0;
  fs.writeFile(path, JSON.stringify(newPageObject), function(err) {
    if (err) {
      console.error(err);
    }
    console.log('----------全局配置修改为功-------------');
  });
});

使用方法

在根目录执行命令 node resetPages.js 便可。
打包项目时只须要 npm install && node resetPages.js && npm run build:h5 就好了。

由于每次部署时会先清空输出目录再拉取代码执行构建,因此中间执行一个额外命令修改全局配置的反作用就比较小,属于一种轻量级的方法。

总结

能够发现方法的核心就是把配置转为一个 js 对象来修改,改为咱们须要的样子以后再转回去,由于配置文件里面可能存在一些转换不支持的代码,因此咱们须要预先过滤掉可能会引发报错的字符。

本文所述方法只是提供一个思路,具体使用的时候能够结合本身的实际状况进行修改及扩展,好比咱们能够把配置存放在数据库,脚本中经过接口拉取配置以后从新生成再进行打包等等。

参考资料