微信的小程序是没有分享到朋友圈的功能的。小程序目前只能分享到群里或者发给好友。但是业务需要方便推广,需要分享到朋友圈。
经过度娘后,得出了以下思路:利用小程序canvas绘制图片,将背景图和二维码绘制成一张图片。百度过几个好的demo,参考了一下,本以为会很简单就解决这个问题,然而这个并不是小程序canvas的难点!
WXML
<view> <canvas canvas-id="myCanvas"/> <image src='{{imagePath}}'></image> </view> <button bindtap='createSharePic'>生成朋友圈分享图</button>
绘制长按识别二维码
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
开发小程序的过程中踩的坑不可谓不多,而有些坑也实在是让人郁闷,不扒一扒难以平我心头之愤呐。
小程序的启动方式:冷启动和热启动,小程序冷启动时,会检查小程序是否有最新版本。如果有则将异步下载最新版本,但是仍将运行当前版本等到下一次冷启动时再运行最新版本。
最近在做小程序开发的时候,发现小程序老是报Do not have xxx handler in current page... 惊不惊喜,意不意外,这是什么原因引起的呢?下面就整排查错误的解决办法。
微信小程序-微信小程序可以通过API获取当前位置的经纬度,在微信小程序开发文档中可以找到这个API的使用示例,但是需要获取具体地址就需要使用到外部的API(此处用到的是腾讯的位置服务)
选择优秀的框架,能帮助我们节省开发时间,提高代码重用性,让开发变得更简单。下面就整理关于微信小程序的前端框架,推荐给大家。
小程序开放至今,许多公司企业已经开发出了自己的小程序。这篇文章主要整理分享:微信小程序UI组件、开发框架、实用库、开发工具、服务端、Demo等
这篇文章主要讲解微信小程序如何实现 侧边栏滑动 功能 ,首先实现的思路为:wxml页面结构分为2层:侧边栏菜单、正文部分;正文部分监听touchstart、touchmove、touchend触摸事件
微信小程序生命周期函数:onLoad: 页面加载。onShow: 页面显示每次打开页面都会调用一次。onReady: 页面初次渲染完成,onHide: 页面隐藏,onUnload: 页面卸载。在小程序中所有页面的路由全部由框架进行管理
三种办法实现小程序的动画效果: 每帧setData()、使用Animation实现旋转效果、使用keyfreams。在wxss中通过控制transform组件的属性,来实现旋转效果,我也是采用的这种方式,性能上面提示非常多
在小程序进行socket链接的时候发现:在1.7.0版本之前,一个微信小程序同时只能有一个 WebSocket 连接,而且在连接socket的时候,发现在还没有进行subscribe的情况下,就直接进行了广播,并且自动关闭了socket连接。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!