uni-app的pages.json处理方案示例

目录
  • uni-pages-hot-modules
  • uni-app的pages.json的模块化及模块热重载
    • 安装
    • 注意！
  • uni-pages-hot-modules做了什么
    • uni-app的“彩蛋”
  • pages.js输出的函数参数
    • pagesJson < Object >
    • loader < Object >
    • addDependency
  • pages.js的模块化
    • pages.js示例
  • 模块的规范
    • module1.js示例
    • 其他

uni-pages-hot-modules

github uni-app项目示例

npm包源码

uni-app的pages.json的模块化及模块热重载

解决uni-app的pages.json无法模块化的问题，并且解决模块热重载和缓存的问题

安装

npm i uni-pages-hot-modules -S

注意！

发现uni-app每次更新对pages.js的支持度会不同，比如某个版本竟然注释掉了对pages.js的热重载依赖，这里做了兼容。只要uni-app不推翻自己的设计，此功能长久有效

uni-pages-hot-modules做了什么

// 做了非常轻便的事情，相当于
loader.addDependency(modulePath)
delete require.cache[modulePath]
require(modulePath)

uni-app的“彩蛋”

uni-app自带一个webpack loader钩子文件pages.js，在项目src目录下建立pages.js（与pages.json同级）即可生效（pages.json仍然需要存在，作为初始值，建议存放一些和路由无关的配置）。
pages.js要求CommonJS规范，直接通过module.exports输出一个钩子函数。

pages.js输出的函数参数

pagesJson < Object >

pages.json的解析内容

loader < Object >

uni-pages-loader的钩子属性，{ addDependency < Function > }

addDependency

用于手动为uni-pages-loader添加依赖模块

pages.js的模块化

由于是js，就可以实现模块的依赖，如果不考虑模块的热重载问题，可以直接使用require引入依赖但是大多数情况下，需要依赖的模块也可以通过热重载更新pages.js，由于不是webpack的标准运行依赖，所以需要手动添加依赖项(使用addDependency)，并且需要每次清除模块的缓存，因此uni-pages-hot-modules就诞生了

pages.js示例

module.exports=(pagesJson,loader)=>{
    // 需要将loader传入作为初始化，v0.0.6之后只需要初始化一次
    const hotRequire = require('uni-pages-hot-modules')(loader)
    return {
        "pages": [
            {
                "path": "pages/about/about",
                "style": {
                    "navigationBarTitleText": "测试1"
                }
            },
            ...hotRequire('./module1.js')
        ],
        "subPackages":[{
            "root": "pages/test",
            "pages": [{
                "path": "about",
                "style": {
                    "navigationBarTitleText": "测试"
                }
            }]
        }]
    }
}

模块的规范

被加载的模块也是CommonJS规范，通过module.exports输出

module1.js示例

// v0.0.6之后，模块内部使用不再需要提供loader
const hotRequire = require('uni-pages-hot-modules')
module.exports=[
   {
       "path": "pages/sub/sub",
       "style": {
           "navigationBarTitleText": "sub"
       }
   },
   ...hotRequire('./sub-module1.js')
]

其他

不支持条件编译，需要自己通过process.env.UNI_PLATFORM来判断，自定义环境的需要自己添加env变量来判断
使用uni-pages-hot-modules引入模块必须输入全的文件名包括后缀，否则将不会进行热重载

