微信开发者工具接入短剧播放器插件

本文主要是介绍微信开发者工具接入短剧播放器插件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

申请添加插件

添加插件：登录微信开发者平台 ——> 设置 ——> 第三方设置 ——> 插件管理 ——> 搜索“短剧播放器”插件并添加。

基础接入

app.json

找到app.json文件，加入以下配置：

  // 添加插件为“playlet-plugin”"plugins": {"playlet-plugin": {"version": "latest","provider": "wx94a6522b1d640c3b"}}

其中provider"字段为插件提供方的appid，设置为wx94a6522b1d640c3b即可。请确保将 version 字段设置为 latest，以使用最新版本的插件。
补充问题处理：

• 在开发者工具调试时，可能会出现黑屏，或者报错Plugin module "__wx__/plugin-private-api" is not defined.问题，可以先去掉app.json中默认的设置"lazyCodeLoading": "requiredComponents"；
• 有些使用框架的开发者，例如uniapp，如果碰到自定义运营区域组件，或者充值组件无法渲染的问题，可能是该组件被框架删除了。可通过创建一个空的页面，去引用对应的组件，页面的json文件可参考：

  "usingComponents": {"charge-dialog": "/components/charge-dialog/charge-dialog","open-area-left": "/components/open-area-left/open-area-left","open-area-left-side": "/components/open-area-left-side/open-area-left-side","open-area-right": "/components/open-area-right/open-area-right"}

或者我看其他人提供的是：

  "usingComponents": {"charge-dialog": "/components/charge-dialog/charge-dialog","open-area-left": "/components/open-area-left/open-area-left","open-area-left-side": "/components/open-area-left-side/open-area-left-side","open-area-right": "/components/open-area-right/open-area-right","mp-cells": "weui-miniprogram/cells/cells","mp-cell": "weui-miniprogram/cell/cell"},

以下分别是：组件存储文件夹、新建项目默认组件（顶部导航栏）、以上新增组件文件夹

关于

• 新增charge-dialog充值组件的JS代码见基础接入文档中的充值组件；
• 新增的open-area-left、open-area-left-side、open-area-right组件的JS代码编写见文档。

app.js

// 引用下面的playerManager.js文件，./utils/playerManager为与app.js的相对路径
var PlayerManager = require('./utils/playerManager')/* 播放器页面和小程序之间有比较多的逻辑交互，例如某一集是否能解锁观看，需要开发者提供，插件提供了一些接口来让小程序去交互。接口通过const playletPlugin = requirePlugin('playlet-plugin')返回的插件实例来调用 */
// playlet-plugin必须与上面的app.json里面声明的插件名称一致(plugins插件名称也是playlet-plugin)
const playletPlugin = requirePlugin('playlet-plugin')//app.js
App({onLaunch(options) {// 注册播放器页面的onLoad事件playletPlugin.onPageLoad(this._onPlayerLoad.bind(this))},_onPlayerLoad(info) {// 初始化一个PlayerManager，封装了插件的接口const playerManager = new PlayerManager()playerManager._onPlayerLoad(info)},
})

在onLaunch调用playletPlugin.onPageLoad(func)，func是回调函数，这个回调函数会在播放器页面onLoad时触发，可以在该回调函数中进行其他信息的初始化。

上述文件位置：

playerManager.js

上面的app.js里面引用了playerManager.js文件，新建一个文件夹utils，在其中加入一个playerManager.js文件：

/* 播放器页面和小程序之间有比较多的逻辑交互，例如某一集是否能解锁观看，需要开发者提供，插件提供了一些接口来让小程序去交互。接口通过const playletPlugin = requirePlugin('playlet-plugin')返回的插件实例来调用 */
// playlet-plugin必须与上面的app.json里面声明的插件名称一致(plugins插件名称也是playlet-plugin)
var playletPlugin = requirePlugin("playlet-plugin");// 点击按钮触发此函数跳转到播放器页面
function navigateToPlayer(obj) {// 下面的${dramaId}变量,需要替换成小程序管理后台的媒资管理上传的剧的dramaId// 变量${srcAppid}是提审方appid// 变量${serialNo}是活动的页面路径// 变量${extParam}是分享参数，分享的卡片和二维码会在分享的链接上携带此参数const { extParam, dramaId, srcAppid } = objwx.navigateTo({// 播放器的路径前缀为plugin-private://wx94a6522b1d640c3b/pages/playlet/playlet，再将数据进行拼接即可访问url: `plugin-private://wx94a6522b1d640c3b/pages/playlet/playlet?dramaId=${dramaId}&srcAppid=${srcAppid}&extParam=${extParam || ''}`})
}const proto = {_onPlayerLoad(info) {// PlayletManager是一个类，可通过playletPlugin.PlayletManager.getPageManager(playerId)获取其实例，大部分的接口都在该实例对象上提供，例如getInfo、showChargeDialog等const pm = playletPlugin.PlayletManager.getPageManager(info.playerId)// 定义全局this.pm参数，将pm赋值给this.pm全局参数，方便该方法之外的其他方法使用this.pm = pm// encryptedData是经过开发者后台加密后(不要在前端加密)的数据，具体实现见下面的加密章节// 调用 getEncryptData 方法获取加密后的数据，在 getEncryptData 方法中，需要自己实现一个后台接口来获取加密后的数据，并将其返回encryptedDatathis.getEncryptData({ serialNo: info.serialNo }).then(res => {// 在 setCanPlaySerialList 中，将加密后的数据传递给播放器管理器来设置，setCanPlaySerialList({ data, freeList })接口设置当前可播放的剧集，data参数就是上面提到的加密后的数据，表示那些集是可播放的，是LockDataReq类型对象经过JSON.stringify，然后再加密后得到的字符串pm.setCanPlaySerialList({data: res.encryptedData,  // encryptedData是后台加密后的数据，具体实现见下面的加密章节freeList: [{ // 1~10集是免费剧,data里面的字段也必须至少设置1~10集可播放start_serial_no: 1,end_serial_no: 10}],})})// 需要解锁的事件pm.onCheckIsCanPlay(this.onCheckIsCanPlay)// 关于分享的处理// 开启分享以及withShareTicketpm.setDramaFlag({share: true,withShareTicket: true})// 获取分享参数,页面栈只有短剧播放器一个页面的时候可获取到此参数// 例如从分享卡片进入、从投流广告直接跳转到播放器页面，从二维码直接进入播放器页面等情况playletPlugin.getShareParams().then(res => {console.log('getLaunch options query res', res)// 关于extParam的处理，需要先做decodeURIComponent之后才能得到原值const extParam = decodeURIComponent(res.extParam)console.log('getLaunch options extParam', extParam)// 如果设置了withShareTicket为true，可通过文档的方法获取更多信息// https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.htmlconst enterOptions = wx.getEnterOptionsSync()console.log('getLaunch options shareTicket', enterOptions.shareTicket)}).catch(err => {console.log('getLaunch options query err', err)})// 设置分享参数，extParam除了可以通过在path传参，还可以通过下面的接口设置pm.setExtParam('hellotest')},onCheckIsCanPlay(param) {// TODO: 碰到不可以解锁的剧集，会触发此事件，这里可以进行扣币解锁逻辑，如果用户无足够的币，可调用下面的this.isCanPlay设置console.log('onCheckIsCanPlay param', param)var serialNo = param.serialNothis.getEncryptData({ serialNo: serialNo }).then(res => {

这篇关于微信开发者工具接入短剧播放器插件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---