使用指南

插件目录概览

miliqk-app 主体插件

miliqk-app
├─components
│  ├─miliqk-ad
│  ├─miliqk-ad-content
│  ├─miliqk-article-list
│  ├─miliqk-auto-page
│  ├─miliqk-auto-page-speed
│  ├─miliqk-auto-timer
│  ├─miliqk-back-shelf
│  ├─miliqk-battery
│  ├─miliqk-block
│  ├─miliqk-bright-size
│  ├─miliqk-catalogue
│  ├─miliqk-change-phone
│  ├─miliqk-chapter-header
│  ├─miliqk-chapter-switch
│  ├─miliqk-choose-wrap
│  ├─miliqk-content
│  ├─miliqk-cover
│  ├─miliqk-danmu
│  ├─miliqk-danmu-control
│  ├─miliqk-error-page
│  ├─miliqk-exchange-list
│  ├─miliqk-fix-bottom
│  ├─miliqk-font-size
│  ├─miliqk-grid-view
│  ├─miliqk-line-height
│  ├─miliqk-listen-view
│  │  └─js_sdk
│  │      ├─baidu
│  │      └─baike
│  ├─miliqk-loading-page
│  ├─miliqk-navigator
│  ├─miliqk-night
│  ├─miliqk-op-pannel
│  ├─miliqk-page-slider
│  ├─miliqk-pannel-transition
│  ├─miliqk-payment
│  ├─miliqk-price
│  ├─miliqk-read-like
│  ├─miliqk-read-time
│  ├─miliqk-reader
│  │  └─wxs
│  ├─miliqk-reader-measure
│  ├─miliqk-reader-scroll-content
│  ├─miliqk-reader-text-image-card
│  ├─miliqk-reader-turn-content
│  ├─miliqk-recent
│  ├─miliqk-result
│  ├─miliqk-scroll-x-list
│  ├─miliqk-section
│  ├─miliqk-status-bar
│  ├─miliqk-switch-text
│  ├─miliqk-system-time
│  ├─miliqk-theme
│  ├─miliqk-title
│  ├─miliqk-trans-title
│  ├─miliqk-turn-page
│  │  └─js_sdk
│  │      └─renderjs
│  ├─miliqk-vip-intro
│  └─miliqk-vip-package
├─css
│  ├─demand
│  └─global
│      └─icons
├─libs
│  ├─api
│  ├─config
│  ├─constants
│  │  └─enum
│  ├─function
│  │  ├─date
│  │  │  └─src
│  │  ├─helpers
│  │  │  └─src
│  │  ├─object
│  │  │  └─src
│  │  ├─renderjs
│  │  ├─resistance
│  │  │  └─wxs
│  │  └─validate
│  │      └─src
│  ├─mixins
│  │  ├─ad
│  │  └─reader
│  └─util
│      ├─interceptors
│      └─request
├─node_modules
│  ├─crypto-js
│  │  └─docs
│  └─js-md5
│      ├─build
│      └─src
├─pages
│  ├─book
│  │  ├─bangdan
│  │  ├─bookInfo
│  │  ├─bookshelf
│  │  ├─category
│  │  ├─chapter
│  │  │  └─js
│  │  ├─history
│  │  ├─list
│  │  └─search
│  │      └─js
│  ├─home
│  ├─user
│  │  ├─account
│  │  ├─basic
│  │  │  ├─avatar
│  │  │  └─nickname
│  │  ├─coin
│  │  └─setting
│  └─webview
├─static
│  ├─categorys
│  │  └─book
│  └─tabbar
│      └─fcad00
└─store

miliqk-login 登录插件

注意

默认使用了OAuth（登录鉴权），但没有勾选具体的模块，只是为了让组件正常运行，如果有需要一键登录模块，直接勾选打包即可，后台服务可以对接任何第三方接口，比如：java、Node、Python 或者直接用uniCloud云服务


miliqk-login
─common
├─components
│  ├─b-agreements
│  ├─b-fab-login
│  └─unc-login
├─pages
│  ├─agreements
│  └─login
├─static
│  ├─app-plus
│  │  ├─icons
│  │  ├─login-btn
│  │  └─univerify
│  └─avatar
├─stores
└─uniCloud
    └─cloudfunctions
        └─uni-id-co
            ├─common
            ├─lang
            ├─lib
            │  ├─third-party
            │  │  ├─alipay
            │  │  │  └─account
            │  │  ├─apple
            │  │  │  └─account
            │  │  ├─qq
            │  │  │  └─account
            │  │  ├─share
            │  │  └─weixin
            │  │      └─account
            │  └─utils
            ├─middleware
            ├─module
            │  └─login
            └─node_modules
                ├─.bin
                ├─buffer-equal-constant-time
                ├─ecdsa-sig-formatter
                │  └─src
                ├─jsonwebtoken
                │  └─lib
                ├─jwa
                ├─jws
                │  └─lib
                ├─lodash.includes
                ├─lodash.isboolean
                ├─lodash.isinteger
                ├─lodash.isnumber
                ├─lodash.isplainobject
                ├─lodash.isstring
                ├─lodash.merge
                ├─lodash.once
                ├─ms
                ├─safe-buffer
                ├─semver
                │  └─bin
                ├─uni-config-center
                │  ├─uni-ad
                │  └─uni-id
                └─uni-id-common
                    └─node_modules
                        └─uni-config-center
                            ├─uni-ad
                            └─uni-id

