微信小程序直播安装和开发指南

甘甜青桔 發表於 2020-8-17 15:51:00

2020年2月28日微信小程序直播能力启动公测。微信小程序直播是微信官方提供的商家经营工具，商家可通过在小程序内直播，实现商家与消费用户互动，同时进行商品销售的闭环。在直播的时候无需任何的跳转，直接下单，提高下单转化率。这让直播成为打通商家和消费用户的重要销售渠道。
微慕WordPress小程序专业版 v3.0 和微慕小程序增强版V2.0已经上线了微信小程序直播功能
微慕团队2020年5月28日在微信小程序专业版进行了《微慕小程序开发调试》的直播。错过当时直播的朋友，可以观看直播的回放，直播回放观看方法：
1.在微信里搜索：“微慕”，打开微慕小程序，小程序的首页有直播导航链接，点击进入后，可观看直播。
2.微信扫描如下二维码观看：
<img src="https://www.watch-life.net/images/2020/05/live-code-20200528.jpg" sizes="(max-width: 430px) 100vw, 430px" srcset="https://www.watch-life.net/images/2020/05/live-code-20200528.jpg 430w, https://www.watch-life.net/images/2020/05/live-code-20200528-150x150.jpg 150w, https://www.watch-life.net/images/2020/05/live-code-20200528-300x300.jpg 300w" alt="" width="430" height="430" class="aligncenter size-full wp-image-1752">
微慕团队计划将推出更多有关更多有关“微信小程序”开发的直播课程，欢迎有兴趣的朋友联系我们，告诉我们你想我们分享哪些微信小程序相关开发内容。
<h2>小程序直播开通条件</h2>
符合以下条件且收到邀请的伙伴即可开通：
<blockquote>
满足小程序18个开放类目 主体下小程序近半年没有严重违规 小程序近90天内，有过支付行为 主体下公众号累计粉丝数大于100人 主体下小程序连续7日日活跃用户数大于100人 主体在微信生态内近一年广告投放实际消耗金额大于1万元

