微信短劇小程式-uniapp篇

　短劇播放器是微信官方為微短劇類目小程式提供的播放器外掛。 開發者可引入短劇播放器外掛後，基於自身需求快速進行開發上線。

 小程式中使用短劇播放器需要以下幾個條件

• 小程式已有短劇類目（文娛->微短劇），並且將該類目設為主類目
• 小程式引入短劇播放器外掛 微信官方短劇外掛文件
• 小程式後臺接入微信媒資管理， 短劇媒資管理
• 媒資管理需要稽核透過劇目，拿到 dramaId(劇目ID) & srcAppid (源appId)

預覽小程式如下：

微信短劇外掛新增：

操作路徑： 微信公眾平臺-設定-三方設定-外掛管理-新增外掛短劇播放器

輸入短劇外掛appId: wx94a6522b1d640c3b ，由管理員掃碼即可新增。

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

• 短劇播放器需要初始化劇集資料，需要與後臺互動，拿到加密報文後 傳入 PlayerManager 中的 isCanPlay 中。
• 短劇播放器後臺需要使用使用者登入的session，該資訊由獲取openId 介面獲取，要新增session過期校驗，避免後期session失效。需要小程式端完善 session重新整理機制。