使用指南

插件目录概览

miliqk-app
│  │  ├─components
│  │  │  ├─miliqk-ad
│  │  │  ├─miliqk-ad-content
│  │  │  ├─miliqk-article-list
│  │  │  ├─miliqk-auto-page
│  │  │  ├─miliqk-auto-page-speed
│  │  │  ├─miliqk-auto-timer
│  │  │  ├─miliqk-battery
│  │  │  ├─miliqk-block
│  │  │  ├─miliqk-bright-size
│  │  │  ├─miliqk-catalogue
│  │  │  ├─miliqk-chapter-header
│  │  │  ├─miliqk-chapter-switch
│  │  │  ├─miliqk-content
│  │  │  ├─miliqk-cover
│  │  │  ├─miliqk-fix-bottom
│  │  │  ├─miliqk-font-size
│  │  │  ├─miliqk-line-height
│  │  │  ├─miliqk-listen-view
│  │  │  │  └─js_sdk
│  │  │  │      ├─baidu
│  │  │  │      └─baike
│  │  │  ├─miliqk-navigator
│  │  │  ├─miliqk-night
│  │  │  ├─miliqk-op-pannel
│  │  │  ├─miliqk-page-slider
│  │  │  ├─miliqk-pannel-transition
│  │  │  ├─miliqk-payment
│  │  │  ├─miliqk-price
│  │  │  ├─miliqk-reader
│  │  │  ├─miliqk-reader-measure
│  │  │  ├─miliqk-reader-scroll-content
│  │  │  ├─miliqk-result
│  │  │  ├─miliqk-scroll-x-list
│  │  │  ├─miliqk-status-bar
│  │  │  ├─miliqk-switch-text
│  │  │  ├─miliqk-system-time
│  │  │  ├─miliqk-theme
│  │  │  ├─miliqk-title
│  │  │  ├─miliqk-vip-intro
│  │  │  └─miliqk-vip-package
│  │  ├─css
│  │  │  ├─demand
│  │  │  └─global
│  │  │      └─icons
│  │  ├─libs
│  │  │  ├─api
│  │  │  ├─config
│  │  │  ├─constants
│  │  │  │  └─enum
│  │  │  ├─function
│  │  │  │  ├─date
│  │  │  │  │  └─src
│  │  │  │  ├─helpers
│  │  │  │  │  └─src
│  │  │  │  ├─object
│  │  │  │  │  └─src
│  │  │  │  └─validate
│  │  │  │      └─src
│  │  │  └─mixins
│  │  │      ├─ad
│  │  │      └─reader
│  │  ├─node_modules
│  │  │  ├─crypto-js
│  │  │  │  └─docs
│  │  │  └─js-md5
│  │  │      ├─build
│  │  │      └─src
│  │  ├─pages
│  │  │  ├─book
│  │  │  │  └─chapter
│  │  │  │      └─js
│  │  │  ├─home
│  │  │  └─user
│  │  └─static
│  │      ├─categorys
│  │      │  └─book
│  │      └─tabbar
│  │          └─fcad00

插件安装主入口文件

uni_modules/miliqk-app/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-battery电量显示组件，展示设备电量，仅支持app、小程序
miliqk-block内容块组件，用于显示书籍的内容区域
miliqk-bright-size亮度调节组件
miliqk-catalogue目录组件，显示书籍或章节目录
miliqk-chapter-header章节头部组件，显示章节标题或简介
miliqk-chapter-switch章节切换组件
miliqk-content主要内容展示组件
miliqk-cover封面组件，用于展示封面图片
miliqk-fix-bottom固定底部组件，固定内容在页面底部
miliqk-font-size字体大小调节组件
miliqk-line-height行间距调节组件
miliqk-listen-view听书组件
miliqk-navigator导航跳转组件
miliqk-night夜间模式切换组件
miliqk-op-pannel书籍操作面板组件
miliqk-page-slider翻页模式控制组件
miliqk-pannel-transition面板过渡效果组件
miliqk-payment支付展示组件
miliqk-price价格展示组件
miliqk-reader阅读器组件，用于内容展示
miliqk-reader-measure阅读器测量组件
miliqk-reader-scroll-content滚动内容组件
miliqk-result结果展示组件
miliqk-scroll-x-list横向滚动列表组件
miliqk-status-bar状态栏组件，显示状态信息
miliqk-switch-text文本切换组件
miliqk-system-time系统时间显示组件
miliqk-theme主题切换组件
miliqk-title标题组件，显示页面标题
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场景：记录小说阅读翻页历史数据，用途：按需引入

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" 来进行调试

  • 广告贴片, 定义在 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>

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

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