</blockquote>
注：条件中1、2、3必须满足，4、5、6满足其一即可。
<h2>小程序直播申请方法</h2>
1.进入小程序后台，申请类别：商家自营->百货或服装或美妆等类目 2.开通微信支付。 3.如果没有支付行为，如果你使用的是基于微慕小程序（开源或专业版都可以）开发的小程序，在小程序里赞赏或付费阅读一次（专业版）。一般第二天就会有一次支付记录了。
.以上三项满足，小程序后台功能下就会出现直播，点击申请
<img src="https://www.watch-life.net/images/2020/05/1586066620-9846185b023b800-1024x663.jpg" sizes="(max-width: 625px) 100vw, 625px" srcset="https://www.watch-life.net/images/2020/05/1586066620-9846185b023b800-1024x663.jpg 1024w, https://www.watch-life.net/images/2020/05/1586066620-9846185b023b800-200x129.jpg 200w, https://www.watch-life.net/images/2020/05/1586066620-9846185b023b800-300x194.jpg 300w, https://www.watch-life.net/images/2020/05/1586066620-9846185b023b800-768x497.jpg 768w, https://www.watch-life.net/images/2020/05/1586066620-9846185b023b800-624x404.jpg 624w, https://www.watch-life.net/images/2020/05/1586066620-9846185b023b800.jpg 1080w" alt="微信小程序直播申请" width="625" height="405" class="aligncenter size-large wp-image-1731">
如果还不能申请，可能是因为小程序关联的公众号粉丝没有满100，或主体下小程序连续7日日活跃用户数没有大于100人，这两个很容易实现。
<h2>小程序直播创建直播间</h2>
在小程序后台创建直播间，可以选择“手机直播”和“推流设备直播”，详细的创建方法参考官方的文档：《微信小程序直播运营操作手册》
对于手机很简单，直播开始后，主播通过手机端扫描直播二维码就可以开始，但对于推流直播，需要通过第三方推流设备进行直播，有关推流直播设置方法详见下文。
<h2>小程序里安装直播插件</h2>
更新（2020年5月26日）：在小程序管理后台直播菜单中开通小程序直播组件后，直接根据文档说明开发使用即可，无需在“设置-第三方设置-插件管理”中再添加小程序直播组件。
<del datetime="2020-05-26T02:44:48+00:00">1.在微信小程序后台设置插件授权</del>
<img src="https://www.watch-life.net/images/2020/05/15898498801-1024x625.png" sizes="(max-width: 625px) 100vw, 625px" srcset="https://www.watch-life.net/images/2020/05/15898498801-1024x625.png 1024w, https://www.watch-life.net/images/2020/05/15898498801-200x122.png 200w, https://www.watch-life.net/images/2020/05/15898498801-300x183.png 300w, https://www.watch-life.net/images/2020/05/15898498801-768x469.png 768w, https://www.watch-life.net/images/2020/05/15898498801-624x381.png 624w, https://www.watch-life.net/images/2020/05/15898498801.png 1306w" alt="小程序第三方授权" width="625" height="381" class="aligncenter size-large wp-image-1732">
<del datetime="2020-05-26T02:44:48+00:00">点击添加“添加插件”</del>
<img src="https://www.watch-life.net/images/2020/05/15898500171-1024x296.png" sizes="(max-width: 625px) 100vw, 625px" srcset="https://www.watch-life.net/images/2020/05/15898500171-1024x296.png 1024w, https://www.watch-life.net/images/2020/05/15898500171-200x58.png 200w, https://www.watch-life.net/images/2020/05/15898500171-300x87.png 300w, https://www.watch-life.net/images/2020/05/15898500171-768x222.png 768w, https://www.watch-life.net/images/2020/05/15898500171-624x181.png 624w, https://www.watch-life.net/images/2020/05/15898500171.png 1154w" alt="小程序直播插件" width="625" height="181" class="aligncenter size-large wp-image-1733">
<del datetime="2020-05-26T02:44:48+00:00">添加小程序插件授权显示如下：</del>
<img src="https://www.watch-life.net/images/2020/05/15898500871-1024x315.png" sizes="(max-width: 625px) 100vw, 625px" srcset="https://www.watch-life.net/images/2020/05/15898500871-1024x315.png 1024w, https://www.watch-life.net/images/2020/05/15898500871-200x62.png 200w, https://www.watch-life.net/images/2020/05/15898500871-300x92.png 300w, https://www.watch-life.net/images/2020/05/15898500871-768x236.png 768w, https://www.watch-life.net/images/2020/05/15898500871-624x192.png 624w, https://www.watch-life.net/images/2020/05/15898500871.png 1332w" alt="" width="625" height="192" class="aligncenter size-large wp-image-1734">
2.在小程序端引入。
项目根目录的 app.json 引用，示例代码如下：
<blockquote>
“plugins”: { “live-player-plugin”: { “version”: “1.0.9”, “provider”: “wx2b03c6e691cd7370” } }

</blockquote>
“version”: 注意填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号； “provider”:必须填该直播组件appid，该示例值即为直播组件appid
3.使用直播插件
直接通过链接地址跳转到直播组件页面（即为进直播间页面）链接地址需要带上直播房间 id，这个id是创建直播后，可以在小程序后台直播里查看到。
<img src="https://www.watch-life.net/images/2020/05/15898504091-1024x535.png" sizes="(max-width: 625px) 100vw, 625px" srcset="https://www.watch-life.net/images/2020/05/15898504091-1024x535.png 1024w, https://www.watch-life.net/images/2020/05/15898504091-200x104.png 200w, https://www.watch-life.net/images/2020/05/15898504091-300x157.png 300w, https://www.watch-life.net/images/2020/05/15898504091-768x401.png 768w, https://www.watch-life.net/images/2020/05/15898504091-624x326.png 624w, https://www.watch-life.net/images/2020/05/15898504091.png 1279w" alt="小程序直播房间id" width="625" height="327" class="aligncenter size-large wp-image-1735">
注：房间 id 可通过“获取直播房间列表” API 获取，详见链接：https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html
在页面里使用 navigateTo 方法跳转进入直播间，比如页面是index.js,代码如下:
<blockquote>
let roomId = 5// 填写具体的房间号 wx.navigateTo({ url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId} }) // 其中wx2b03c6e691cd7370是直播组件appid不能修改