以上就是uni-app的pages.json处理方案示例的详细内容，更多关于uni-app pages.json处理的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • uni-app使用swiper实现轮播图的方法

    目录 uni-app轮播图实现之swiper 补充:uniapp swiper 自定义轮播图指示点 总结 uni-app轮播图实现之swiper 首先在data中定义一个图片数据的对象数组 data() { return { rotation: [ { id: 1, url: 'https://imgcps.jd.com/ling4/100035927374/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa42/60f0

  • uni-app多环境部署解决方案详解

    uni-app多环境部署解决方案详解

    目录 前言 尝试几种方式 解决方案 部署方式 获取接口 部署路径 命令行 其他 总结 前言 最近几周都在处理公司的移动业务,而为在后期能统一多端,解放自己,迎合公司的技术栈:选用了 uni-app 来开发.开发前期重新对公司移动业务做深入了解,重构大部分业务逻辑,也抽离出基础组件:但实际到部署的时候,出现来问题:由于现在只考虑 H5 端,部署和测试会出现多环境配置,但是我使用的 HBuilderX 工具创建的工程,所以只存在开发环境:development 和生产环境:production. 尝

  • uni-app禁用返回按钮/返回键的具体实现

    目录 前言 实现 具体演示代码 附:uni-app H5的返回拦截经验分享 总结 前言 使用uni-app开发原生应用时,遇到需求: 需要禁用物理返回按钮.手势返回. uni.navigateBack仍可使用. 实现 当前页面的onBackPress()中,禁用物理返回 pages.json中,去除当前页面的返回按钮 当前页面的mounted()中,隐藏当前页面的返回按钮(针对pages.json中设置无效的情况) 具体演示代码 1.当前页面中,在onBackPress()控制是否禁用返回按钮.

  • uni-app动态修改主题色的方法详解

    目录 前言 一.uni.scss 使用方式 二.暗黑主题 三.自定义主题配置 1.在根目录下新建 theme 文件夹 css-theme uni.scss中引入 css-variate cue-theme main.js 导入 system-theme 2.vuex 配置 index.js 全局导出 main.js中导入 3.页面中使用 四.黑夜 白天主题展示 总结 前言 老是碰到初版制作完成没多久,就整一出说什么要更改整个项目的色彩体系.真的是宝宝心里苦啊! 起初都是通过uni项目自带的uni

  • 使用uni-app打包H5的图文教程

    使用uni-app打包H5的图文教程

    1. 找到项目中 manifest.json --- H5 配置---运行时的基础路径, 将路径修改为 相对路径(./ ) 2. 修改完后,点击工具栏 --- 发行 --- 网站pc web或手机 h5 3. 弹出弹窗,修改网站标题与网站域名(网站域名取对应项目的域名,一般为https/http开头)填完后直接点击发行. 4. 点击发行后如图 5. 发行成功后,找到 unpackage --- dist --- build --- h5 文件夹, 在外部资源中打开,将 h5 文件夹打包成 zip

  • uni-app弹出层uni-popup使用及修改默认样式的方法实例

    uni-popup官方文档 我这里的背景是弹出一个选择规格的菜单.使用vue3+ts,使用组合式api 首先看看在vue3+ts+setup下的使用: <template> <!-- 定义一个按钮,用于打开弹出层 --> <view style="width: 200px"> <button @click="openSpecs">弹出</button> </view> <!-- 弹出层视图

  • MySql模糊查询json关键字检索方案示例

    MySql模糊查询json关键字检索方案示例

    目录 前言 方案一: 方案二: 方案三: 方案四(最终采用方案): 总结 前言 ​最近在项目中遇到这样一个需求:需要在数据表中检索包含指定内容的结果集,该字段的数据类型为text,存储的内容是json格式,具体表结构如下: CREATE TABLE `product` ( `id` INT(11) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 'ID', `name` VARCHAR(100) NOT NULL DEFAULT '' COMMENT '产品名称

  • uni app仿微信顶部导航条功能

    最近一直在学习uni-app开发,由于uniapp是基于vue.js技术开发的,只要你熟悉vue,基本上很快就能上手了. 在开发中发现uni-app原生导航栏也能实现一些顶部自定义按钮+搜索框,只需在page.json里面做一些配置即可.设置app-plus,配置编译到App平台的特定样式.dcloud平台对app-plus做了详细说明:app-plus配置,需注意 目前暂支持H5.App端,不支持小程序. 在page.json里配置app-plus即可 { "path": "

  • Python实现APP自动化发微信群消息的示例代码

    Python实现APP自动化发微信群消息的示例代码

    目录 1. 前言 2. 爬虫及服务 3. 自动化发送群聊 ​4. 最后 1. 前言 但是对于很多人来说,首先编写一款 App 需要一定的移动端开发经验,其次还需要另外编写无障碍服务应用,如此显得有一定难度的本篇文章将介绍另外一种方案,即:利用前面文章介绍的 AutoJS 来实现自动给微信群发送新闻早报 2. 爬虫及服务 为了演示方便,这里以百度热搜为新闻早报数据源, 使用 Requests + BeautifulSoup 按热度,爬取热度最高的 15 条数据 import requests fr

  • java后台接收app上传的图片的示例代码

    整理文档,搜刮出一个java后台接受app上传的图片的示例代码,稍微整理精简一下做下分享 package com.sujinabo.file; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.InputStream; import java.util.List; import java.util.UUID; import javax.servlet.S

  • app 请求服务器json数据实例代码

    请求服务器json数据格式代码,详细如下: var url=obj.serUrl; //此处为请求服务器的路径url,放上自己的请求路径: var data = {//date里面携带参数,根据服务器要求填写好参数,看清楚是字符串类型,还是整型. action:'getUser', username:loginInfowode, password:passwordwode }; //以下就是进入ajax请求服务器数据: mui.ajax({ type:"post",//请求格式,分为p

  • Android使用lottie加载json动画的示例代码

    Lottie Lottie是 Airbnb 开源的一个动画项目,它支持 iOS, mac OS Android RN,由于某些复杂动画的实现,往往会写很多的 code 来实现它,而且调试动画的效果会比较花费时间.用它来解决某些动画会带来很大的便利. 设计师在After Effects设计好相关的动画,然后安装上BodyMovin这个插件,这个插件,可以帮导出动画效果的 JSON 文件,然后我们可以通过 Lottie 来加载相关的 JSON 文件来实现动画效果. 优势 开发可以方便的实现动画,节约

  • C++使用jsoncpp解析json的方法示例

    前言: 曾经一段时间XML成为互联网业界内的数据传输格式标准,但有人对XML提出了质疑,认为XML数据格式比较繁杂,冗长等,于是提出了一种新的表示格式-JSON. 对于JSON格式,在此就不作详细的说明了,下面主要讨论下C++解析json文件的工具-Jsoncpp的使用. JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,和xml类似,本文主要对VS2008中使用Jsoncpp解析json的方法做一下记录. Jsoncpp是个跨平台的开源库,下载地址:

  • python实现xml转json文件的示例代码

    使用了Python的 xml.etree.ElementTree 库 xml.etree.ElementTree 库简介 xml.etree.ElementTree模块实现了一个简单而高效的API用于解析和创建XML数据.xml.etree.ElementTree模块对于恶意构造的数据是不安全的.如果您需要解析不受信任或未经验证的数据,请参阅XML漏洞. 参考文献:https://docs.python.org/3.6/library/xml.etree.elementtree.html fro

  • 实例详解SpringBoot默认的JSON解析方案

    实例详解SpringBoot默认的JSON解析方案

    目录 一.什么是JSON 二.如何在SpringBoot中使用JSON 三.举例 四.拓展 总结 一.什么是JSON JSON(JavaScript Object Notation)是一种基于JavaScript语法子集的开放标准数据交换格式.JSON是基于文本的,轻量级的,通常被认为易于读/写. 好了,废话不多说,下面开始介绍如何在SpringBoot中使用JSON. 二.如何在SpringBoot中使用JSON 在学习json之前,我们必须先了解一下HttpMessageConverter,

  • Android彻底清除APP数据的两种方案总结

    目录 用途 方案一:利用命令行pm clear 包名,系统级别清除App数据 优点 缺点 代码 方案二:手动删除内部储存和外部储存 优点 缺点 代码 总结 用途 用于APP内部的重置功能实现. 方案一:利用命令行pm clear 包名,系统级别清除App数据 优点 和任务管理器里面清除所有数据的操作一致,会删除所有的APP数据.重新进入APP还需重新申请权限. 缺点 系统会直接杀掉APP进程,无法进行拉起APP的操作. 代码 public static Process clearAppUserD

随机推荐