uni和原生小程序接微信阅读器插件

微信阅读器插件

原生小程序接入插件

1.添加插件

在app.json文件中添加相关配置

{
  "plugins": {
    "novel-plugin": {
      "version": "latest", // latest：取最新插件版本，版本号：取对应版本
      "provider": "wx293c4b6097a8a4d0", // 固定appid值，必须写死
      "genericsImplementation": {
            "novel": {
                "charge-dialog": "/component/rechargeList/index",// 充值半屏组件内
                "full-screen":"/component/launchApp/index" // 自定义全屏组件
            }
        }
    }
  }
}

2.初始化插件

在app.js文件中进行插件初始化。初始化时的回调函数是代码集中区，基本所有的事件都是在回调函数中转、触发、上报、执行·····

const novelPlugin = requirePlugin('novel-plugin')
import { onNovelPluginLoad } from "utils/novelPlugin.js"
App({
  onLaunch() {
    
  },
  onshow(){
      // 监听进入插件页事件
      if(!this.globalData.novelInfo.novelManager){
          novelPlugin.onPageLoad(onNovelPluginLoad)
      }
  },
  globalData: {
      novelInfo: {}
  }
})

utils[novelPlugin.js]文件

    // utils[novelPlugin.js]
    // 监听进入插件页事件回调
    function onNovelPluginLoad(data){
        // 一下常用的一些插件回调API,根据需求具体删减、添加使用
        getApp().globalData.novelInfo.novelManager = novelPlugin.getNovelManager(data.id); // 缓存插件实例
        novelManager.onClickBookshelf((params)=>{ // 书架点击事件
            novelManager.setBookshelfStatus({}) // 书架状态设置
        })
        novelManager.setShareParams({}) // 设置分享按钮
        novelManager.setClosePluginInfo({}) // 设置退出阅读器返回的路径
        novelManager.onPluginError((params)=>{}) // 插件内部异常监听
        novelManager.onUserTriggerEvent((params)=>{  // 插件内部事件回调
            /**
            * 做一些我们自己的事情
            * 阅读上报
            * 开始和结束信息上报
            * 运营位请求
            * 做某些章节导粉功能
            * ......
            */
        })
        novelManager.paymentCompleted() // 告知阅读器章节已解锁,充值ok后必须调用刷新章节信息
        novelManager.setChargeWay({mode:1}) // 自定义收费组件文案和行为,1-默认2-广告3-自定义4-不展示
        novelManager.onUserClickCustomUnlock((res)=>{ // 解锁按钮点击回调
            novelManager.openChargeDialog() // 打开充值半屏
        })
        novelManager.setFullScreenComponentStatus({ // 自定义全屏组件
          show: true,
        });
    }

3.跳转插件页

/**
* bookId: 必传,书籍审核后微信放返回的另一个书籍id
* chapterIndex：非，章节索引[从0开始]，跳转到第几章
* customServerParams：非，透传到服务器的参数，需要encode加码
*/
// 此处可能需要再跳转前请求服务端获一些取信息
wx.redirectTo({
  url: 'plugin-private://wx293c4b6097a8a4d0/pages/novel/index?bookId=xxx&chapterIndex=xxx&customServerParams=xxxxx'
})

4.解锁组件

安卓：付费解锁可以不用配置setChargeWay。如果需要其他解锁方式，如广告解锁配置mode:2,自定义配置mode:3等等。

IOS：因为...，IOS机型不支持充值,showButton默认为false，此时需要开发者自行设置setChargeWay，实现想要的解锁逻辑

    novelManager.setChargeWay({
      globalConfig: {
        mode: 3, // 自定义收费组件文案和行为,1-默认2-广告3-自定义4-不展示
        buttonText: '解锁', // 按钮文案
        showButton: true // 是否展示按钮
      },
    })
    // 按钮点击回调
    novelManager.onUserClickCustomUnlock(res => {
      novelManager.openChargeDialog({ // 打开充值半屏
        chapterIndex: res.chapterIndex
      })
      // 或者展示自定义组件，以实现解锁功能
      .....
    })

自定义解锁组件

自定义解锁组件和普通组件编写规则基本一致，仅仅是properties属性需要以下写法。

// charge-dialog.js，以下代码仅供参考
const novelPlugin = requirePlugin('novel-plugin')

Component({
  properties: {
    novelManagerId: { // novelManager句柄 用来get实例使用
      type: Number,
      value: -1,
    },
    bookId: { // 书籍id
      type: String,
      value: '',
    },
    chapterIndex: { // 拉起收费框的章节下标(从0开始)
      type: Number,
      value: -1,
    },
    chapterId: { // 拉起收费框的章节id
      type: String,
      value: '',
    }
  },

  methods: {
    unlock() {
      // 取出对应的阅读器实例
      const novelManager = novelPlugin.getNovelManager(this.properties.novelManagerId)

      // do something

      // 告诉阅读器这一章已解锁
      novelManager.paymentCompleted()
      // getApp().globalData.novelInfo.novelManager.paymentCompleted()
    },
  },
})

1. 解锁流程结束后，应调用 paymentCompleted 接口通知阅读器解锁完成，以确保页面能够正确更新。
2. 抽象节点一般是为阅读器插件准备，小程序本身不会直接引用它们。在某些构建环境下，由于组件未被使用，可能会被编译工具进行优化，导致阅读器无法找到插件。如果遇到这种情况，请检查编译产物，确保组件代码存在。如果组件代码不存在，可以在某个页面中引用该组件（即使不使用），以确保组件不会被优化掉。
3. 可以使用 setChargeWay 接口来自定义收费组件的文案和行为，以满足特定的业务需求。
4. 可以使用 openChargeDialog、closeChargeDialog 接口来主动打开/关闭章节解锁组件。
5. 解锁组件最大高度是屏幕高度的 75%，若有较长内容时，开发者应使用 scroll-view 组件。

