小程序开发日志

小程序开发日志

最近开发了一个新的小程序,可能之前还没有开发过吧,所以开发的页面不是很多,但时间用来也挺久,功能主要包括,用户授权登陆,浏览上传图片和支付功能,闲来之余记录开发历史

1.用户授权登陆

这里可能会踩的坑就是,微信审核小程序代码的要求就是用户必须在了解体验小程序功能后才能让用户授权登陆,不可刚进入小程序就强制用户授权登陆.

授权登陆按钮触发

<button open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>

用户点击按钮后首先会触发弹框,提示用户授权登陆

用户点击授权后,开发者可以从bindGetUserInfo回调中获取用户信息包括

然后可以通过调用wx.login 方法获取用户code数据,然后需要根据appid和密钥以及code获取用户openid

wx.login({
  success (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: '',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

2,上传照片以及预览功能

如果是小程序页面需要上传照片以及预览功能那就比较简单,如果是小程序内嵌的h5页面需要调用微信的上传图片和预览功能,则比较麻烦一点

小程序页面可以直接调用wx.chooseImage方法上传图片

wx.chooseImage({
  count: 1,//最多可以选择的图片张数,默认值为9
  sizeType: ['original', 'compressed'],//所选的图片的尺寸
  sourceType: ['album', 'camera'],//选择图片的来源,
  success (res) {
    // tempFilePath可以作为img标签的src属性显示图片
    const tempFilePaths = res.tempFilePaths;
    //将图片转换成base64,
    let localData = wx.getFileSystemManager().readFileSync(localIds, "base64")
  }
})

调用chooseImage后success回调函数里resp是:

剩下的下次再写了