微信小程序实现分享到朋友圈功能

截止到2017年11月18号,微信小程序官方还尚未开放直接分享到朋友圈的能力,但是劳动人民的智慧是伟大的,现在普遍的做法是,生成一张带有小程序码的图片,保存到用户相册,用户自行发布图片到朋友圈

我的套路:

  1. 请求后端API生成小程序码(生成小程序码需要access token,后端生成比较方便)
  2. canvas绘制文字和图片到画布
  3. 当用户点击分享到朋友圈时,给用户展示画布,画布转成图片,并将图片保存到相册
onShow: function () {
   var that = this;
   //1. 请求后端API生成小程序码
   that.getQr();

   //2. canvas绘制文字和图片
   const ctx = wx.createCanvasContext('myCanvas');
   var imgPath = '../../../image/intro.png'
   var bgImgPath = '../../../image/bgImgPath.png';
   ctx.drawImage(imgPath, 0, 0, 600, 520);

   ctx.setFillStyle('white')
   ctx.fillRect(0, 520, 600, 280);

   ctx.drawImage(imgPath,  30, 550, 60, 60);
   ctx.drawImage(bgImgPath, 30, 550, 60, 60);
   ctx.drawImage(imgPath,  410, 610, 160, 160);

   ctx.setFontSize(28)
   ctx.setFillStyle('#6F6F6F')
   ctx.fillText('妖妖灵', 110, 590)

   ctx.setFontSize(30)
   ctx.setFillStyle('#111111')
   ctx.fillText('宠友们快来围观萌宠靓照', 30, 660)
   ctx.fillText('我在萌爪幼稚园', 30, 700)

   ctx.setFontSize(24)
   ctx.fillText('长按扫码查看详情', 30, 770)
   ctx.draw()
 },
 // 3. canvas画布转成图片
   wx.canvasToTempFilePath({
     x: 0,
     y: 0,
     width: 600,
     height: 800,
     destWidth: 600,
     destHeight:800,
     canvasId: 'myCanvas',
     success: function(res) {
       console.log(res.tempFilePath);
       that.setData({
         shareImgSrc : res.tempFilePath
       })

     },
     fail:function (res) {
       console.log(res)
     }
   })
   //4. 当用户点击分享到朋友圈时,将图片保存到相册
    wx.saveImageToPhotosAlbum({
      filePath:that.data.shareImgSrc,
      success(res) {
        wx.showModal({
          title: '存图成功',
          content: '图片成功保存到相册了,去发圈噻~',
          showCancel:false,
          confirmText:'好哒',
          confirmColor:'#72B9C3',
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
            that.hideShareImg()
          }
      })
   }
})

canvas绘制单位为px,举个例子,屏幕宽375,绘制375的画布,保存的图片就是375px,图片像素度不够会糊掉,所以我改进了一下套路:

1.请求后端API生成小程序码(生成小程序码需要access token,后端生成比较方便)

2.canvas绘制文字和图片到画布
绘制2倍屏幕宽度的canvas画布,canvas画布必须是可见状态下,才可以被转成图片,可是他辣么大辣么丑肯定不能给用户看见,那就给他定位定个巨大的数字超出屏幕就好了

3.画布转成图片

4.当用户点击分享到朋友圈时,给用户展示图片,并将图片保存到相册

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2018-07-19

微信小程序分享功能之按钮button 边框隐藏和点击隐藏

先上图 样式设置: 在小程序社区看了下,说是伪类造成的.于是就重新定义下样式.然后就 ok 了. 总结 以上所述是小编给大家介绍的微信小程序分享功能之按钮button 边框隐藏和点击隐藏,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

微信小程序实现分享朋友圈的图片功能示例

本文实例讲述了微信小程序实现分享朋友圈的图片功能.分享给大家供大家参考,具体如下: 由于微信小程序只支持分享给朋友或者群,不支持分享到朋友圈,又有分享到朋友圈这个需求,那就要想办法实现这个需求.查阅各种资料,发现基本思路有两种,一种是后端实现,另一种是前端实现,后端实现的方式这里就不讨论了,因为我是不懂后端的,只会前端的东西,所以这里就记录一下前端的实现方法. 前端要实现分享到朋友群,都是通过canvas做一张图片,然后用户手动分享朋友圈.前端具体要做的就是把要分享的页面用canvas重做一遍,