5.组件之间通讯

业务需求，我们需要在充值半屏中触发全屏打开和关闭、全屏中打开和关闭充值半屏、或者是自定义组件和插件实例之间通讯。但是官方没有给我们提供对应的API，所以我们需要造一个

utils[eventBus.js]文件

// utils[eventBus.js]
class EventBus {
    constructor() {
        this.events = {};
    }
    
    on(event, callback) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(callback);
    }
    
    off(event, callback) {
        if (!this.events[event]) {
            return;
        }
        if (!callback) {
            this.events[event] = null;
            return;
        }
        this.events[event] = this.events[event].filter(
            (cb) => cb !== callback
        );
    }
    
    emit(event, data) {
        if (!this.events[event]) {
            return;
        }
        this.events[event].forEach((cb) => cb(data));
    }
};

export default new EventBus();

// app.js
    /**
    * 引入 [eventBus]
    * 1 app.js中初始化插件阅读器
    * 2 跳转到插件阅读器，且切换章节
    * 3 触发novelManager.onUserTriggerEvent回调，且params.event === 'change_chapter'
    * 4 此时触发在[eventBus]在[operations.js]中注册的[getOperations]事件【触发任意页面注册的事件eventBus.emit】
    * 5 [operations.js]文件中执行[getOperations]事件，做该做的事【任意页面注册事件eventBus.on】
    **/
    import eventBus from '@/utils/eventBus.js'
    const novelPlugin = requirePlugin('novel-plugin');
    App({
        onLaunch(){
            novelPlugin.onPageLoad((data)=>{
                const novelManager = novelPlugin.getNovelManager(data.id)
                 novelManager.onUserTriggerEvent((params)=>{
                    if(params.event === 'change_chapter'){ // 章节改变事件，params.pay_status章节是否解锁状态
                        eventBus.emit('getOperations', params)
                    }
                  })
            })
        }
    })

// operations.js
    import eventBus from '@/utils/eventBus.js'
    Page({
        onLoad(){
            eventBus.off('getOperations')
            eventBus.on('getOperations', (data)=>{
                // 章节改变了，该去做运营位请求了
                ajax()
            })
        }
    })

uniapp小程序接入插件

uniapp小程序引入官方插件和原生引入插件基本一致，只需要注意以下三个点即可

原生小程序：1.插件在app.json中引入，2.自定义组件直接引入即可，3.组件中支持properties属性

uniapp小程序：1.插件在pages.json中引入，2.自定义组件必须和页面一样，在pages.json中的pages属性中注册，3.组件中不支持属性，想使用插件实例必须在实例化的时候缓存在全局

踩坑

1. 解决IOS不支持充值

   novelManager.setChargeWay({
     globalConfig: {
       mode: 3, // 自定义设置
       buttonText: '解锁',
       showButton: true // 展示解锁按钮
     },
   })
   novelManager.onUserClickCustomUnlock(res => { // 解锁按钮点击回调
     novelManager.openChargeDialog({ // 主动打开充值半屏组件
       chapterIndex: res.chapterIndex
     })
   })

2. 解决一些机型展示【分享】按钮时，影响UI展示

  // 影藏分享按钮
  novelManager.setShareParams({
    enable: false,
  })

3. 解决能进入插件阅读器却出现白屏现象

  /**
  * 1.bookId不正确
  * 2.书籍没有授权给该小程序
  * 3.服务端回调没有在相应的回调域名
  */ 
  wxRouter({
    url: 'plugin-private://wx293c4b6097a8a4d0/pages/novel/index?bookId=xxx&chapterIndex=xxx&CustomServerParams=xxx'
  })
  novelManager.onPluginError((params) => {
      // params.event: pull_book_fail、chapter_index_invalid
  })

4. 解决点击等事件回调又是会触发两次，加入节流防抖

    // 比如 params.get_chapter  params.change_chapter 事件
    novelManager.onUserTriggerEvent((params)=>{
        if(params.get_chapter || params.change_chapter){
            throttleFn(params)
        }
    })
    
    let throttleFn = throttle((data)=>{
        // 此处做 params.get_chapter  params.change_chapter 事件的处理
    })
    // 节流函数
    function throttle(func, wait) {
      let timeout;
      return function() {
        const context = this;
        const args = arguments;
        if (!timeout) {
          timeout = setTimeout(function() {
            timeout = null;
            func.apply(context, args);
          }, wait);
        }
      };
    }

5. 充值后依然不能阅读章节(少数)

    /**
    * 调用novelManager.paymentCompleted()后依然不能解锁章节
    * 1. 服务端到账延迟，微信方拉取的信息依然是未解锁状态
    * 2. 微信方获取自己的缓存，未向服务端拉取实时信息
    **/
    1. 确认充值回调success，
    2. novelManager.paymentCompleted()调用
    3. novelManager.onUserTriggerEvent((params)=>{
        if(params.pay_status !== 0 && params.pay_status !== 1){
            // 依然返回未解锁
             wx.showToast({title: '返回首页后重新阅读'})
        }
    })
    

目前没遇到和没想到更多的坑了

欢迎友友们追加各种坑！！！！！！！！！！