更新记录
1.2.2(2021-10-17) 下载此版本
1、查看JPage页面配置时过滤 /.git、/node_modules、/static、/unpackage 等目录; 2、修复查看整个页面的Pages配置时打开速度过慢,导致打开失败的Bug。
1.2.1(2021-09-29) 下载此版本
1、修复一些小Bug
1.2.0(2021-06-28) 下载此版本
1、修复子pages.json只能创建在pages目录文件下的问题;
2、修复子pages.json文件修改后无法合并到主pages.json的问题;
3、增加scss文件格式化功能,选中scss文件【右键】->【格式化代码】即可格式化。
查看更多平台兼容性
HBuilderX最低兼容版本 |
---|
不确定 |
HBuilderX插件通用注意事项
HBuilderX-2.7.12以下版本安装插件市场内的插件后,卸载时需手动卸载,详细教程参考:如何手动卸载插件
JPage-tools使用说明
在项目开发过程中,针对App而言,可能会出现有很多的页面的情况,当页面超过一定程度的时候,在pages.json中将会有很多很多的代码,不方便查找与定位,该插件即提供了将pages模块化的功能,且可以可视化的查看页面情况 等
1、pages模块化手动初始化说明
需要使用使用页面可视化功能需要先进行初始化,目前初始化工具正在开发中,所以在行开发中的项目请参考以下步骤进行初始化:
- 1.1 在【工具】->【设置】->【插件配置】将【修改子pages.json后是否自动合并到主pages.json】选择取消勾选
- 1.2 在【pages】目录下创建相关的pages.json配置文件,可以自定义文件名称,但一定要用
pages.json
结尾,如:app-pages.json
- 第一次初始化时,可以打开原有的
pages.json
将pages里面的页面配置信息复制到相关的子pages.json中即可,具体配置以及说明如下:{ "desc": "系统相关页面", //pages.json说明 "pages": [ { "desc": "XXX功能说明", //功能页面的说明 "path": "/pages/app1/demo1/index", //功能的路径,路径前面加不加 / 都可以 "pull-down": "#e03636", //下拉刷新简写代码 "style": { //style配置内容与原pages.json配置一致 "navigationBarTitleText": "功能标题", "titleNView": { "buttons": [{ "text": "", "width": "1px" }, { "text": "icon-64f", //如果配置了右上角的按钮且使用到了字体图标 之前的 \ue64f 需要换成 icon-64f "fontSrc": "/static/font/xxx.ttf", "fontSize": "40upx" }] } } } ] }
2、pages模块可视化配置页面
在初始化完成后,右键【当前项目】或者 右键【子pages.json】文件,选择【JPage页面配置】就可以打开页面配置功能
2.1 功能介绍
- 1、在可视化页面中,可以直接点击修改
标题
以及path
路径 - 2、在修改完成后,需要点击
【确认修改】
按钮才会生效 - 3、双击某个功能页面,即可跳转至该功能的
.vue
页面 - 4、
【查看源码】
按钮点击后将打开当前选择的 pages.json 配置文件 - 5、可以直接删除某模块下的页面
- 6、
【编辑页面】
中可以直接快速开启下拉刷新,可以直接配置page
的源码内容,配置与pages.json
的参数一致 - 7、
【新增页面】
功能,在某个模块下点击新增页面,即可新增页面至该模块下,具体的新增页面功能请参考下方有详细说明
3、页面新增优化
页面新增功能是结合pages模块化管理后的附加功能,整体新增方法与原uniapp方式一致,多了 自定义模板
、pages模块选择
、快速开启下拉刷新
的功能
3.1 功能介绍
- 1、新增页面的入口分为两种,一:【右键】某个目录,表示在该目录下方新增页面 二:pages页面可视化配置中的新增页面,表示在选中的
pages.json
模块下新增页面 - 2、如果想自定义自己的常用的页面模板,可以在
插件安装目录下的\template\config.json
中增加自己的页面模板配置,页面内容可参考对应的pageFile.tmp
文件 - 3、新增页面对话框中的参数介绍,如下图:
4、复制页面路径
在之前的开发过程中,我们想打开一个页面时,没法快速的复制到一个页面的路径,加了该功能后可方便操作
使用方式:【右键】某个目录或者.vue 文件即可弹出【复制页面路径】按钮,说明:
- 选择的是目录,将复制的是目录路径 如:
/pages/demo
- 选择的是vue文件,将复制的是可以直接打开的 path 路径,如:
/page/demo/index