小说(书籍)翻页插件，跨平台——支持仿真、覆盖等多种翻页

tuonioooo

已于 2025-03-22 09:35:04 修改

阅读量928

点赞数 8

分类专栏： VUE 文章标签：前端 uni-app 小程序安卓微信小程序 vue

于 2025-03-22 09:24:17 首次发布

本文链接：https://blog.csdn.net/tuoni123/article/details/146433493

版权

VUE 专栏收录该内容

12 篇文章

订阅专栏

简介

miliqk 是从 咪哩快看 这一综合性应用中分离出来的小说(书籍)翻页插件，其设计初衷在于灵活满足广大开发者及用户对于仅包含前端功能的独立插件的需求。

当前版本是：v3.0.0

适用领域

miliqk 是 uni-app 生态专用的插件，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app)。

配置

安装配置

1. 引入miliqk-app、miliqk-login、uv-ui
在项目根目录中的main.js中，引入并使用uv-ui的JS库，注意这两行要放在import Vue之后。

注意:

如下示例，兼容Vue2、Vue3写法。

// main.jsimport App from './App'
import uvUI from '@/uni_modules/uv-ui-tools'
import Request from '@/uni_modules/miliqk-app/libs/util/request/index';
import miliqk from '@/uni_modules/miliqk-app';
import miliqkLogin from '@/uni_modules/miliqk-login';
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'


Vue.use(uvUI)
Vue.use(miliqk)
Vue.use(miliqkLogin)

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()

// 引入请求封装
Request(app)

// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'

export function createApp() {
    const app = createSSRApp(App)
    app.use(uvUI);    //引入工具库
    app.use(miliqk);  //安装miliqk插件
    app.use(Request); // 引入请求工具类封装
    app.use(miliqkLogin)
    return {
        app
    }
}
// #endif

2. 在引入全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import "@/uni_modules/miliqk-app/css/theme.scss";

3. 引入miliqk-app、uv-ui基础样式

注意:

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/*每个页面公共css */
	@import 'uni_modules/miliqk-app/css/index.scss';
	@import 'uni_modules/uv-ui-tools/index.scss';
</style>

4. 配置pages.json

此配置需要在项目根目录的pages.json中进行，基于HBuilderX可以不进行任何配置即可直接在页面中使用组件

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    },
    // 插件内容-start
    {
      "path": "uni_modules/miliqk-app/pages/home/home",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "uni_modules/miliqk-app/pages/user/user",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "uni_modules/miliqk-app/pages/user/vip",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "uni_modules/miliqk-app/pages/user/coin/coin",
      "style": {
        "navigationStyle": "custom"
      }
    }
    // 插件内容-end
  ],
  //子包
  "subPackages": [
    {
      "root": "uni_modules/miliqk-app/pages/book/bookInfo",
      "pages": [
        {
          "path": "bookInfo",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/chapter",
      "pages": [
        {
          "path": "chapterInfo",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/search",
      "pages": [
        {
          "path": "search",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/bookshelf",
      "pages": [
        {
          "path": "bookshelf",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/category",
      "pages": [
        {
          "path": "category",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "category-detail",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/list",
      "pages": [
        {
          "path": "channel-list",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "status-list",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "swiper-list",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/bangdan",
      "pages": [
        {
          "path": "bangdan-list",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    {
      "root": "uni_modules/miliqk-app/pages/book/history",
      "pages": [
        {
          "path": "history",
          "style": {
            "navigationStyle": "custom"
          }
        }
      ]
    },
    // #ifndef MP-WEIXIN
    {
      "root": "uni_modules/miliqk-app/pages/webview",
      "pages": [
        {
          "path": "webview",
          "style": {
            "navigationBarTitleText": "WebView-浏览器",
            "enablePullDownRefresh": false,
            /* App平台特有配置 */
            "app-plus": {
              "renderer": "native",//App端纯原生渲染模式
              // 去掉uni自带的页面最外层scroll
              "disableScroll": true,
              // 不需要滚动条
              "scrollIndicator": "none" //滚动条显示策略，设置为 "none" 时不显示滚动条
            }
          }
        }
      ]
    },
    // #endif
    //登录公共组件-start
    {
      "root": "uni_modules/miliqk-login/pages",
      "pages": [
        {
          "path": "login/login-withoutpwd",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "login/login-smscode",
          "style": {
            "navigationStyle": "custom"
          }
        },
        {
          "path": "agreements/agreement",
          "style": {
            "navigationBarTitleText": "服务协议"
          }
        },
        {
          "path": "agreements/privacy",
          "style": {
            "navigationBarTitleText": "隐私协议"
          }
        }
      ]
    }
    //登录公共组件-end
  ],
  //...其他配置项
}

注意:

miliqk-login 是一个独立的全平台登录模版包含：第三方、手机短信、微信登录等，后端可以自由接入各种登录服务接口，比如：uniCloud、自建服务、第三方登录等，本插件采用mock方式实现登录流程

快速上手

如何使用

通过安装配置之后, 新建 pages/index/index.vue 填写如下代码, 可以快速查看效果。

<template>
  <view class="content">

    <miliqk-status-bar></miliqk-status-bar>

    <!-- 介绍信息 -->
    <product-intro :app-intro="appIntro"></product-intro>

    <!-- 演示入口 -->
    <view class="product-page__item">
      <text class="product-page__item__title">功能演示</text>
      <uv-cell-group>
        <uv-cell title="演示首页" :isLink="true" @click="go('/uni_modules/miliqk-app/pages/home/home')"></uv-cell>
      </uv-cell-group>
    </view>


  </view>
</template>

<script>
export default {
  data() {
    return {
      title: 'miliqk',
      appIntro: ' miliqk 是从 咪哩快看 这一综合性应用中分离出来的小说(书籍)翻页插件，其设计初衷在于灵活满足广大开发者及用户对于仅包含前端功能的独立插件的需求。'
    }
  },
  methods: {
    go(url) {
      if (url === '/uni_modules/miliqk-app/pages/home/home') {
        uni.switchTab({
          url
        })
      } else {
        uni.navigateTo({
          url
        })
      }
    }
  }
}
</script>

<style lang="scss">
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

.content {
  padding: 12px;

  .product-page {
    &__item {
      padding: 10px;

      &__title {
        color: #fbe2c3;
        //background-color: $uv-bg-color;
        background-color: #303744;
        padding: 15px;
        font-size: 15px;
      }
    }
  }
}

</style>

运行

下载 HBuilderX 4.29+ 运行安装调试插件
选择上面的插件项目，点击菜单上的 "运行" 选择如下的方式进行调试
- 运行到浏览器(B)
- 运行到内置浏览器(P)
- 运行到手机或模拟器(N)
- 运行到小程序模拟器(M)
- 运行到终端
参考官方文档
1. uni-app官网
2. HBuilderX 文档
控制台输出如下内容，代表安装成功

[当前环境是V3编译模式]
[miliqk-app]插件安装成功

扩展功能

uv-ui 内置了强大的工具函数、请求封装、全局配置等，可以根据自身需求进行扩展配置，详情请查看扩展配置。
miliqk-app 同样内置了工具函数、全局配置等。

界面预览&主要功能

适合人群

/common/shrq.470bb5f0.png