插件安装主入口文件

uni_modules/miliqk-app/index.jsuni_modules/miliqk-login/index.js

插件依赖包

{
  "name": "miliqk-app",
  "version": "2.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "crypto-js": "^4.2.0",
    "js-md5": "^0.8.3"
  }
}

自定义组件说明

根据你提供的目录和表格，下面是从目录中找出但没有出现在表格中的组件：

新的组件列表：

组件名称描述信息
miliqk-ad广告组件，用于展示广告内容
miliqk-ad-content广告内容组件，显示广告的详细信息
miliqk-article-list文章列表组件，显示文章列表内容
miliqk-auto-page自动翻页组件，处理内容分页逻辑
miliqk-auto-page-speed自动翻页速度控制组件
miliqk-auto-timer自动计时组件
miliqk-back-shelf后台书架组件，展示用户的书架数据
miliqk-battery电量显示组件，展示设备电量，仅支持app、小程序
miliqk-block内容块组件，用于显示书籍的内容区域
miliqk-bright-size亮度调节组件
miliqk-catalogue目录组件，显示书籍或章节目录
miliqk-change-phone更换手机号组件
miliqk-chapter-header章节头部组件，显示章节标题或简介
miliqk-chapter-switch章节切换组件
miliqk-choose-wrap选择包装组件，用于选择功能或设置
miliqk-content主要内容展示组件
miliqk-cover封面组件，用于展示封面图片
miliqk-danmu弹幕组件，用于展示实时弹幕内容
miliqk-danmu-control弹幕控制组件，控制弹幕显示
miliqk-error-page错误页面组件，展示错误信息页面
miliqk-exchange-list列表交换组件，处理数据交换
miliqk-fix-bottom固定底部组件，固定内容在页面底部
miliqk-font-size字体大小调节组件
miliqk-grid-view网格视图组件，展示内容的网格化布局
miliqk-line-height行间距调节组件
miliqk-listen-view听书组件
miliqk-loading-page加载页面组件，用于显示加载过程
miliqk-navigator导航跳转组件
miliqk-night夜间模式切换组件
miliqk-op-pannel书籍操作面板组件
miliqk-page-slider翻页模式控制组件
miliqk-pannel-transition面板过渡效果组件
miliqk-payment支付展示组件
miliqk-price价格展示组件
miliqk-read-like阅读喜欢组件，用于显示用户喜好内容
miliqk-read-time阅读时间组件
miliqk-reader阅读器组件，用于内容展示
miliqk-reader-measure阅读器测量组件
miliqk-reader-scroll-content滚动内容组件
miliqk-reader-text-image-card阅读文本图片卡片组件
miliqk-reader-turn-content阅读器翻转内容组件
miliqk-recent最近使用组件
miliqk-result结果展示组件
miliqk-scroll-x-list横向滚动列表组件
miliqk-section页面章节组件，展示内容部分
miliqk-status-bar状态栏组件，显示状态信息
miliqk-switch-text文本切换组件
miliqk-system-time系统时间显示组件
miliqk-theme主题切换组件
miliqk-title标题组件，显示页面标题
miliqk-trans-title标题转化组件，用于显示动态标题
miliqk-turn-page仿真翻页组件，处理翻页效果
miliqk-vip-introVIP 介绍组件
miliqk-vip-packageVIP 套餐组件

以上就是插件中用到的自定义组件，请结合uv-ui 、uni-ui开源组件和源代码说明，并结合插件代码示例来使用。

常量配置

插件示例所用到的常量配置：uni_modules/miliqk-app/libs/constants/index.js

mock数据

mock 接口模块，提供了插件示例所用到的mock数据： uni_modules/miliqk-app/libs/api/mock.js

function工具库

名称描述信息
function/date日期处理函数模块，包含日期和时间处理的函数
function/helpers辅助函数模块，提供常用的工具函数，比如：防抖、节流、base64、颜色转换等常用函数
function/object对象操作函数模块，包含对象、数组之间的合并和过滤、克隆等函数
function/validate验证函数模块，用于数据和输入的验证函数

mixins 混入组件说明