</blockquote>
在直播开始的时候，观看直播的用户就可以通过这个页面直接跳转到小程序直播间。
<h2>推流直播的设置</h2>
一、准备工作
1、获取推流地址
在小程序后台MP（https://mp.weixin.qq.com）创建推流直播计划，获取推流地址
1）在mp先创建推流直播计划
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/1-6-1024x552.png" alt="1" width="1024" height="552" class="alignnone size-full wp-image-5828">
2）选择直播类型为设备推流直播（推流类型的直播需要直播组件1.0.3及以上版本才支持）
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/2-5-1024x537.png" alt="2" width="1024" height="537" class="alignnone size-full wp-image-5829">
3）未做实名认证的主播开播要进行扫码验证
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/3-2-1024x636.png" alt="3" width="1024" height="636" class="alignnone size-full wp-image-5830">
4）创建成功后，在成功弹窗内可拿取推流地址，也可以后面在控制台获取推流地址
a：创建成功后在弹窗上，直接获取推流地址
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/4-3-1024x552.png" alt="4" width="1024" height="552" class="alignnone size-full wp-image-5831">
b：也可后续在控制台获取推流地址
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/5-2-1024x504.png" alt="5" width="1024" height="504" class="alignnone size-full wp-image-5832">
2、下载使用推流第三方软件
市面上的第三方推流软件都可用，小程序直播负责提供推流的地址和控制直播间的能力。
第三方推流软件例如pc端推流可用“obs”软件，手机端可用“芯象直播软件”；第三方推流软件的用法可自行百度软件使用方法；下面简单举例说明小程序直播与obs软件配合发起推流直播的流程
1）在官网下载obs安装在电脑上
2）打开obs进行推流地址配置
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/7-1024x708.png" alt="7" width="1024" height="708" class="alignnone size-full wp-image-5834">
在设置中输入我们刚在第一步在小程序MP端拿到的推流地址
服务器部分填：rtmp://wxalivepush.weixin.qq.com/live/
串流密钥：复制推流地址上 live/后面的内容
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/8-1024x762.png" alt="8" width="1024" height="762" class="alignnone size-full wp-image-5835">
3）配置好地址之后，配置采集来源
如果要用PC电脑做为直播录制设备，可以在【来源】处选择
<ul>
<li>视频捕捉设备</li>
<li>音频捕捉设备</li>

</ul>
如果同时需要一边录制一边播放PPT，可以再选择
<ul>
<li>窗口捕捉设备</li>

</ul>
如果要用专业摄像机做为开播设备等更多能力，可以参考第三方推流软件的说明
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/9-1024x710.png" alt="9" width="1024" height="710" class="alignnone size-full wp-image-5836"><img src="https://blog.minapper.com/wp-content/uploads/2020/04/10-1024x721.png" alt="10" width="1024" height="721" class="alignnone size-full wp-image-5837">
4）设置好可以调整整个窗口的占比，确认好效果后，先在在obs点击推流
二、开播
1、回到小程序Mp后台
以上准备工作完毕后，可以回到MP小程序后台，直播-控制台
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/11-1024x241.png" alt="11" width="1024" height="241" class="alignnone size-full wp-image-5838">
2、开播
1）准备开播：进入到控制台，检查推流的状态是否正常，正常的情况下即可开始直播啦，点击【开始直播】则正式开播
a：检查推流是否正常
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/12-1024x482.png" alt="12" width="1024" height="482" class="alignnone size-full wp-image-5839">
b：点击【开始直播】
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/13-1024x564.png" alt="13" width="1024" height="564" class="alignnone size-full wp-image-5840">
2）观众端表现
显示的比例可以在第三方软件上自由调整
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/14-471x1024.png" alt="14" width="471" height="1024" class="alignnone size-full wp-image-5841"><img src="https://blog.minapper.com/wp-content/uploads/2020/04/15-1024x470.png" alt="15" width="1024" height="470" class="alignnone size-full wp-image-5842"><img src="https://blog.minapper.com/wp-content/uploads/2020/04/16-1024x484.png" alt="16" width="1024" height="484" class="alignnone size-full wp-image-5843">
3）结束直播：优先在控制台点击【结束直播】，再关闭obs等第三方推流软件
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/17-1024x483.png" alt="17" width="1024" height="483" class="alignnone size-full wp-image-5844"><img src="https://blog.minapper.com/wp-content/uploads/2020/04/18-1024x456.png" alt="18" width="1024" height="456" class="alignnone size-full wp-image-5845">
 
 
<img src="https://blog.minapper.com/wp-content/uploads/2020/04/18-1024x456.png" alt="18" width="1024" height="456" class="alignnone size-full wp-image-5845">
 
-------------
原文链接：https://www.watch-life.net/wechat/weixin-app-live.html 
来源：https://www.cnblogs.com/xjb/p/weixin-app-live.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序直播安装和开发指南