微信小程序按钮去除边框线分享页面功能

有一个需求是分享当前页面,使用美工的分享按钮图片来分享,而小程序分享功能只有button有 open-type="share"这个属性,使用image标签肯定不行.我是这样做的: <button open-type="share" style="height:85rpx;width:215rpx;padding:0;background-color:#fff;border-color:#fff;margin-right:10rpx" >

微信小程序之分享页面如何返回首页的示例

做小程序开发发现,页面分享出去后,用户通过分享进去的页面很难找到返首页的情况.(微信官方操作是点击右上角三个点,在手机下方显示返回首页).民间很多方案是自己在页面加个悬浮Home标注. 今天我分享另外一种方法.请看下面.gif; 有没有发现,左上角有返回按钮了.原理简单,在你要分享的页面,分享配置时配置你的首页,并带上对应的参数,在首页 onLoad方法中可以获取.代码如下: <!--index.wxml--> <view class="container">

微信小程序生成分享海报方法(附带二维码生成)

昨天写了一篇小程序本地生成二维码的功能小程序本地生成二维码,趁热打铁今天给大家分享一下小程序内生成海报的功能以及具体步骤 这次分享海报里面的元素比较少,进行绘制的分别有头像,海报背景以及二维码(二维码的生成请看上面<小程序本地生成二维码>一文),此次没有涉及到文字的绘制,不过原理大致相同,这篇文章就不对文字绘制进行阐述了. 下面我们就开始吧

微信小程序项目总结之点赞 删除列表 分享功能