名称描述
touchMixin.js场景：触摸移动相关的公共组件
兼容：H5、小程序、app-vue
用途：按需引入
checkboxMixin.js场景：checkbox 操作公共方法，包含方法：反选、单个、多选
兼容：全平台
用途：按需引入
changeMixin.js场景：用于点击列表元素，动态切换 activeColor 触摸颜色
兼容：全平台
用途：按需引入
commonMixin.js场景：定义每个组件可能需要用到的外部样式和类名，将插件绑定到 this 对象上
兼容：全平台
用途：按需引入
systemInfo.js场景：获取设备状态信息，如屏幕宽度、高度、设备像素比、类型、品牌、型号等
兼容：全平台
用途：按需引入
timerMixin.js场景：时间签名（如“几秒前”或“刚刚”显示）、时间格式化混入组件
兼容：全平台
用途：按需引入
listRefreshMixin.js场景：nvue下 list 组件的混入方法组件，适用于首页
兼容：仅支持 Nvue
用途：按需引入
tabSwiperResourceMixin.js场景：顶部 Tab 资源枚举，适用于 scroll-view
兼容：全平台
用途：按需引入
historyMixin.js场景：记录小说阅读翻页历史数据，用途：按需引入
avatarMixin.js场景：用户头像相关的公共方法，如获取、更新头像
兼容：全平台
用途：按需引入
coinMixin.js场景：虚拟币相关的操作，如充值、消费、查询
兼容：全平台
用途：按需引入
commonPageDataMixin.js场景：处理页面通用数据和方法，减少代码重复
兼容：全平台
用途：按需引入
commonStorageMixin.js场景：封装本地存储操作，支持 uni.setStorageSync 等方法
兼容：全平台
用途：按需引入
downloadMixin.js场景：处理下载任务，如小说、图片、音频等
兼容：全平台
用途：按需引入
launchApp.js场景：处理跳转或拉起 APP 的逻辑
兼容：H5、小程序、App
用途：按需引入
mediaMixin.js场景：处理多媒体播放，如音频、视频控制等
兼容：全平台
用途：按需引入
preventScrollMixin.js场景：阻止页面滚动，用于特定 UI 交互场景
兼容：全平台
用途：按需引入
screenshotMixin.js场景：监听并处理截图行为，如截图提示、禁止截图
兼容：全平台
用途：按需引入
webviewDragMixin.js场景：处理 WebView 拖动交互逻辑
兼容：全平台
用途：按需引入

css样式

  • 主题样式引入：
// 在`uni.scss`中引入miliqk-app插件扩展主题
@import "@/uni_modules/miliqk-app/css/theme.scss";
  • 全局样式引入：
// 在`App.vue`中引入日常样式
/*每个页面公共css */
@import 'uni_modules/miliqk-app/css/index.scss';
  • icons图标:

miliqk 包括两个图标库：iconfont 和自定义图标库。它们已经集成在 uni_modules/miliqk-app/css/index.scss 文件中。如果按照前述配置示例操作，已在 App.vue 中完成引入。

icons图标:

  • uni_modules/miliqk-app/css/global/icons/iconfont.scss
  • uni_modules/miliqk-app/css/global/icons/micons.scss

广告组件说明

分为两种类型，一个是广告贴片、一个是底部的banner广告，二次开发中请用 adpid="1111111111" 来进行调试

注意

如果使用了广告组件（默认全部禁用），打包时，需要在 manifest.json 中安卓/iOS模块 配置 uni-ad 模块，否则会提示错误信息

  • 广告贴片, 定义在 miliqk-ad-content 组件中, 使用方式如下：

// 广告初始化代码

this.initAdData();

// 详见 `uni_modules/miliqk-app/pages/book/chapter/js/chapterInfo.js`, 代码块如下：

async onReady() {
    console.log("---onReady()---");
    globalNoAdResult = this.$refs.noAdResult;
    globalAdBottom = this.$refs.miliqkAdRef;
    uni.$miliqk.fullscreen(true);
    //获取数据
    await this.getBookInfo();
    //调用mixin 获取章节目录接口
    await this.getChapters();
    // 初始化广告数据
    await this.initAdData();
    this.init = uni.$miliqk.debounceReturnFun(this.init, 10);
    await this.init();
    //手动触发一次
    this.setStorage(this.chapterNumber, 0);
}

说明：如果不使用广告贴片，可以注释掉 await this.initAdData(); 这一行即可

  • 底部banner广告, 定义在miliqk-ad 组件中, 使用方式如下：

插件示例引入是在 uni_modules/miliqk-app/pages/book/chapter/chapterInfo.vue 页面中，具体代码块如下：

<!-- 广告banner位置 adpid=1111111111、:adpid="adData.bottomBannerAdpid"-->
<miliqk-ad
    ref="miliqkAdRef"
    adpid="1111111111" :hasAd="hasAd"
    :hide="showTools || showDeepTools || showAutoTools || listenPage" :showErrorPlaceholder="true"
    @showNoAdRewardAd="showNoAdRewardAd" @change="onBottomAdLoad"
    :fixedBottom="true"
    @close="onBottomAdLoad(0)">
</miliqk-ad>

说明：如果不使用底部广告，注释掉这段代码即可

  • 激励视频广告工具类 uni_modules/miliqk-app/pages/book/chapter/js/chapterInfoAdMixin.js

使用时，需要在 uni_modules/miliqk-app/pages/book/chapter/js/chapterInfoAdMixin.js 放开加载广告的初始化代码注释, 如：

onLoad(params) {
   // this.initAdData(params);
},

默认并没有放开，如果需要使用，请自行放开即可

Last Updated:
Contributors: tuonioooo
关注公众号程序猿的游戏开源工具密圈 获取更多内容