10

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

 2 years ago
source link: http://xuedingmiao.com/blog/uniapp_pages_dynamic.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

# 前言

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

# pages.json 介绍

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

由于 pages.json 文件在项目中是写死的，所以就无法动态配置页面入口了 🐶。

# 解决方法

配置文件既然是写死的那怎么处理动态的页面配置需求呢？当然是有办法的，我们可以选择在打包前根据自己的需求动态修改这个配置文件成为我们需要的样子就可以了。

所以答案就是我们可以写（定制）一个 Node.js 脚本去读取这个全局配置文件进行修改加工之后再回写到 pages.json 即可。

# 实现步骤

# 需求介绍(适用场景)

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

# 脚本思路

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

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

参考内容如下：


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 对象来修改，改成我们需要的样子之后再转回去，因为配置文件里面可能存在一些转换不支持的代码，所以我们需要预先过滤掉可能会引起报错的字符。

本文所述方法只是提供一个思路，具体使用的时候可以结合自己的实际情况进行修改及扩展，比如我们可以把配置存放在数据库，脚本中通过接口拉取配置之后重新生成再进行打包等等。

# 参考资料


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK