uni-app 接入微信短剧播放器

漠尘
1,263 阅读5分钟

前言

作为一个 uniapp 初学者，恰巧遇到微信短剧播放器接入的需求，在网上检索许久并没有发现傻瓜式教程。于是总结 uni-app 官网文档及微信开放文档，自行实践后，总结出几个步骤，希望为大家提供些帮助。实践后发现其实确实比较简单，大佬们可能也懒得写文档，那么就由我这个小白大概总结下。本文档仅涉及剧目提审成功后的播放器接入，其余相关问题请参考微信官方文档。

小程序申请插件

参考文档：developers.weixin.qq.com/miniprogram…

首先，需要在小程序后台，申请 appid 为 wx94a6522b1d640c3b 的微信插件，可以在微信小程序管理后台进行添加，路径是 设置 - 第三方设置 - 插件管理 - 添加插件，搜索 wx94a6522b1d640c3b 后进行添加： 小程序管理后台示例 搜索添加

uni-app 项目添加微信插件

参考文档：uniapp.dcloud.net.cn/tutorial/mp…

添加插件完成后，在 manifest.json 中，点击 源码视图，找到如下位置并添加红框内的代码，此步骤意在将微信小程序插件引入项目。 在这里插入图片描述

/* 添加微短剧播放器插件 */
 "plugins" : {
    "playlet-plugin" : {
         "version" : "latest",
         "provider" : "wx94a6522b1d640c3b"
     }
 }

manifest.json 中完成添加后，需要在 pages.json 中找一个页面（我这边使用的是一个新建的空白页面）挂载组件，挂载方式如下图红框中所示，需注意，这里的组件名称需要与 manifest.json 中定义的一致： pages.json

{
	"path": "newPage/newPage",
	"style": {
		"navigationBarTitleText": "",
		"enablePullDownRefresh": false,
		"navigationStyle": "custom",
		"app-plus": {
			"bounce": "none"
		},
		"mp-weixin": {
			"usingComponents": {
				"playlet-plugin": "plugin://playlet-plugin/playlet-plugin"
			}
		}
	}
}

挂载空页面是个笨办法，目前我这边尝试如果不挂载的话，会有些问题，有大神知道别的方法可以在评论区指点一下～

App.vue 配置

参考文档：developers.weixin.qq.com/miniprogram…

