第15行: | 第15行: | ||
<div class="wiki_txtJ"> | <div class="wiki_txtJ"> | ||
− | 如果你还没有 AppKey | + | 如果你还没有 AppKey 请先在微博开放平台网站创建你的应用,[http://open.weibo.com/apps/new 申请入口]。 |
第37行: | 第37行: | ||
<div class="wiki_txtJ"> | <div class="wiki_txtJ"> | ||
在你的 微信小程序 中,可以通过 微博分享组件 ,将内容分享到微博,在微博的微信小程序内,点击分享内容里的链接,可以直接回到你的 微信小程序 对应的页面。而在微博客户端内点击链接,可以打开对应的H5页面,如果你的小程序没有对应的H5页面,则会显示你的小程序二维码,引导用户到你的 微信小程序 内查看。 | 在你的 微信小程序 中,可以通过 微博分享组件 ,将内容分享到微博,在微博的微信小程序内,点击分享内容里的链接,可以直接回到你的 微信小程序 对应的页面。而在微博客户端内点击链接,可以打开对应的H5页面,如果你的小程序没有对应的H5页面,则会显示你的小程序二维码,引导用户到你的 微信小程序 内查看。 | ||
+ | </div> | ||
+ | |||
+ | <div class="wiki_txtJ" style="margin:15px 0;">'''1、将微博分享组件拷贝到你的小程序工程里,放在components文件夹下'''</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> | ||
− | |||
2020年11月24日 (二) 11:48的版本
微信小程序内的微博组件
微信小程序内的微博组件,是一组微博开发的微信小程序组件、或者插件,可以让你的微信小程序实现分享到微博、与微博连接等功能。
下面我们来体验一下这些组件,使用微信扫描下面的二维码,即可进入组件体验小程序。
接入指南
如果你还没有 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页面,可以为空" } }, ... })
至此,你已经完成了微信小程序内,微博分享组件的集成,下面赶紧去试试分享到微博把。