小程序之生成朋友圈图片

时间: 2018-07-13阅读: 2359标签: 小程序

微信的小程序是没有分享到朋友圈的功能的。小程序目前只能分享到群里或者发给好友。但是业务需要方便推广,需要分享到朋友圈。

经过度娘后,得出了以下思路:利用小程序canvas绘制图片,将背景图和二维码绘制成一张图片。百度过几个好的demo,参考了一下,本以为会很简单就解决这个问题,然而这个并不是小程序canvas的难点!


WXML

<view>
    <canvas canvas-id="myCanvas"/>
    <image src='{{imagePath}}'></image>  
</view>
<button bindtap='createSharePic'>生成朋友圈分享图</button>
这是触发canvas的按钮

 

绘制长按识别二维码

settext: function (context) {
    let _this = this;
    var size  = _this.setCanvasSize();
    var text  = "长按识别小程序";
    context.setFontSize(12);
    context.setTextAlign("center");
    context.setFillStyle("#000");
    context.fillText(text, size.w / 2, size.h * 0.90);
    context.stroke();
},


绘制图片

createNewImg: function () {
    var _this       = this;
    var size        = _this.setCanvasSize();
    var context     = wx.createCanvasContext('myCanvas');
    var path        = "/assets/images/qrshare1.jpg";  //测试的图片
    var imageQrCode = _this.data.filePath;       //二维码
    context.drawImage(path, 0, 0, size.w, size.h);
    context.drawImage(imageQrCode, size.w / 2 - 55, size.h * 0.55, size.w * 0.33, size.w * 0.33);
    this.settext(context);
    //绘制图片
    context.draw();
    //将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
    wx.showToast({
      title   : '生成中...',
      icon    : 'loading',
      duration: 2000
    });
    setTimeout(function () {
      wx.canvasToTempFilePath({
        canvasId: 'myCanvas',
        success : function (res) {
          var tempFilePath = res.tempFilePath;
          _this.setData({
            imagePath   : tempFilePath,
          });
     
          var img  = _this.data.imagePath;
          let urls = []
          urls.push(img, '二维码路径')   //二维码路径是为了用户也可以保存二维码,分享到朋友圈有合成的图片也有二维码(参考拉钩小程序分享)
          wx.previewImage({
            current: img,  // 当前显示图片的http链接
            urls   : urls  // 需要预览的图片http链接列表
          })
        },
        fail: function (res) {
          console.log(res);
        }
      });
    }, 2000);
},


本来我是直接绘制网络图片的,但是在真机上,网络图片不显示!于是百度了一下,可以先下载,接口返回的图片再绘制

//生成朋友圈图片
  createSharePic() {
    let _this = this,
        qrcode= _this.data.qrcode
    wx.downloadFile({
      url    : qrcode,
      success: function (res) {
        if (res.statusCode === 200) {
          _this.setData({
            filePath: res.tempFilePath,
          })
          _this.createNewImg();
        }
      }
    })
    
  }


问题出来了,本地上测试没问题,远程调试也没问题,可以生成图片保存到手机。

纳闷了一会之后,我发现自己没有后台添加download的下载域名。因为平时在本地的都是勾选了不检查域名。所以在这纳闷了很久!!!!!!!

 

总结:

小程序canvas不好控制,写样式时用rpx,canvas用px;

网络图片不显示(我用网络图片时,是不显示,不确定这个问题是我的操作问题还是小程序的限制,希望大佬们可以给我个肯定的结论)

要在微信后台设置downloand下载域名(我这里用了下载后绘制的方法,如果大家有不用下载的方法,望告知!谢谢)

来源:https://www.cnblogs.com/qiujun0324/archive/2018/07/12/9301420.html


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/923

关闭

微信小程序如何实现跳转到其它小程序的功能

微信小程序目前已经支持跳出到其它小程序了。但是前提是2个小程序必须被同一个公众号关联,如果没有关联则无法打开,下面就实现小程序之间相互跳转的步骤。

小程序横屏方案对比

随着小程序api开放的功能日渐增多,小程序可以做到的功能和展现形式也越来越多,其中横屏的展现形式就是其中的一种,而实现横屏的方案也有多种,但是每种方案都有一定的缺陷,恰巧最近也在横屏方案上踩了不少坑

微信小程序更新机制_微信小程序的2种更新方式

小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。

微信小程序开发注意指南和优化实践

转眼间已经参与过我厂好几个小程序的开发了,下面本妹子将开发中的那些注意点和各位小伙伴们分享下,妥妥的干货一枚。微信开发者工具不会对代码进行trim操作,如果代码中换行,页面也直接换行。

小程序开发注意事项_我的第一个小程序

业余时间学习了下小程序开发,整理一篇关于小程序开发需要注意的事项:后端接口域名必须使用https、不能直接进行dom节点操作、尽量使用es6的箭头函数、原生的组件层级是最高的等

微信小程序之程序、页面注册及生命周期

微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理

微信小程序框架推荐_分享好用的小程序前端开发框架

选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。

微信小程序开发早知道

小程序没有跳转公众号、跳转公众号图文素材的能力。除非用户通过扫描二维码进入小程序的情景,可以显示关注公众号组件。公众号菜单、公众号图文素材可以打开小程序,网页无法直接打开小程序。

微信小程序页面返回按键控制

今天在开发公司内部的小程序项目时,遇到了一个问题,就是控制手机返回按键的问题,本来我以为很快就可以解决的,没想到最后我用了快一天的时间,才给做好,而且还不是我最初想到的方法。

微信小程序开发中遇到的坑

开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!