- 新增 插件功能，开发者可以根据需求进行扩展 （例如扩展：获取所有图片地址、）
- ui样式优化 增加设置箱 设置深浅色
@注意 如果使用第三方请求拦截库 可能 Network 无请求信息
- 解决：
````JavaScript
// 本框架默认已将 wx.request 替换为 uni.request 已经适配大多数 第三方请求库
/* 0.0.1-rc.2 及一下版本 */
// 因为大部分的开平台库都是基于微信小程序标准开发的
// 这里已 flyio 为例
// 在 flyio 文件中全局搜索 wx.request 替换为 uni.request 即可拦截请求信息
@注意 配置信息添加
```JavaScript
// main.js 文件示例
/* 注意当前是 0.0.2rc 及以上版本的设置
不再是直接引用就可以还需要 new 成一个实例
import App from './App'
import {HFdebugging} from '@/uni_modules/HF-HF_debugging/common/next.js'
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
app.$mount()
new HFdebugging()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
new HFdebugging({app});
return {
// #endif
``` jons5
// pages.json 添加如下页面信息
"pages":[
// ...
"path": "uni_modules/HF-HF_debugging/pages/next/next",
"style": {
"navigationStyle": "custom",
"backgroundColor": "transparent",
"app-plus": {
"animationType": "slide-in-bottom",
"background": "transparent",
"popGesture": "none"
API 文档
- BntBox HF调试器红色按钮组件 /uni_modules/HF-HF_debugging/components/BntBox/index.vue
- HFBox 调试面板组件 /uni_modules/HF-HF_debugging/components/HFBox.vue
- InterceptorRequest 请求组件 /uni_modules/HF-HF_debugging/components/InterceptorRequest.vue
- StorageInit 缓存组件 /uni_modules/HF-HF_debugging/components/StorageInit.vue
- Console 日志组件 /uni_modules/HF-HF_debugging/components/Console.vue
- setting 设置组件 /uni_modules/HF-HF_debugging/components/setting.vue
- AppData 页面AppData数据组件 /uni_modules/HF-HF_debugging/components/AppData.vue
- CurrentPages 页面栈组件 /uni_modules/HF-HF_debugging/components/CurrentPages.vue
- objTree 对象树状结构组件 /uni_modules/HF-HF_debugging/components/objTree.vue
HFdebugging 实例中的API
- options 配置项
- view App 中HF调试按钮按钮实例
- information 插件实例列表
- settingData 设置项数据
- hide():void 隐藏按钮
- show():void 显示按钮
- loadPlugIn(PlugIn):void 挂在某插件实例
- getPlugIn(plugInName):PlugIn 获取某插件实例
- removePlugIn(plugInName):void 删除某插件实例
- wx_request wx.request 原始值
Console 实例中的API
- addRecord(type:string,...args):void 添加指定的日志信息
```JavaScript
let HF = new HFdebugging();
let Console = HF.getPlugIn('Console');
Console.addRecord('log','日志信息');
Console.addRecord('warn','warn信息');
Console.addRecord('info','info信息');
Console.addRecord('error','error信息');
- 调用new 后的实例方法 将插件实例进行挂载
```javaScript
* 带 * ✳ 星号 为必存项
* */
let HF = new HFdebugging();
HF.loadPlugIn(MyPlugIn);
// MyPlugIn 必须是一个类
class MyPlugIn{ // 插件实例
DATA = [] // ✳
NAME = 'myPlugIn' // 插件名称 ✳
componentsName='myPlugIn' // vue 组件名称 ， 需要全局引入组件 ✳
constructor(){
this.DATA = new MyPlugInClass() // 数据信息 ✳
this._init()
_init() {
// ...
// 拦截处理请求等
// MyPlugInClass 数据 必须是一个类
class MyPlugInClass { // 数据管理器
DATA = [] // ✳
constructor(arg) {
this._myPlugInData = true // ✳ 数据值判断
this.init()
init() {
this.DATA = []
push(args) {
if (this.DATA.length > 512) {
this.DATA.shift()
this.DATA.push(args)
eliminateAll(){
this.DATA = [];
// 可以使用 get 拦截请求 DATA 数据时进行处理
get DATA() { // 注意 get 后的变量名不能重复 否则报错 这是 this.DATA 需要更改为 变量名 例如：DATAC
/* 获取storage */
let storageAllData = []
let that = this
uni.getStorageInfo({
success(res) {
res.keys.forEach(item => {
// storageAllData[item] = JSON.stringify(uni.getStorageSync(item))
storageAllData.push({
key: item,
obj: uni.getStorageSync(item)
that.DATAC = storageAllData
return this.DATAC
// 组件
// objTree 是一个树状结构组件 按需引入
// import objTree from './objTree.vue'
export default {
name: 'AppData',
// components: {
// objTree
// },
props: {
* ✳ 每一个插件组件都会传递来一个 当前插件的实例 既 MyPlugIn
* 每一个插件实例的prototype下都存在 $HFdebugging 属性，
* $HFdebugging 便是 HFdebugging 的实例
* 例如 PlugIn.prototype.$HFdebugging
* 可以调用HFdebugging获取所有的 插件及配置项
* this.livingExample.$HFdebugging.options // 获取new HFdebugging 时传递的参数信息
* this.livingExample.$HFdebugging.view // HF调试器 按钮的实例
* this.livingExample.$HFdebugging.settingData // 设置信息
* this.livingExample.$HFdebugging.information // 所有的插件实例 是一个数组
* 如果不喜欢使用上述方法获取对用信息也可以引入 store 获取 类型均为数组
* import {HFDebuggingInformation,information} from '@/uni_modules/HF-HF_debugging/common/store'
livingExample: {
type: Object,
default: () => {
return {}
data() {
return {
openType:1
computed: {
exData() {
return this.livingExample.DATA.DATA // MyPlugIn 中的数据管理器，下的实际数据
methods:{
scrolltolower(e){}, // 来自父级的触底事件
scrolltoupper(e){}, // 来自父级的触顶事件
@注意 一下为0.0.1的配置说明 如果使用第三方请求拦截库 可能 Network 无请求信息
- 解决：
````JavaScript
// 本框架默认已将 wx.request 替换为 uni.request 已经适配大多数 第三方请求库
// 如需取消默认替换请在 请调用HFdebugging(app,{wxRequest:false})
// 并在沿用0.0.1-rc.2 及一下版本版本方法替换
/* 0.0.1-rc.2 及一下版本 */
// 因为大部分的开平台库都是基于微信小程序标准开发的
// 这里已 flyio 为例
// 在 flyio 文件中全局搜索 wx.request 替换为 uni.request 即可拦截请求信息
@注意 一下为0.0.1的配置说明 配置信息添加
```JavaScript
// main.js 文件示例
import App from './App'
// #ifdef APP
import {HFdebugging} from '@/uni_modules/HF-HF_debugging/common/index.js'
// #endif
// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
HFdebugging(app)
return {
// #endif
``` jons5
// pages.json 添加如下页面信息
"pages":[
// ...
"path": "uni_modules/HF-HF_debugging/pages/subnvue/HFconsole",
"style": {
"navigationStyle": "custom",
"backgroundColor": "transparent",
"app-plus": {
"animationType": "slide-in-bottom",
"background": "transparent",
"popGesture": "none"
/* 注意 0.0.1-rc.1及一下版本需要添加 concat 文件 */
"path": "uni_modules/HF-HF_debugging/pages/subnvue/concat"
// ...
/* 注意 0.0.1-rc.1及一下版本需要添加一下内容 */
"globalStyle": {
// ...
"subNVues": [{
"id": "concat", // 唯一标识
"path": "uni_modules/HF-HF_debugging/pages/subnvue/concat", // 页面路径
"style": {
"position": "absolute",
"right": "80rpx",
"bottom": "120rpx",
"width": "200rpx",
"height": "80rpx",
"background": "transparent"
// ...
如果有兴趣一起开发的可以在gitee上申请加入
- [-] 优化 Vue3 环境错误拦截
- [-] 优化纯nvue环境的渲染
- [-] 优化插件管理系统
- [-] 欢迎在 评论区 提问 或 改进建议
- [-] ...等