小程序点赞功能 思路:在后台没有给你接口自己模拟数据 data:{ likes:{ iszan:false, num:0 } } 1.遍历评论列表 判断点击的id 2.如果id相同 判断是否点赞过 如果为true -1 如果为false +1 3.更新数据 bindlike:function(e){ var newData = this.data.release.map(function(item){ if (item.id == e.currentTarget.dataset.id){ con

微信小程序分享功能onShareAppMessage(options)用法分析

本文实例讲述了微信小程序分享功能onShareAppMessage(options)用法.分享给大家供大家参考,具体如下: 在页面的js文件中定义了 onShareAppMessage 函数时,页面可以表示改页面可以转发.可以在函数中设置页面转发的信息. 1. 只有定义了该函数,小程序右上角的菜单中才会有转发按钮 2. 用户点击转发按钮的时候回调用该函数 3. 该函数内需要 return 一个 Object,Object中包含转发的信息(可自定义转发的内容) 页面中有可以触发转发时间的地方有两个

微信小程序通过保存图片分享到朋友圈功能

说明 首先说明一点,小程序内是不能直接分享到朋友圈的.所以只能通过生成图片,携带小程序二维码,保存到手机相册,让用户自己选择发到朋友圈.然后可以通过在小程序中识别二维码来进入小程序的指定页面.参考市面上支持分享的应用,基本都是这种实现方式. 准备阶段 1.通过服务器获取小程序码 这里可以参考下微信的官方文档,给后台指定的参数和路径等信息,让后台生成指定的小程序码.然后调用wx.getImageInfo将后台生成的小程序码保存起来. 注意一定要仔细看下微信的文档,如果生成小程序码的路径正式服务器不

微信小程序实现的自定义分享功能示例

本文实例讲述了微信小程序实现的自定义分享功能.分享给大家供大家参考,具体如下: 大家都知道,小程序有分享的功能,可以分享整个程序,也可以自定义分享的内容 onShareAppMessage 在 Page 中定义 onShareAppMessage 函数,设置该页面的分享信息. 只有定义了此事件处理函数,右上角菜单才会显示"分享"按钮 用户点击分享按钮的时候会调用 此事件需要 return 一个 Object,用于自定义分享内容 示例代码: Page({ onShareAppMessag

详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能

微信小程序在12月21日发布了新版本的开发工具,并在官网公布新增分享.模板消息.客服消息.扫一扫.带参数二维码功能. 有了分享功能,相信会给很多创业者带来了无限的可能性! 下面就来看看这些新功能到底怎么用吧! 1.分享 可以分享小程序的任何一个页面给好友或群聊.注意是分享给好友或群聊,并没有分享到朋友圈.一方面微信在尝试流量分发方式,但同时又不愿意开放最大的流量入口. 开发文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/share.html?t=

微信小程序动态添加分享数据

微信小程序分享效果: js代码: page({ /** * 用户点击分享按钮或右上角分享 */ onShareAppMessage: function (res) { var that = this; return { title: that.data.common.act_name, desc: that.data.common.introduction, path: '/pages/xiangqing/xiangqing?id='+that.data.id, success: functio

微信小程序动态添加view组件的实例代码

在web中,我们动态添加DOM,可以用jQuery的方法,很简单.在微信小程序中怎么实现下面这么需求. 其中,里程数代表上一行到这一行地方的距离(这个不重要):要实现的就是点击增加途径地,就多一行,删除途径地,就少一行. 分析:添加的和删除的是同样的结构,只是数量不一样,所以考虑循环,用列表表示,增加就往这个列表push一个,删除就从列表pop一个. 主要代码如下: <view class="weui-cell weui-cell_input"> <view clas

微信小程序动态添加和删除组件的现实

一.基本思路 1.通过改变数组长度动态增删组件 <block wx:for="{{数组}}"> 组件 </block> 2.点击添加按钮,增加数组的成员,组件相应增加 点击删除按钮,减少数组的成员,组件相应删除 二.示例 wxml: <view> <button bindtap='onTapAdd'>添加input组件</button> <button bindtap='onTapDel'>删除Input组件<

微信小程序 动态修改页面数据及参数传递过程详解

在小程序中我们经常要动态渲染数据,对于新手而言我们常常遇到修改的数据在控制台显示和页面显示不一致,因为我们用"="修改数据的,这种是可以修改,但无法改变页面的状态的,还会造成数据不一致,代码如下: data: { array: [{ text: '数组' }] } onLoad:function(){ this.data.array[0].text=1; console.log(this.data.array[0].text); } 修改代码: onLoad:function(){ /

微信小程序云开发实现数据添加、查询和分页

本文实例为大家分享了微信小程序云开发实现数据添加.查询和分页,供大家参考,具体内容如下 实现的效果 实现要点 WXML 不同类别数据的显示 通过 if-elif-else 实现,在wxml文件中通过 <block></block>渲染,因为它仅仅是一个包装元素,不会在页面中做任何渲染,只接受控制属性.也就是说可以通过属性来控制页面是否要渲染这部分的内容,可以减少页面渲染时间. 云开发数据的获取 先开通云开发功能 ,参考官方文档,然后在创建项目的时候勾选上 使用云开发模板(看个人吧,

微信小程序手动添加收货地址省市区联动

本文实例为大家分享了微信小程序手动添加收货地址省市区联动的具体代码,供大家参考,具体内容如下 先看效果图 html部分 用小程序的piceker-view 嵌入页面的滚动选择器 <picker-view indicator-style="height: 50px;" style="width:100%; height: 400rpx;" bindchange="bindChange"> <picker-view-column c

微信小程序 动态传参实例详解

微信小程序 动态传参实例详解 在微信小程序的开发过程中经常会用到动态传参,比如根据某一页面传参的不同,加载不同的新的页面.接下来介绍下如何实现. 上一篇博客中介绍了如何用wx:for循环显示数组,一般情况下我们要实现的功能是点击不同的元素进入不同的页面,比如在另一个页面加载某个元素的详细信息. 跳转这里采用navigator跳转,在navigator跳转的链接上将参数加上去: index.wxml(根据点击页面的不同传递参数) <view class="item" wx:for=

微信小程序实现添加手机联系人功能示例

本文实例讲述了微信小程序实现添加手机联系人功能.分享给大家供大家参考,具体如下: 1.效果展示   2.关键代码 1)WXML文件 <view bindlongtap="phoneNumTap">{{phoneNum}}</view> 2)JS文件 Page({ data:{ phoneNum:'12345678901'//测试用的号码,并非真实号码 }, // 长按号码响应函数 phoneNumTap:function(){ var that=this; //

微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】

本文实例讲述了微信小程序使用slider设置数据值及switch开关组件功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml <view>微信小程序组件:滑动选择器slider</view> <slider bindchange="sliderBindchange" min="{{min}}" max="{{max}}" show-value/> <view>

微信小程序动态生成二维码的实现代码

效果图如下: 实现 wxml <!-- 存放二维码的图片--> <view class='container'> <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image> </view> <!-- 画布,用来画二维码,只用来站位,不用来显示--> <view class=&qu