小程序右上角分享按钮

1.wx.showShareMenu(Object object)

调用显示出默认分享按钮，一般可以在onLoad周期内调用就可以

wx.showShareMenu({withShareTicket: true, // 展示默认分享按钮menus: ['shareAppMessage', 'shareTimeline'] //分享好友 | 分享朋友圈
})

2.onShareAppMessage(Object object)

监听用户点击页面内转发按钮（button 组件 open-type="share"）或右上角菜单“转发”按钮的行为，并自定义转发内容。

右上角菜单“转发”按钮的行为

Page({ //右上角菜单“转发”按钮的行为onShareAppMessage() {const promise = new Promise(resolve => {setTimeout(() => {resolve({title: '自定义转发标题'})}, 2000)})return {title: '自定义转发标题',path: '/page/user?id=123',promise }}
})

自定义按钮点击行为

//wxml
<button style="padding: 0;margin: 0;width:100%;" class='button' open-type="share"><text>分享小程序</text>
</button>
//javascript
onShareAppMessage () { //分享小程序页面return {title:'自定义标题',path: 'page/xxx/xx/xxx/?id=xxx&name=xxxx', //传入id参数可以渲染商品详情类的页面imageUrl:"../../images/headimg/back.jpeg", // 自定义分享时好友看到的图片success (res) { //成功时回调console.log('成功', res)}}},

3.onShareTimeline()

监听右上角菜单“分享到朋友圈”按钮的行为，并自定义分享内容。

只有定义了此事件处理函数，右上角菜单才会显示“分享到朋友圈”按钮。

不同点：事件处理函数返回一个 Object，用于自定义分享内容，不支持自定义页面路径。

onShareTimeline() {return {title: this.data.questionsList[this.data.questionIndex].title, //自定义标题query: { //用户访问时onLoad(options)生命周期函数的optionstext: this.data.text,value: this.data.isDesc,index: this.data.questionIndex,},imageUrl: "自定义分享图片" // 不定义默认使用本页面}}

小程序右上角分享按钮相关推荐

mpvue开发微信小程序，分享按钮报错：`Cannot read property 'apply' of null`
用mpvue开发微信小程序,分享按钮报错:Cannot read property 'apply' of null thirdScriptError Cannot read property 'app ...
微信小程序右上角胶囊按钮尺寸
微信小程序胶囊按钮尺寸在自定义时导航栏时,往往我们为了设计的美观性,需要要求我们自己设计的导航组件在某些尺寸上能与右上角那个可爱的胶囊按钮保持一致,以下是胶囊按钮的尺寸:
微信小程序组件分享按钮
//wxml <view class='nav-right' bindtap='tobackShop'> <button open-type="share" cl ...
uniapp小程序自定义分享按钮
1.代码如下 <button class="w100 h100 btn-collection inline-block" open-type="share" ...
微信小程序自定义分享按钮
1.声明 onShareAppMessage 函数 onShareAppMessage() { return { title: '弹出分享时显示的分享标题' desc: '分享页面的内容', pa ...
uniapp微信小程序自定义分享按钮
1.在 manifest.json 的 App SDK 配置里,勾选微信消息及朋友圈并填写相关微信 appkey. 2. 代码里面调用: <button class="w100 h10 ...
微信小程序右上角分享实现代码
效果第一步:在data中定义变量分享内容变量 share: {title: "名称", // 分享显示名称path: "/pages/index/index" ...
微信小程序隐藏分享按钮
引入微信js <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1 ...
工作章 - 小程序web-view分享流泪爬坑记
写在前面的废话最近产品提出了一个要求要通过种果树送水果的方式是来促活,而里面就涉及到了分享领水滴,由于一开始想的是小程序和微网页都要使用这个功能,所以直接用h5来开发.小程序端则直接使用web-vi ...

小程序右上角分享按钮

1.wx.showShareMenu(Object object)

2.onShareAppMessage(Object object)

3.onShareTimeline()

小程序右上角分享按钮相关推荐

最新文章

热门文章