微信小程序web-view的H5页面如何使用微信直播功能

最近因为了个项目,需要集成微信直播功能,由于当时偷懒,微信小程序直接用的web-view组件集成了原来的H5页面。所以要用微信直播功能,还颇费了一点功夫。废话少说,只要上代码:
第一步:在app.json引用直播组件

"plugins": {
    "live-player-plugin": {
        "version": "1.1.0", // 注意填写该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)
        "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
    }
}

第二步:
微信小程序建建一个直播跳转面面wxboradcast
代码如下`

// pages/wxboradcast/wxboradcast.js
//获取应用实例
const app = getApp();
var roomId="";    //房间ID
Page({

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

      roomId=options.roomId;
      let did=options.did;
      let customParams = encodeURIComponent(JSON.stringify({ did:did })) 
      let url='plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id='+roomId+'&custom_params='+customParams;
      //此处官网的代码有问题,请按我的来处理。
      wx.navigateTo({
          url: url
      })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //此处利用微信小程序返回是不执行onLoad,只执行onShow的机制,来判断是否有转入roomId,来判断是跳转和返回
    //此处也很重要,可以防止微信直播界面按返回键时出现空白页
    if(roomId=="")
    {
    let pages = getCurrentPages(); //获取当前页面js里面的pages里的所有信息。

    let prevPage = pages[ pages.length - 2 ]; 
    //微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作
    wx.navigateBack();
    }
    roomId="";
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

第三步:在H5页面的增加直播跳转代码

  //微信小程序环境
            var isWxMini = false;
            //判断当前是否是微信小程序环境。
            isWxMini = window.__wxjs_environment === 'miniprogram'
  //去直播间
            function gowxBoardcast() {              
                if (isWxMini) {
                    var path = "/pages/wxboradcast/wxboradcast?did={{did-value}}&roomId=3";
                    window.wx.miniProgram.navigateTo({
                        url: path
                    });
                }
            }

三步搞定,就是如此简单。

你可能感兴趣的:(微信小程序)