第28行: | 第28行: | ||
<ul class="clearfix"> | <ul class="clearfix"> | ||
<li style="font-size:14px;width:250px;">[[Wxminiappplugin#分享组件接入|分享组件接入]]</li> | <li style="font-size:14px;width:250px;">[[Wxminiappplugin#分享组件接入|分享组件接入]]</li> | ||
+ | <li style="font-size:14px;width:250px;">[[Wxminiappplugin#热门视频插件接入|热门视频插件接入(等待上线中,敬请期待)]]</li> | ||
<li style="font-size:14px;width:250px;">[[Wxminiappplugin#关注插件接入|关注插件接入(开发中,敬请期待)]]</li> | <li style="font-size:14px;width:250px;">[[Wxminiappplugin#关注插件接入|关注插件接入(开发中,敬请期待)]]</li> | ||
</ul> | </ul> | ||
第89行: | 第90行: | ||
至此,你已经完成了微信小程序内,微博分享组件的集成,下面赶紧去试试分享到微博把。 | 至此,你已经完成了微信小程序内,微博分享组件的集成,下面赶紧去试试分享到微博把。 | ||
</div> | </div> | ||
+ | |||
+ | |||
+ | |||
+ | ==热门视频插件接入== | ||
+ | |||
+ | <div class="wiki_txtJ"> | ||
+ | 在你的 微信小程序 中,可以通过 热门视频插件 ,十分方便的在你的小程序里,实现目前特别流行的沉浸式全屏视频流功能,提升小程序的用户粘性和停留时长。 | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="wiki_txtJ" style="margin:15px 0;">'''1、查找并添加微博插件'''</div> | ||
+ | |||
+ | <div style="margin:15px 0;">使用微博插件(WBComponent),需要在微信小程序管理后台的“设置 - 第三方服务 - 插件管理”中添加微博插件,你可以通过APPID(wx9074de28009e1111)查找到微博插件并添加,也可以通过插件名称“WBComponent”查找到,微博插件无需申请,添加后可直接使用。</div> | ||
+ | |||
+ | |||
+ | <div class="wiki_txtJ" style="margin:15px 0;">'''2、引入微博插件代码包'''</div> | ||
+ | |||
+ | <div style="margin:15px 0;">在使用微博插件前,还需要在你的微信小程序的 app.json 文件中,声明需要使用微博插件。</div> | ||
+ | |||
+ | <div style="margin:15px 0;">'''代码示例:'''</div> | ||
+ | |||
+ | <div class="code_type">JSON</div> | ||
+ | <pre class="brush:js"> | ||
+ | { | ||
+ | "plugins": { | ||
+ | "WBPlugin": { | ||
+ | "version": "1.0.1", | ||
+ | "provider": "wx9074de28009e1111", | ||
+ | "export": "wbConfig.js" | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | <div style="margin:15px 0;"> | ||
+ | 以上示例中,插件的引用名(WBPlugin),使用者可以自定义,此文档内我们将以 WBPlugin 为例,也建议开发者这样命名。 | ||
+ | |||
+ | |||
+ | 而 wbConfig.js 文件是开发者传递给微博插件的配置文件,使用者也可以自定义文件名和存放位置,但是请注意填写正确的文件路径,比如配置文件命名为 abc.js,存放在小程序根目录下的 x 文件夹下,则引用路径为 "x/abc.js",此文档内我们也将以 wbConfig.js 为例。 | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="wiki_txtJ" style="margin:15px 0;">'''3、配置微博插件信息'''</div> | ||
+ | |||
+ | <div style="margin:15px 0;">wbConfig.js 文件的内容,使用者需要配置导出一些必要的信息,供微博插件使用,具体如下</div> | ||
+ | |||
+ | <div style="margin:15px 0;">'''代码示例:'''</div> | ||
+ | |||
+ | <div class="code_type">JS</div> | ||
+ | <pre class="brush:js"> | ||
+ | module.exports = { | ||
+ | debug: true, | ||
+ | appkey: '使用者的微博开放平台APPKEY', | ||
+ | openid: function() { | ||
+ | // 使用者拿到当前访问用户的openid,返回给插件 | ||
+ | return "当前访问用户的openid" | ||
+ | }, | ||
+ | code: '', | ||
+ | toMiniProgram: wx.navigateToMiniProgram | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | <div style="margin:15px 0;"> | ||
+ | 其中,appkey 是使用者在微博开放平台申请的APPKEY。openid 定义一个Function,函数里获取到使用者小程序内的当前访问用户的openid,然后返回给插件。toMiniProgram 则需要使用者把 wx.navigateToMiniProgram 方法返回给插件,方便插件在个别必要的场景下,跳转回使用者的小程序。 | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="wiki_txtJ" style="margin:15px 0;">'''4、使用微博插件内的热门视频组件'''</div> | ||
+ | |||
+ | <div style="margin:15px 0;">和使用普通自定义组件的方式类似,开发者需要在使用组件的页面的 json 文件中,使用 plugin:// 协议声明插件的引用名和组件名,来定义需要引入的组件。</div> | ||
+ | |||
+ | <div style="margin:15px 0;">'''代码示例:'''</div> | ||
+ | |||
+ | <div class="code_type">JSON</div> | ||
+ | <pre class="brush:js"> | ||
+ | { | ||
+ | "usingComponents": { | ||
+ | "WB-videoTimeline": "plugin://WBPlugin/WB-videoTimeline" | ||
+ | } | ||
+ | } | ||
+ | </pre> | ||
+ | |||
+ | <div style="margin:15px 0;">之后,在页面的 wxml 文件内,使用热门视频组件。</div> | ||
+ | |||
+ | <div style="margin:15px 0;">'''代码示例:'''</div> | ||
+ | |||
+ | <div class="code_type">WXML</div> | ||
+ | <pre class="brush:js"> | ||
+ | <WB-videoTimeline></WB-videoTimeline> | ||
+ | </pre> | ||
+ | |||
+ | <div style="margin:15px 0;"> | ||
+ | 热门视频组件,使用者可以通过外层包裹<view>,来实现自定义组件的高度和位置。 | ||
+ | |||
+ | |||
+ | 至此,你已经完成了微博热门视频插件的接入,点击视频就会进入目前特别流行的沉浸式全屏视频流功能,提升小程序的用户粘性和停留时长。 | ||
+ | </div> | ||
+ | |||
2021年1月5日 (二) 11:12的版本
微信小程序内的微博组件
微信小程序内的微博组件,是一组微博开发的微信小程序组件、或者插件,可以让你的微信小程序实现分享到微博、与微博连接等功能。
下面我们来体验一下这些组件,使用微信扫描下面的二维码,即可进入组件体验小程序。
接入指南
如果你还没有 AppKey 请先在微博开放平台网站创建你的应用,申请入口。
之后,你需要到 我的应用 的 高级信息 页面,关联你的微信小程序设置,使用微博组件,你至少需要关联你的微信小程序名称、原始ID、APPID、和小程序码,这些信息决定着分享内容是否能回流到你的微信小程序,因此请务必填写准确。
分享组件接入
在你的 微信小程序 中,可以通过 微博分享组件 ,将内容分享到微博,在微信的微博小程序内,点击分享内容里的链接,可以直接回到你的 微信小程序 对应的页面。而在微博客户端内点击链接,可以打开对应的H5页面,如果你的小程序没有对应的H5页面,则会显示你的小程序二维码,引导用户到你的 微信小程序 内查看。
{ "usingComponents": { "WB-shareButton": "/components/WB-shareButton/WB-shareButton" } }
<WB-shareButton ak="{{appkey}}" shareData="{{share}}"><view class="share_button">分享到微博</view></WB-shareButton>
Page({ data: { appkey: "你在微博开放平台上已经关联微信小程序的APPKEY", share: { content: "我是分享的文字", title: "我是分享的页面标题", image_url: "我是分享的页面的卡片预览图的图片地址,建议200 × 200像素", h5_url: "我是分享的页面对应的H5页面地址,如果小程序没有对应的H5页面,可以为空" } }, ... })
至此,你已经完成了微信小程序内,微博分享组件的集成,下面赶紧去试试分享到微博把。
热门视频插件接入
在你的 微信小程序 中,可以通过 热门视频插件 ,十分方便的在你的小程序里,实现目前特别流行的沉浸式全屏视频流功能,提升小程序的用户粘性和停留时长。
{ "plugins": { "WBPlugin": { "version": "1.0.1", "provider": "wx9074de28009e1111", "export": "wbConfig.js" } } }
以上示例中,插件的引用名(WBPlugin),使用者可以自定义,此文档内我们将以 WBPlugin 为例,也建议开发者这样命名。
而 wbConfig.js 文件是开发者传递给微博插件的配置文件,使用者也可以自定义文件名和存放位置,但是请注意填写正确的文件路径,比如配置文件命名为 abc.js,存放在小程序根目录下的 x 文件夹下,则引用路径为 "x/abc.js",此文档内我们也将以 wbConfig.js 为例。
module.exports = { debug: true, appkey: '使用者的微博开放平台APPKEY', openid: function() { // 使用者拿到当前访问用户的openid,返回给插件 return "当前访问用户的openid" }, code: '', toMiniProgram: wx.navigateToMiniProgram }
其中,appkey 是使用者在微博开放平台申请的APPKEY。openid 定义一个Function,函数里获取到使用者小程序内的当前访问用户的openid,然后返回给插件。toMiniProgram 则需要使用者把 wx.navigateToMiniProgram 方法返回给插件,方便插件在个别必要的场景下,跳转回使用者的小程序。
{ "usingComponents": { "WB-videoTimeline": "plugin://WBPlugin/WB-videoTimeline" } }
<WB-videoTimeline></WB-videoTimeline>
热门视频组件,使用者可以通过外层包裹<view>,来实现自定义组件的高度和位置。
至此,你已经完成了微博热门视频插件的接入,点击视频就会进入目前特别流行的沉浸式全屏视频流功能,提升小程序的用户粘性和停留时长。