首先，找个地方新建一个 playerManager.js，我这边建在了 common 文件夹下。代码如下（代码参考微信官方文档给出的 demo）：

	var plugin = requirePlugin("playlet-plugin");
	// 点击按钮触发此函数跳转到播放器页面
	function navigateToPlayer(obj) {
	    // 下面的${dramaId}变量,需要替换成小程序管理后台的媒资管理上传的剧目的dramaId，变量${srcAppid}是提审方appid，变量${serialNo}是某一集，变量${extParam}是扩展字段，可通过
	    const { extParam, dramaId, srcAppid, serialNo } = obj
	    wx.navigateTo({
	      url: `plugin-private://wx94a6522b1d640c3b/pages/playlet/playlet?dramaId=${dramaId}&srcAppid=${srcAppid}&serialNo=${serialNo}&extParam=${extParam || ''}`
	    })
	}
	const proto = {
	  _onPlayerLoad(info) {
	    const pm = plugin.PlayletManager.getPageManager(info.playerId)
	    this.pm = pm
	    // encryptedData是经过开发者后台加密后(不要在前端加密)的数据，具体实现见下面的加密章节
	    this.getEncryptData({serialNo: info.serialNo}).then(res => {
	      // encryptedData是后台加密后的数据，具体实现见下面的加密章节
	      pm.setCanPlaySerialList({
	        data: res.encryptedData,
	        freeList: [{start_serial_no: 1, end_serial_no: 10}], // 1~10集是免费剧集
	      })
	    })
	    pm.onCheckIsCanPlay(this.onCheckIsCanPlay)
	    // 关于分享的处理
	    // 开启分享以及withShareTicket
	    pm.setDramaFlag({
	      share: true,
	      withShareTicket: true
	    })
	    // 获取分享参数,页面栈只有短剧播放器一个页面的时候可获取到此参数
	    // 例如从分享卡片进入、从投流广告直接跳转到播放器页面，从二维码直接进入播放器页面等情况
	    plugin.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.html
	      const enterOptions = wx.getEnterOptionsSync()
	      console.log('getLaunch options shareTicket', enterOptions.shareTicket)
	    }).catch(err => {
	      console.log('getLaunch options query err', err)
	    })
	    // extParam除了可以通过在path传参，还可以通过下面的接口设置
	    pm.setExtParam('hellotest')
	    // 分享部分end
	  },
	  onCheckIsCanPlay(param) {
	    // TODO: 碰到不可以解锁的剧集，会触发此事件，这里可以进行扣币解锁逻辑，如果用户无足够的币，可调用下面的this.isCanPlay设置
	    console.log('onCheckIsCanPlay param', param)
	    var serialNo = param.serialNo
	    this.getEncryptData({serialNo: serialNo}).then(res => {
	      // encryptedData是后台加密后的数据，具体实现见下面的加密章节
	      this.pm.isCanPlay({
	        data: res.encryptedData,
	        serialNo: serialNo,
	      })
	    })
	  },
	  getEncryptData(obj) {
	    const { serialNo } = obj
	    // TODO: 此接口请求后台，返回下面的setCanPlaySerialList接口需要的加密参数
	    const { srcAppid, dramaId } = this.pm.getInfo()
	    console.log('getEncryptData start', srcAppid, dramaId, serialNo)
	    return new Promise((resolve, reject) => {
	      resolve({
	        encryptedData: '' // TODO: 此参数需从后台接口获取到
	      })
	    })
	  },
	}
	function PlayerManager() {
	  var newProto = Object.assign({}, proto)
	  for (const k in newProto) {
	    if (typeof newProto[k] === 'function') {
	      this[k] = newProto[k].bind(this)
	    }
	  }
	}
	
	PlayerManager.navigateToPlayer = navigateToPlayer
	module.exports = PlayerManager

新建完成后，在 App.vue 中进行组件的配置和引用。 在这里插入图片描述

onLaunch: function() {
	// playlet-plugin必须和上面的app.json里面声明的插件名称一致
	const playletPlugin = requirePlugin('playlet-plugin')
	
	const _onPlayerLoad = (info) => {
		var PlayerManager = require('@/common/playerManager.js')
		const playerManager = new PlayerManager()
		playerManager._onPlayerLoad(info)
	}
	// 注册播放器页面的onLoad事件
	playletPlugin.onPageLoad(_onPlayerLoad.bind(this))
},
_onPlayerLoad(info) {
	var PlayerManager = require('@/common/playerManager.js')
    const playerManager = new PlayerManager()
    playerManager._onPlayerLoad(info)
},

页面使用

参考文档：developers.weixin.qq.com/miniprogram…

以上所有步骤完成后，就可以开心的使用短剧播放器了。 我这边临时写了个图片的 click 事件测试了一下：

clk() {
	// 逻辑处理...获取你的各种参数
	// 打开组件中封装的播放器页面
	PlayerManager.navigateToPlayer({
		srcAppid: 'wx1234567890123456', // 剧目提审方 appid
		dramaId: '100001', // 小程序管理后台的媒资管理上传的剧目的 dramaId
		serialNo: '1', // 剧目中的某一集
		extParam: encodeURIComponent('a=b&c=d'), // 扩展字段,需要encode
	})
},

写在最后：

总结完了，其实整体下来不是很难，对我这种前端小白来说检索和整合的过程是比较痛苦的，所以希望下一个接入的朋友可以少检索一些文档吧。 另附一个短剧播放器接口的文档： developers.weixin.qq.com/miniprogram… 文档主要介绍了短剧播放器插件提供的几个接口，在js代码里，插件接口实例通过下面的代码获取

// 名字playlet-plugin必须和app.json里面引用的插件名一致
const playletPlugin = requirePlugin('playlet-plugin')

读书越多越发现自己的无知，Keep Fighting！

欢迎友善交流，不喜勿喷~

Hope can help~

avatar
文章
阅读
粉丝