关于微信公众号前端H5Js-sdk图片的些许阻碍与解决

情景：公司项目《微信公众号开发》有功能为头像更换、因为是H5内嵌到公众号其实有两种开发方式
1、采用微信公众号内部的JS-Sdk方式开发
2、采用H5（移动端H5兼容性强的）方式开发
我最终还是想采用方案1开发功能 熟悉一下微信公众号的流程PS:之前没开发过微信公众号H5

首先是配置

关于微信公众号前后端都需要线上或者本地内网穿透（伪线上）开发
配置公众号里面的白名单，允许域名，可调用接口参数等等；

代码部分

以下尽可能以代码展示；

登录获取用户静默授权信息

// 通过该链接获取用户授权回调到业务页面进行授权后操作
// 授权分为两种基础授权、普通授权两种所获得的参数也是不相同的
// https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
// 获取回转code码后端进行获取access_token进行使用
// 执行其他逻辑...

20210430-PS: 回传链接前端需要转换不然回调失败问题颇多`encodeURIComponent(content)`转换成功后才能正确授权

详细叙述微信公众号Js-sdk调用

微信公众号JS-SDK的调用需要通过后端配合基础配置参数才可以调用

// 微信公众号H5单页面初次加载务必调用该接口配置当前wx基础Configure;
// 微信接口调用每次都会通过这个配置的参数去匹配是否是公众号内部参数
// 比较严格!
wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

涉及图片的接口。

chooseImage
previewImage
uploadImage
downloadImage
getLocalImgData

// 我只用了其中两个Api接口。
chooseImage
getLocalImgData

大概函数如下：

// change avatar.
handleOpenPreture(idx){
	// 1: 用户本地图片库. - getLocalImgData
	// 2: 用户相机. - chooseImage 去拍照
	let source = ['', 'album', 'camera'][idx]
	let _that = this
	wx.chooseImage({
		count: 1,
		sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
		sourceType: [source], // 可以指定来源是相册还是相机，默认二者都有
		success: function (res) {
			const { localIds } = res
			this.showPopup = false // 关闭选择头像方式
			if(localIds && Array.isArray(localIds) && localIds.length)
			_that.handleUploadImg(localIds[0])
		},
		error: function(err) {
			console.log('======> ?error? >', err);
		}
	});
},

// wx.getLocalImgs
handleUploadImg(localId){
    let _that = this
    wx.getLocalImgData({
        localId, // 图片的localID
        success: function (res) {
            const { localData } = res   // localData是图片的base64数据，可以用img标签显示
            let imageBase64 = '';
            if (localData.indexOf('data:image') == 0) {
                //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                imageBase64 = localData;
            } else {
                //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                imageBase64 = `data:image/jpeg;base64,${localData.replace(/\n/g, '')}`
            }
            let blobData = _that.base64ToBlob(imageBase64)
            // blobData 转换成功后进行接口提交
            _that.handlePostuploadImg(blobData)
        },
        error: function(err) {
            console.log('======> ??localImgData err  >', err);
        }
    });
},

// 图片上传
handlePostuploadImg(data) {
    console.log('======> ?data blob >', data, data.type);
    let suffix = data.type.split('/')
    suffix = suffix[1] || 'jpg'
    let formdata = new FormData()
    formdata.append('file', data)
    formdata.append('ext', suffix)
    uploadFile(formdata).then(res => {
        if(res.code === 1) {
            const { data } = res
            this.handleSaveUserAvatar(data)
        } else
            this.$toast(res.msg)
    })
},

handleSaveUserAvatar(v) {
    setAvatar({
        headImg: v
    }).then(res => {
        if(res.code === 1) {
            this.$toast('头像修改成功')
            this.showPopup = false
            this.$nextTick(() => {
                this.handleQueryLastUserInfo()
            })
        } else
            this.$toast(res.msg)
    })
},

// Base64 To Blo.
base64ToBlob(dataurl) {
    let arr = dataurl.split(',');
    let mime = arr[0].match(/:(.*?);/)[1];
    let bstr = atob(arr[1]);
    let n = bstr.length;
    let u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
},

补充

20210430

用Vue做公众号网页授权后跳转其他页面不做处理的话会存在location.href出现问题； 好像在其他的js-sdk请求就会报错， 所以在授权结束后需要清空location.search内容才会好。
查看资料看其他小哥都会预先存一个授权前的页面然后授权后重置。 个人觉得有些繁琐（我懒）
故而采用了比较方便快捷的操作去完成。

// example
// 错误链接
// http://xxx.xx/?code=xxxxx&state=123#/login
// ps: 当然链接即使这样我们还是可以获取到code的
// 把它调整正确在执行完逻辑要跳到另外页面的时候重跳链接即可

// 获取用户信息等
handleQueryUserInfo() {
    getUserInfo({}).then(res => {
        if(res.code == 1) {
            const { data: d } = res
            localStorage.setItem('userinfo', JSON.stringify(d))
            // this.$router.push('/')
            location.href = `${location.origin}/#/newrouter` // 跳转到渠道合作页面
        } else
            this.$toast(res.msg)
    })
},

总结一下就是微信获取先获取图片然后根据localId去提取这个图片的base64;再转换成blob格式再上传在保存该图片链接； 这个是我代码里面的逻辑；

参考了网上查找的文章。 链接付下。

参考文章

公众号 h5 页面 图片上传 wx.chooseImage使用

【微信公众号】微信公众号图片上传到阿里云OSS的三种方式：微信服务器，自家服务器，直传阿里云

js base64转blob