跳转到: 导航, 搜索

微信小程序内的微博组件

微信小程序内的微博组件,是一组微博开发的微信小程序组件、或者插件,可以让你的微信小程序实现分享到微博、与微博连接等功能。


下面我们来体验一下这些组件,使用微信扫描下面的二维码,即可进入组件体验小程序。


接入指南

如果你还没有 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页面,可以为空"
    }
  },
  ...
})

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