微信短剧小程序-uniapp篇

 

uniApp 引入短剧插件： 

第一步：配置插件 plugin信息

操作路径： manifest.json 源码模式下，mp-weixin 下 添加 plugins 配置如下图。

 

第二步：App.vue 中配置 插件引用

app.vue 中初始化短剧播放器 &播放器管理器

// #ifdef MP-WEIXIN
 const playletPlugin = requirePlugin('playlet-plugin')
 const PlayerManager = require('@/common/util/playManager.js')
// #endif

在 app.vue onLoad中初始化 plugin

// #ifdef MP-WEIXIN
playletPlugin.onPageLoad(this._onPlayerLoad.bind(this))
playletPlugin.getShareParams().then(res => {
 //关于extParam的处理，需要先做decodeURIComponent之后才能得到原值
 const extParam = decodeURIComponent(res.extParam)
 // 如果设置了withShareTicket为true，可通过文档的方法获取更多信息
 // https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html
 const enterOptions = wx.getEnterOptionsSync()
}).catch(err => {
 console.log('getLaunch options query err-app-vue', err)
})
// #endif

在app.vue  methods 下添加 _onPlayerLoad 函数

_onPlayerLoad(info) {
 console.log('App-onPlayerLoad', info.playerId, info)
 // #ifdef MP-WEIXIN
 const playerManager = new PlayerManager()
 playerManager._onPlayerLoad(info)
 // #endif
},

ps: 因为要考虑做多端适配，使用条件编译引入短剧播放器.关于播放器管理器可参考：PlayerManager.js

PS: 按照以上配置，分享参数获取配置后，如果通过短剧播放器内分享的消息直接进入会优先进入小程序短剧播放器，返回后才会触发onLoad 中的 获取shareParam,可根据自己业务单独处理。

第三步：具体业务页面引入playerManager 

 

import PlayManager from '@/common/util/playManager.js'

操作跳转短剧插件：

// #ifdef MP-WEIXIN
  PlayManager.navigateToPlayer({
      dramaId: xxx,
      srcAppid: xxxx,
      serialNo: xxxx,
      extParam: {}
  })
// #endif