跳转到: 导航, 搜索
第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页面,则会显示你的小程序二维码,引导用户到你的 微信小程序 内查看。

1、将微博分享组件拷贝到你的小程序工程里,放在components文件夹下
2、声明微博分享组件,在页面的 json 文件中进行引用声明
JSON
{
  "usingComponents": {
    "WB-shareButton": "/components/WB-shareButton/WB-shareButton"
  }
}
3、在小程序页面的 wxml 中,使用微博分享组件
WXML
<WB-shareButton ak="{{appkey}}" shareData="{{share}}"><view class="share_button">分享到微博</view></WB-shareButton>
组件支持单一slot插槽,开发者直接将你的分享按钮作为子节点放到分享组件里即可,这样开发者可以自由的控制自己分享按钮的样式和位置
4、在小程序页面的 js 文件中,定义你的分享内容和必要的配置数据
JS
Page({
  data: {
    appkey: "你在微博开放平台上已经关联微信小程序的APPKEY",
    share: {
      content: "我是分享的文字",
      title: "我是分享的页面标题",
      image_url: "我是分享的页面的卡片预览图的图片地址,建议200 × 200像素",
      h5_url: "我是分享的页面对应的H5页面地址,如果小程序没有对应的H5页面,可以为空"
    }
  },
  ...
})

至此,你已经完成了微信小程序内,微博分享组件的集成,下面赶紧去试试分享到微博把。


热门视频插件接入

在你的 微信小程序 中,可以通过 热门视频插件 ,十分方便的在你的小程序里,实现目前特别流行的沉浸式全屏视频流功能,提升小程序的用户粘性和停留时长。


1、查找并添加微博插件
使用微博插件(WBComponent),需要在微信小程序管理后台的“设置 - 第三方服务 - 插件管理”中添加微博插件,你可以通过APPID(wx9074de28009e1111)查找到微博插件并添加,也可以通过插件名称“WBComponent”查找到,微博插件无需申请,添加后可直接使用。


2、引入微博插件代码包
在使用微博插件前,还需要在你的微信小程序的 app.json 文件中,声明需要使用微博插件。
代码示例:
JSON
{
	"plugins": {
		"WBPlugin": {
			"version": "1.0.1",
			"provider": "wx9074de28009e1111",
			"export": "wbConfig.js"
		}
	}
}

以上示例中,插件的引用名(WBPlugin),使用者可以自定义,此文档内我们将以 WBPlugin 为例,也建议开发者这样命名。


而 wbConfig.js 文件是开发者传递给微博插件的配置文件,使用者也可以自定义文件名和存放位置,但是请注意填写正确的文件路径,比如配置文件命名为 abc.js,存放在小程序根目录下的 x 文件夹下,则引用路径为 "x/abc.js",此文档内我们也将以 wbConfig.js 为例。


3、配置微博插件信息
wbConfig.js 文件的内容,使用者需要配置导出一些必要的信息,供微博插件使用,具体如下
代码示例:
JS
module.exports = {
	debug: true,
	appkey: '使用者的微博开放平台APPKEY',
	openid: function() {
		// 使用者拿到当前访问用户的openid,返回给插件
		return "当前访问用户的openid"
	},
	code: '',
	toMiniProgram: wx.navigateToMiniProgram
}

其中,appkey 是使用者在微博开放平台申请的APPKEY。openid 定义一个Function,函数里获取到使用者小程序内的当前访问用户的openid,然后返回给插件。toMiniProgram 则需要使用者把 wx.navigateToMiniProgram 方法返回给插件,方便插件在个别必要的场景下,跳转回使用者的小程序。


4、使用微博插件内的热门视频组件
和使用普通自定义组件的方式类似,开发者需要在使用组件的页面的 json 文件中,使用 plugin:// 协议声明插件的引用名和组件名,来定义需要引入的组件。
代码示例:
JSON
{
	"usingComponents": {
		"WB-videoTimeline": "plugin://WBPlugin/WB-videoTimeline"
	}
}
之后,在页面的 wxml 文件内,使用热门视频组件。
代码示例:
WXML
<WB-videoTimeline></WB-videoTimeline>

热门视频组件,使用者可以通过外层包裹<view>,来实现自定义组件的高度和位置。


至此,你已经完成了微博热门视频插件的接入,点击视频就会进入目前特别流行的沉浸式全屏视频流功能,提升小程序的用户粘性和停留时长。