微信小程序之分享朋友圈

有朋自远方来，不亦悦乎

近日接到大佬任务，要在小程序中新加分享朋友圈功能，可是微信小程序官方是禁止分享朋友圈的，并且程序中有分享朋友圈相关文字都过不了审。

既然没有直接的api，那咱们就迂回一下，目前通用的小程序分享朋友圈功能，都是生成一张带有小程序二维码的图片保存到相册，提示用户使用改图片发朋友圈

所以问题来了，如何保存一张带有小程序二维码的图片保存到相册呢

• 保存到相册授权
  保存到相册需要用户授权才行，下面是我的代码
  注意在button标签加上open-type属性，否则手机可能无法弹出授权框，调试工具不会体现出来
  这里的open-type使用的是变量，主要是在用户拒绝授权时，再次点击跳入权限设置页，客官也可自行决定拒绝授权的方案

// wxml
  <button bindtap="getAuthSetting" open-type="{{openType}}"]>保存截图</button>

// js
  getAuthSetting() {
        let that = this
        wx.getSetting({
            success(res) {
                // 有则直接保存
                if (res.authSetting['scope.writePhotosAlbum']) {
                    that.saveImage()
                } else {
                    // 如果没有则获取授权
                    wx.authorize({
                        scope: 'scope.writePhotosAlbum',
                        success() {
                            that.saveImage()
                        },
                        fail() {
                            // 如果用户拒绝过或没有授权，则再次打开授权窗口
                            // （ps：微信api又改了现在只能通过button才能打开授权设置，以前通过openSet就可打开）
                            that.setData({
                                openType: 'openSetting'
                            })
                        }
                    })
                }
            }
        })
    },

• canvas画图
  使用微信的cancas组件，注意保证canvas-id的唯一
  我这里需要用到echart的雷达图，所以我用的echarts-for-weixin，有需要的可以去git看看，使用很方便
  https://github.com/ecomfe/echarts-for-weixin
  绘图代码省略，任君肆意挥洒

• 导出canvas并且保存至相册
  导出canvas与h5的canvas不一样，需要调用wx.canvasToTempFilePath(options, this)
  这个api需要注意第二个参数，this指向canvas所在组件，否则调用失败
  下面代码中导出的canvas是引入echart生成的子组件，大家自己用的时候注意options中的canvasId，和this参数的值，切勿盲目复制粘贴
  保存至相册需调用wx.saveImageToPhotosAlbum

// 导出echart图
let child = this.selectComponent('#mychart-dom-bar')

wx.canvasToTempFilePath({
    x: 0,
    y: 0,
    width: 345,
    height: 800,
    destWidth: 690, // 像素宽度，一般是canvas宽的2或4倍，保存出来的图片才不会模糊
    destHeight: 1600, // 像素高度，一般是canvas高的2或4倍，保存出来的图片才不会模糊
    canvasId: 'mychart',
    success: function (res) {
        let tempFilePath = res.tempFilePath
        wx.saveImageToPhotosAlbum({
            filePath: tempFilePath,
            success() {
                wx.showToast({
                    title: '保存成功'
                })
            },
            fail() {
                wx.showToast({
                    title: '保存失败',
                    icon: 'none'
                })
            }
        })
        wx.hideToast()
    },
    fail: function (err) {
        console.log(err)
    }
}, child)

OK，大功告成
奉上微信小程序api一份，供君参考
https://developers.weixin.qq.com/miniprogram/dev/api/

愿君奔跑千里，归来依旧少年