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

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

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

发表于 2018-09-28 14:49 luffyc 阅读(428) 评论(0) 编辑收藏举报

刷新页面返回顶部