微博开放平台
微连接
移动应用
网站接入
电商服务商
电商商家
数据服务
数据服务
合作伙伴
微博支付
轻应用
粉丝服务
文档
推广
我的应用
登录
weibo
开发文档
首页
平台政策与指引
概述
平台公约
新手指南
开发者协议
应用运营管理规范
微连接分级管理办法
应用审核产品指南
应用安全开发注意事项
平台应用设计规范
微服务接入指南
微博登录接入
用微博帐号登录
授权机制
移动应用接入
移动应用介绍
移动应用SSO授权
微博Deep Link
媒体接入平台
头条文章开放接口
视频上传开放接口
电商接入平台
电商服务商接入
电商商家端接入
电商平台能力接口
粉丝服务平台
粉丝服务平台
新手接入指南
微信开发者迁移指南
接收消息
发送消息
自定义菜单
用户管理
生成带参数的二维码
Fans Service Platform
商业接口
商业数据接入指南
订阅服务手册(中文版)
订阅服务手册(英文版)
商业接口-REST API
商业数据常见问题
网站接入
网站接入介绍
微博API
微博API
接口访问频次权限
资源下载
SDK
微博标识下载
常见问题
联系我们
工具箱
链入页面
链出更改
特殊页面
查看源代码
跳转到:
导航
,
搜索
根据下列原因,你没有权限编辑本页:
您刚才请求的操作只有这个用户组中的用户才能使用:
用户
您可以查看并复制此页面的源代码:
=微信小程序内的微博组件= <div class="wiki_txtJ"> 微信小程序内的微博组件,是一组微博开发的微信小程序组件、或者插件,可以让你的微信小程序实现分享到微博、与微博连接等功能。 目前,微博已经上线了分享到微博自定义组件、热门视频流插件也很快就会上线。 下面我们来体验一下这些组件,使用微信扫描下面的二维码,即可进入组件体验小程序。 <div style="width:230px;margin:30px auto 0;"> {{Img_polaroid|src=https://wx1.sinaimg.cn/large/53b515f0ly1gl04thq7cej20by0byacp.jpg}} </div> </div> ==接入指南== <div class="wiki_txtJ"> 如果你还没有 AppKey 请先在微博开放平台网站创建你的应用,[http://open.weibo.com/apps/new 申请入口]。 之后,你需要到 我的应用 的 高级信息 页面,关联你的微信小程序设置,使用微博组件,你至少需要关联你的微信小程序名称、原始ID、APPID、和小程序码,这些信息决定着分享内容是否能回流到你的微信小程序,因此请务必填写准确。 {{Img_polaroid|src=https://wx1.sinaimg.cn/large/53b515f0ly1gl04u1dli7j20rp0lvtia.jpg}} </div> <div class="wiki_taglist"> <ul class="clearfix"> <li style="font-size:14px;width:200px;">[[Wxminiappplugin#分享组件接入|分享组件接入]]</li> <li style="font-size:14px;width:200px;">[[Wxminiappplugin#热门视频插件接入|热门视频插件接入]]</li> <li style="font-size:14px;width:200px;">[[Wxminiappplugin#关注插件接入|关注插件接入(敬请期待)]]</li> </ul> </div> ==分享组件接入== <div class="wiki_txtJ"> 在你的 微信小程序 中,可以通过 微博分享组件 ,将内容分享到微博,在微信的微博小程序内,点击分享内容里的链接,可以直接回到你的 微信小程序 对应的页面。而在微博客户端内点击链接,可以打开对应的H5页面,如果你的小程序没有对应的H5页面,则会显示你的小程序二维码,引导用户到你的 微信小程序 内查看。 </div> <div class="wiki_txtJ" style="margin:15px 0;">'''1、将微博分享组件拷贝到你的小程序工程里,放在components文件夹下'''</div> <div class="wiki_taglist"> <ul class="clearfix"> <li style="font-size:14px;width:250px;">[https://github.com/weibosdk/miniapp-plugin/raw/main/WB-shareButton.rar 下载微信小程序微博分享组件]</li> </ul> </div> <div class="wiki_txtJ" style="margin:15px 0;">'''2、声明微博分享组件,在页面的 json 文件中进行引用声明'''</div> <div class="code_type">JSON</div> <pre class="brush:js"> { "usingComponents": { "WB-shareButton": "/components/WB-shareButton/WB-shareButton" } } </pre> <div class="wiki_txtJ" style="margin:15px 0;">'''3、在小程序页面的 wxml 中,使用微博分享组件'''</div> <div class="code_type">WXML</div> <pre class="brush:js"> <WB-shareButton ak="{{appkey}}" shareData="{{share}}"><view class="share_button">分享到微博</view></WB-shareButton> </pre> <div style="margin:15px 0;">组件支持单一slot插槽,开发者直接将你的分享按钮作为子节点放到分享组件里即可,这样开发者可以自由的控制自己分享按钮的样式和位置</div> <div class="wiki_txtJ" style="margin:15px 0;">'''4、在小程序页面的 js 文件中,定义你的分享内容和必要的配置数据'''</div> <div class="code_type">JS</div> <pre class="brush:js"> Page({ data: { appkey: "你在微博开放平台上已经关联微信小程序的APPKEY", share: { content: "我是分享的文字", title: "我是分享的页面标题", image_url: "我是分享的页面的卡片预览图的图片地址,建议200 × 200像素", h5_url: "我是分享的页面对应的H5页面地址,如果小程序没有对应的H5页面,可以为空" } }, ... }) </pre> <div class="wiki_txtJ"> 至此,你已经完成了微信小程序内,微博分享组件的集成,下面赶紧去试试分享到微博把。 </div> ==热门视频插件接入== <div class="wiki_txtJ"> 在你的 微信小程序 中,可以通过 热门视频插件 ,十分方便的在你的小程序里,实现目前特别流行的沉浸式全屏视频流功能,提升小程序的用户粘性和停留时长。 </div> <div class="wiki_txtJ" style="margin:15px 0;">'''1、查找并添加微博插件'''</div> <div style="margin:15px 0;">使用微博插件(WBComponent),需要在微信小程序管理后台的“设置 - 第三方服务 - 插件管理”中添加微博插件,你可以通过APPID(wx501c3c6e8f8dfcaf)查找到微博插件并添加,也可以通过插件名称“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.0", "provider": "wx501c3c6e8f8dfcaf", "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" }, 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> {{#a:nobtns|noheading}} __NOTOC__
该页面使用的模板:
模板:Img polaroid
(
查看源代码
)
返回到
Wxminiappplugin
。
反馈
分享
顶部