微信小程序之分享功能

一、介绍

微信小程序的分享功能可以分享页面给朋友或群聊，但是不能分享到朋友圈，需要分享朋友圈的话，可以在小程序内设计一个分享页面，利用小程序提供的canvas把小程序码绘制到分享图里保存到本地分享到朋友圈。

小程序调起分享分两种方式：1.通过页面右上方自带的分享功能 2.页面内自定义分享。

本篇主要介绍第2种方式：通过给button组件设置属性 open-type="share"

最新的微信开发者工具新建页面的时候，在页面js文件里会有onShareAppMessage: function () {} 事件，当button设置了open-type="share" 属性后，点击 button 会调用该事件，看下官方给的该事件的文档：

二、应用

在商品详情页加上分享按钮，如图：

点击后效果：

代码：

wxml页面里放入：

<button open-type="share">分享</button>

js:

onLoad: function (options) {var id = options.id;//获取参数,当用户通过分享进来页面时获取到id，根据id获取产品的信息},onShareAppMessage: function (res) {var that = this;var goods_id=that.data.goods_id;//获取产品idvar goods_title=that.data.goods_title;//获取产品标题var goods_img=that.data.goods_img;//产品图片if (res.from === 'button') {// 来自页面内转发按钮return {title: goods_title,path: '/page/details?id=' +goods_id,imageUrl:goods_img //不设置则默认为当前页面的截图}}}

微信小程序之分享功能相关推荐

微信小程序/uniapp分享功能-代码封装与使用（分享好友或朋友圈-两种方式）
官方地址:分享 | uni-app官网一.分享朋友圈-详见uni-app官方文档注意:更多注意事项见uni-app文档结果展示: 二.分享好友或者朋友圈-详见微信开放文档先展示: 实现分享 ...
微信小程序实现分享功能
@微信小程序微信小程序如何实现分享功能可能对于一些新入门的小程序开发者来说,开发一款小程序,想要推广,肯定希望有分享好友的功能,但是点击小程序右上角的三点按钮,发现发送给朋友的选项是灰色的.比如说 ...
微信小程序转发分享功能
转发获取更多转发信息通常开发者希望转发出去的小程序被二次打开的时候能够获取到一些信息,例如群的标识.现在通过调用 wx.showShareMenu 并且设置 withShareTicket 为 t ...
微信小程序转发分享功能（二）
关于小程序的转发: 最简单的就是点击小程序右上角菜单"转发"按钮直接分享,不过这种分享有点不太友好,实用性也不强. 当然,你可以自定义分享内容,包括标题,简介,图片及分享的小程序页 ...
微信小程序--实现分享功能
本篇文章的目标是实现分享小程序中的单张页面给其他用户,并且打开分享后的页面拥有返回按钮. 最终的效果: 1. 封装一个分享的组件 <view class='share'><view ...
微信小程序---转发分享功能
1. 转发---onShareAppMessage 2.不带参数 //用户点击右上角分享 onShareAppMessage: function (res) {return {title: 'xxx' ...
微信小程序自定义分享功能开发笔记
要在分享的页面中定义onShareAppMessage 方法,只有定义了此事件处理函数,右上角菜单才会显示"转发"按钮 onShareAppMessage触发方式有两种,一种是通过 ...
微信小程序禁止分享功能
直接删掉当前js页面中的分享方法就可以了效果如下:
微信小程序17__分享功能
先看效果图: 相关代码有: 1. 在wxml文件中,增加 <button type="primary" bindtap="handleShare" st ...

微信小程序之分享功能

微信小程序之分享功能相关推荐

最新文章

热门文章