DOCSEARCHbyAlgolia
Submit Docs

miliqk Cross-Platform Novel Reader Plugin

website·Indexed 30 days ago

https://miliqkdoc.motopa.cn/

A cross-platform novel and book flipping plugin based on the uni-app ecosystem, compatible with Vue 2 and Vue 3 across App, H5, and WeChat Mini Programs. It features reading settings (brightness, font size, theme colors), audio-book plugins, automatic page flipping, and chapter navigation. The plugin is available in Standard and Professional versions, providing built-in utility functions, SCSS styles, and mock API interfaces for rapid development.

Tokens
16.7K
Snippets
71
Records
115
Agent score
50%

What's inside miliqk

  1. Overview of the miliqk professional plugin

    v3
    miliqk is a cross-platform novel and book reader plugin designed for the uni-app ecosystem. It provides frontend-only functionality for implementing book page-turning and reading experiences. It is developed using Vue.js and supports deployment to iOS, Android, H5, and various mini-program platforms (WeChat, Alipay, Baidu, Toutiao, QQ, DingTalk), although compatibility for platforms other than WeChat mini-programs may currently have some issues and is subject to ongoing optimization. Current version: v3.0.0.

  2. Overview of the miliqk pagination plugin

    miliqk is a cross-platform pagination plugin specifically designed for novel and book applications. It is compatible with the uni-app ecosystem, supporting Vue 2, Vue 3, mobile apps, H5, and WeChat Mini Programs.

  3. Overview of the miliqk novel reader plugin

    v2
    miliqk is a cross-platform rapid development plugin designed for novel and book reading applications. It was extracted from the 'Mili Kuai Kan' (咪哩快看) comprehensive application to provide developers with a standalone frontend plugin for page-flipping and reading functionality. The current stable version is v2.0.2.

  4. Overview of available reader features

    v2

    The reader component provides a comprehensive set of reading and accessibility features, including:

    • Navigation: Chapter switching and a directory popup.
    • Visual Customization: Day/Night mode switching, brightness adjustment, font size control, theme background colors, and text spacing.
    • Page Transitions: Multiple paging modes including 'Cover' (覆盖), 'Smooth' (平滑), and 'Vertical Scroll' (上下滚动).
    • Automation: Auto-paging with dynamic speed adjustment.
    • Audio Integration (Listening Plugin): Voice timbre switching, playback speed control, general playback controls, and dynamic positioning of the currently playing paragraph.

  5. Implement a basic page using miliqk-app components

    v3
    After completing the installation and configuration, you can create a new page at pages/index/index.vue to test the plugin's functionality. The example demonstrates the use of the <miliqk-status-bar> component and a product introduction section with navigation to the plugin's home page.
    <template>
  <view class="content">

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

    <!-- Introduction Information -->
    <product-intro :app-intro="appIntro"></product-intro>

    <!-- Demo Entry -->
    <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: #303744;
        padding: 15px;
        font-size: 15px;
      }
    }
  }
}

</style>

  6. miliqk-app Plugin Directory Overview

    v2

    The miliqk-app plugin is organized into the following primary directories:

    • components/: Contains all custom UI components (e.g., reader, ad, navigation).
    • css/: Contains global and demand-based styles.
    • libs/: Contains core logic, including api (mock data), config, constants (enums), function (utility libraries), and mixins.
    • pages/: Example implementation pages for book chapters, home, and user profiles.
    • static/: Static assets such as categories and tabbar icons.

  7. Understand the Book Basic Information API response structure

    v2
    The Book Basic Information API returns a response object containing the status of the request and a detailed bookInfo object. The bookInfo object provides comprehensive metadata about a book, including its identification, categorization, author details, pricing, and status flags (e.g., sales, sensitivity, and serialization status).
    {
  "code": 200,
  "msg": "调用成功",
  "data": {
    "bookInfo": {
      "id": 123,
      "title": "Book Title",
      "categoryId": 1,
      "categoryName": "经商种田",
      "author": "Author Name",
      "coverImg": "https://example.com/cover.jpg",
      "intro": "Book introduction...",
      "labelInfo": "Tag1#Tag2",
      "sellStatus": "UP", // UP: On sale, DOWN: Off shelf
      "sensitiveStatus": "IN_SENSITIVE",
      "serialStatus": "FINISH", // FINISH: Completed
      "copyrightStatus": "REPRINT",
      "source": "Platform Source",
      "chapterPrice": 0,
      "price": 0,
      "latelyFollowerS": 100,
      "totalFollower": 1000,
      "retentionRatio": "80%",
      "nextRetentionRatio": "75%",
      "monthRetentionRatio": "70%",
      "lastChapterId": "chap_001",
      "lastChapterName": "第51章 大结局",
      "score": "4.5",
      "words": 100000,
      "totalChapters": 51,
      "dayUpdateCount": 1,
      "createTime": "2023-01-01 12:00:00",
      "lastModified": "2023-01-02 12:00:00",
      "adPages": 2,
      "addShelf": false,
      "subjectType": "NOVEL"
    },
    "interestBooks": [] // Array of recommended books
  }
}

  8. Retrieve novel chapter content

    v3
    Use the getChapterInfo endpoint to fetch detailed information and the full text of a specific novel chapter. The response includes the chapter content, title, and metadata about characters, dialogues, and settings.

    Endpoint: /novel/chapterInfo

    Request Parameters:

    • chapterId (String, Required): The unique identifier of the chapter.

    Response Fields:

    • code (integer): Status code (200 for success).
    • msg (string): Result message.
    • data (object):
      • id (string): Chapter unique identifier.
      • bookId (string): Associated novel identifier.
      • title (string): Chapter title.
      • content (string): Full text of the chapter.
      • characters (array): List of characters appearing in the chapter (name, age, description).
      • dialogues (array): List of dialogues (speaker, content).
      • events (array): List of events described in the chapter.
      • settings (object): Background settings (location, atmosphere).

  9. Implement interstitial ads with miliqk-ad-content

    v2
    Interstitial ads (ad patches) are managed via the miliqk-ad-content component. To enable them, call the initAdData() method during the page lifecycle (e.g., in onReady). For development and debugging, use adpid="1111111111". To disable interstitial ads, comment out the await this.initAdData(); call.
    async onReady() {
    // ... other initialization
    // Initialize advertisement data
    await this.initAdData();
    // ...
}

  10. Extend miliqk-app and uv-ui functionality

    v2
    Both uv-ui and miliqk-app provide built-in utility functions and global configurations that can be extended based on project requirements. For detailed uv-ui extension configurations, refer to the official uv-ui documentation.

  11. Prevent event bubbling in uni-app components

    v3

    The method for stopping event propagation differs between Vue 2 and Vue 3 in uni-app:

    • Vue 2: Use the .native.stop modifier directly on the component.
    • Vue 3: The .native modifier is removed. To stop propagation, wrap the component in a <view> tag and apply @click.stop to that wrapper. Do not use @click.stop inside the component itself, as it may disable click events for nested elements.
    <!-- Vue 2 -->
<uv-button text="Test" @click.native.stop="handle"></uv-button>

<!-- Vue 3 -->
<view @click.stop>
  <uv-button text="Test" @click="handle"></uv-button>
</view>

  12. When to use nvue vs Vue in uniapp

    nvue is based on the Weex native rendering engine and offers performance comparable to React Native. However, it has more restrictions on styles and API compatibility compared to standard Vue pages.

    Recommendations:

    • For most applications, use standard Vue development as it is the primary focus of uniapp's enhancements.
    • Use nvue for the application's home page (V3 version) or specific performance-critical sections to significantly improve rendering speed.