zoukankan      html  css  js  c++  java
  • 小程序直播插件接入

      当下直播带货还是挺火的,对于直播项目理解拉流和推流基本就能搞定。之前小程序直播插件未开放的时候,当时是引入第三方直播服务进行做的;当下又有直播需求,这次便把小程序直播插件模块体验了下:小程序直播插件还是挺方便的,小程序直接开通引入就行,相比第三方省去了不少费用。当然喽,各有各的好处,小程序插件对于某些引用场景还是有局限性的,看项目需求。具体小程序插件如何操作呢?

    《1》首先微信公众平台开通直播服务

        小程序直播插件交流专区

               小程序直播版本查看

    《2》直播组件如何引入?

      方式一:主包引入

    "plugins": {
    	"live-player-plugin": {
    		//版本号
    		"version": "1.1.2", 
    		//直播组件appid
    		"provider": "wx2b03c6e691cd7370" 
    	}
    }
    

      方式二:分包引入

    "subpackages": [
    	{
    		"plugins": {
    			"live-player-plugin": {
    				"version": "1.1.1", 
    				"provider": "wx2b03c6e691cd7370"
    			}
    		}
    	}
    ]

    《3》直播组件如何引入?

      a.使用 navigator 组件跳转进入直播间  

    <navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=8&custom_params={{customParams}}&open_share_ticket=1" class="image">直播组件测试</navigator>

      b.使用编程式导航 navigateTo 方法跳转进入直播间

    //填写具体的房间号,可通过下面【获取直播房间列表】 API 获取
    let roomId = [直播房间id] 
    //开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数)
    //后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、
    //【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)
    let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/index', pid: 1 })) 
    wx.navigateTo({
        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
    })
    

      注意:开发时可以在管理平台创建直播间获取room_id用于测试

    通过上面三个步骤就接入了小程序直播插件了。

    直播组件接口:

      

     这些组件接口基本文档上介绍的很详细,下面具体只介绍下从分享卡片中进入获取链接参数:

    //app.js
    let livePlayer = requirePlugin('live-player-plugin')
    onShow(options) {
    	//引入组件需设置open_share_ticket=1"。如:<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=8&custom_params={{customParams}}&open_share_ticket=1">
    	//从微信群分享的卡片进入才有此参数
    	console.log("微信群中打开shareTicket=", options.shareTicket)
    	// 分享卡片入口场景才调用getShareParams接口获取以下参数
    	if (options.scene == 1007 || options.scene == 1008 || options.scene == 1044) {
    		livePlayer.getShareParams().then(res => {
    			//直播房间号
    			console.log('房间号room_id=', res.room_id)
    			//用户openid
    			console.log('进入者openid=', res.openid)
    			//分享者openid,分享卡片进入场景才有
    			console.log('分享者share_openid=', res.share_openid)
    			//开发者在跳转进入直播间页面时,页面路径上携带的自定义参数,这里传回给开发者
    			console.log('开发者自定义参数custom_params=', res.custom_params)
    		}).catch(err => {
    			console.log('get share params', err)
    		})
    	}
    }

      对于直播间里的货架商品跳转到商家小程序的商品详情页或点击直播间左上角首页icon跳转到商家小程序的首页时,可通过页面的周期函数onLoad(options)里获取房间号、用户openid、分享者share_openid(如果是从分享卡片进入直播间再跳转到商详页才有该参数)、开发者携带的自定义参数custom_params

    服务端接口:

     直播间管理接口:

      

      直播商品管理接口:

      

       对于一些只针对小程序直播的开发需求理由小程序直播插件基本就可以了,可以拉流推流,可以对商品进行管理,还减少了开发成本。

      

      对于分享直播间码,显示页面不存在解决办法:

        https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/other-abilities.html

        小程序引入直播组件必须进行一次小程序发布上线,否则直播间的小程序码不生效,具体表现是用户扫码进入直播间会显示“页面不存在”。

        在 MP 小程序直播后台创建好直播间后,可以直接拿到直播间分享小程序码,无需额外开发

  • 相关阅读:
    转 C#接收邮件
    WebApi的windows服务之路
    自动化升级工具之客户端升级工具之windows服务升级操作
    自动化升级工具之客户端升级工具之数据库升级操作
    GoJs实现流程管理图
    MvcForum作者称该项目进入缓慢更新
    生鲜蔬菜生产称重管理系统
    MvcForum中文版+PostgreSql源码下载
    Asp.Net MVC开源论坛中文版
    HTML5+Activex+Singr+ABP+MongoDB
  • 原文地址:https://www.cnblogs.com/changxue/p/13337046.html
Copyright © 2011-2022 走看看