小程序开发一系列问题汇总

1.用户授权弹框

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

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

在wxml这个页面写入button组件 重点是open-type="getUserInfo"  当你点击这个button的时候会弹出授权框

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("获取权限失败")
                  }
                }
              })
            }
          },
        })
      }
    })
  }

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