• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

小程序分享朋友圈

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

相比分享好友和群聊,分享朋友圈是比较麻烦的。那么下面就是分享朋友圈的实现方式了:

第一步:一个触发按钮,点击跳转到指定页面:

<button class='shareFri' bindtap='onShareFriends'>发给群聊或好友</button>
onShareFriends:function(){   
wx.navigateTo({
 url: '../shareFriends/shareFriends?imgurl=' + imgurl + '&nowrmb=' + nowrmb,//可根据实际情况传指定的参数去新页面
 })
}

第二步:用canvas画指定的图文

<canvas style="width: 300px; height: 200px;" canvas-></canvas>
 drawCanvas: function (e) {
    // 使用 wx.createContext 获取绘图上下文 context
    var context = wx.createCanvasContext('firstCanvas')
 context.drawImage(图片地址, 0, 0, 150, 100)//画图片和小程序码
    context.setStrokeStyle("#00ff00")
    context.setLineWidth(5)
    context.rect(0, 0, 200, 200)
    context.stroke()
    context.setStrokeStyle("#ff0000")
    context.setLineWidth(2)
    context.moveTo(160, 100)
    context.arc(100, 100, 60, 0, 2 * Math.PI, true)
    context.moveTo(140, 100)
    context.arc(100, 100, 40, 0, Math.PI, false)
    context.moveTo(85, 80)
    context.arc(80, 80, 5, 0, 2 * Math.PI, true)
    context.moveTo(125, 80)
    context.arc(120, 80, 5, 0, 2 * Math.PI, true)
    context.stroke()
    context.draw()
  },
 onload:function(){
    this.drawCanvas()
 }

 注意:这里的小程序码是后台返回的,后台会返回小程序码的图片地址给我们;如果是前端自己生成小程序码,

就需要调用https://developers.weixin.qq.com/miniprogram/dev/api/qrcode.html,地址里面有三种方式,
第一种和三种简单,第二种需要用到scene参数,这个参数在onload中的options里面可以接受;
我个人不建议前端生成小程序码,因为我试过了,通过上面地址的接口返回的小程序码是乱码,需要解析,
而我试过Blob、ArrayBuffer、FileReader等方法,开发者工具支持,而手机显示有问题,最后经过很多测试,
还是决定后台来生成小程序码

第三步:将画好的canvas转为图片

wx.canvasToTempFilePath({
  x: 100,
  y: 200,
  width: 50,
  height: 50,
  destWidth: 100,
  destHeight: 100,
  canvasId: 'myCanvas',
  success: function(res) {
    console.log(res.tempFilePath)//转化成的图片地址
  } 
})

 第四步:预览图片

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})
第五步:将图片保存到相册
wx.saveImageToPhotosAlbum({
 filePath: tempFilePath,
 success(res) {
 wx.showModal({
 title: '图片成功保存到相册了,去发圈噻~',
 success: function (res) {
 wx.navigateBack() //保存成功后跳回前一个页面
 }
 })
 }
 })

大概实现过程就是如此,不过这个中有很多坑,下面我就来说一下实现这个过程中的坑有哪些。




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
【小程序】获取自定义属性发布时间:2022-07-18
下一篇:
微信小程序生命周期时间钩子解释发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap