1.用户授权弹框

小程序现在不支持刚进入就弹出用户授权框这个操作了  可以利用button组件实现授权弹框这个操作

button open-type="getUserInfo" bindgetuserinfo="GetUser"  

GetUser: function(e) {    //授权成功    if (e.detail.userInfo){      app.globalData.userInfo = e.detail.userInfo      this.setData({        userInfo: e.detail.userInfo,        hasUserInfo: true      });    }else{//授权失败         }      }

你可以在用户选择是否授权之后进行相应的处理 

友情提醒：如果用户选择不同意之后  可以再次提醒用户不同意的后果并进行再次授权

         wx.showModal({            title: '用户未授权',            content: '如需正常使用该小程序功能，请按确定并在授权管理中选中“用户信息”，然后点按确定。最后再重新进入小程序即可正常使用。',            showCancel: false,            success: function (resbtn) {              if (resbtn.confirm) {                wx.openSetting({                  success: function success(resopen) {                                     }                });              }            }          })

 2.分享给朋友

和授权弹框一样  都需要利用button组件

button open-type="share"/button

点击button进行分享  可以利用  onShareAppMessage 这个函数对分享的内容进行设置  如果不进行设置的话 默认分享的是当前页面  图片也是当前页面截图  标题是小程序的标题

onShareAppMessage: function (options) {    var shareObj = {      title: '你想设置的标题',      path: '/pages/index/index',      imgUrl: '../../images/index.jpg',      success: function () {        // 转发成功之后的回调        　　　　if (res.errMsg == 'shareAppMessage:ok') { }      },      fail: function () {        // 转发失败之后的回调        　　　　　　if (res.errMsg == 'shareAppMessage:fail cancel') {          　　　　　　　　// 用户取消转发        　　　　　　} else if (res.errMsg == 'shareAppMessage:fail') {          　　　　　　　　// 转发失败，其中 detail message 为详细失败信息        　　　　　　}      },      complete: function () {        // 转发结束之后的回调（转发成不成功都会执行）      }    };    // 返回shareObj    return shareObj;  }

3.根据填写数据生成图片并且保存图片分享朋友圈

既然要保存图片 就要用到画布 canvas 了

这里先强调一点

画布所在的区域 如果你想在上面定位一些生成图片不需要的元素的话(例如背景图用画布 上面一些按钮是wxml里面写死的定位元素)  会出现一个问题  

在开发者工具里面是完全没有问题的  但是在真机上你会发现你看不到定位的这些元素了 原因就是画布占据了这个区域 没有把它渲染出来 

解决方法 把 view 标签换成 cover-view  同理把  image 标签换成 cover-image   但是这些元素得放到 canvas/canvas里面

这里插个题外话  mode="widthFix"  这个属性  可以让图片根据宽度自动等比设置高度 不会让图片变形  不过前提是得设置宽度 一般都是 with:100%;

canvas canvas-id='shareCanvas'  cover-view/cover-view  cover-image mode="widthFix" src="../../images/save.png"/cover-image/canvas

 在画布上画任何一张图片的时候 它的路径必须是本地图片(目前我是这样认为的)  如果是网络图片的话 在开发者工具上可以显示 但是在真机上面图片显示不出来 也不知道是什么原因

例如 用户的头像链接 是个https格式的网络图片 我需要调用 wx.downloadFile 这个接口  它会返回这个图片的信息 宽度和高度 还有最重要的 这张图片的本地链接 res.tempFilePath  这个不论在开发工具还是真机上都是没有问题的 亲测有效

            wx.downloadFile({              url: app.globalData.userInfo.avatarUrl,              success: function (res) {                if (res.tempFilePath) {                  app.globalData.touxiang = res.tempFilePath                }              },              fail: function () {                app.globalData.touxiang = '../../images/touxiang.png'              }            })

 开始画图

    var rpx;    //获取屏幕宽度，获取自适应单位 以iphone6为标准    wx.getSystemInfo({      success: function (res) {        rpx = res.windowWidth / 375;      },    });   //选取画布 开始画图    const contex = wx.createCanvasContext('shareCanvas')    //底部背景图    contex.drawImage(this.data.background, 0, 0, 375 * rpx, this.data.backsize * rpx)    //顶部文字    contex.setTextAlign('center')    // 文字居中    contex.setFillStyle('#ffffff')  // 文字颜色：黑色    contex.setFontSize(18 * rpx)         // 文字字号：22px    contex.fillText("标题", 185 * rpx, this.data.title * rpx)    contex.stroke()    //logo背景图    contex.drawImage('../../images/resultLogo.png', 0, this.data.logo * rpx, 375 * rpx, 180 * rpx)    //用户头像    var avatarurl_width = 62 * rpx;    //绘制的头像宽度    var avatarurl_heigth = 62 * rpx;   //绘制的头像高度    var avatarurl_x = 153 * rpx;   //绘制的头像在画布上的位置    var avatarurl_y = this.data.touxiangImg * rpx;   //绘制的头像在画布上的位置    contex.save();    contex.beginPath(); //开始绘制    //先画个圆   前两个参数确定了圆心 （x,y） 坐标  第三个参数是圆的半径  四参数是绘图方向  默认是false，即顺时针    contex.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);    contex.clip();    //画好了圆 剪切  原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内 这也是我们要save上下文的原因    contex.drawImage(app.globalData.touxiang, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);    //contex.drawImage(app.globalData.userInfo.avatarUrl, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);    // 推进去图片，必须是https图片    contex.stroke()    contex.restore();    // 用户昵称    contex.setTextAlign('center')    // 文字居中    contex.setFillStyle('#000000')  // 文字颜色：黑色    contex.setFontSize(17 * rpx)         // 文字字号：22px    contex.fillText(this.data.name, 180 * rpx, this.data.username * rpx)    contex.stroke()       //底部小程序码    contex.drawImage('../../images/code.png', 255 * rpx, this.data.bottom * rpx, 75 * rpx, 75 * rpx)    contex.draw()

为了适配所有手机尺寸 而且画布写位置时只能写固定值  所以获取了屏幕宽度 以iphone6为标准 所有px都乘以 rpx

根据自己的项目进行画图 上面仅供参考

保存图片到相册

save: function () {    wx.canvasToTempFilePath({      canvasId: 'shareCanvas',      success: res = {        wx.saveImageToPhotosAlbum({          filePath: res.tempFilePath,          success: res = {            wx.showToast({              title: '已保存到相册'            })          },          fail: function (res) {            if (res.errMsg === "saveImageToPhotosAlbum:fail:auth denied") {              //console.log("打开设置窗口");              wx.openSetting({                success(settingdata) {                  //console.log(settingdata)                  if (settingdata.authSetting["scope.writePhotosAlbum"]) {                    //console.log("获取权限成功，再次点击图片保存到相册")                  } else {                    //console.log("获取权限失败")                  }                }              })            }          },        })      }    })  }

保存到相册的时候会弹出授权框  如果用户拒绝的话 有一个授权失败的回调函数可以做一些处理