记录一次微信h5开发 使用js-sdk的过程（填异步串行的智商坑）

1. 安装jweixin-module这个包

npm install jweixin-module --save

2. 写一个单独的js文件来定义初始化配置及其他方法

// jwx.js
let jweixin = require('jweixin-module')
import { getSignature } from '@/api/index.js' // 从后端获取签名


export default {
    // 检测是否在微信浏览器内 
    isWechat: function() {
		var ua = window.navigator.userAgent.toLowerCase()
		if(ua.match(/micromessenger/i) == 'micromessenger') {
			return true
		}else{
			return false
		}
	},
    // 检测api是否可用 
    checkJsApi: function() {
		jweixin.checkJsApi({
			jsApiList: ['getLocalImgData'], // 需要检测的 JS 接口列表
			success: function(res) {
                console.log(res)
				// 以键值对的形式返回，可用的 api 值true，不可用为false
			}
		})
	},
    // 初始化配置
    initJssdk: function(callback) {
		//获取当前url然后传递给后台获取授权和签名信息
		getSignature().then(res => {
			//注入config权限配置
			jweixin.config({
				debug: false,
				appId: res.data.data.appId,
				timestamp: res.data.data.timestamp,
				nonceStr: res.data.data.nonceStr,
				signature: res.data.data.signature,
				jsApiList: ['getLocalImgData','chooseImage','checkJsApi']
			});
			if (callback) {
				callback(res.data);
			}
		})
	}
}

3. main.js全局引入

Vue.prototype.$jwx = jwx

4. ===================坑===================

主要是自己对程序的理解不够

这里我用的是wx.chooseImage选择相册及相机图片，会返回本地图片id列表，然后调用wx.getLocalImgData来获取本地图片的base64格式，最后转成文件对象，存到oss

- 原来的代码就是循环本地图片id列表 但是发现 选择一张图片可以 但选两张就不行了，会报错，于是我就想这个getLocalImgData有可能是异步的，于是使用这种递归方法去串行调用

syncUpload(localIds){
	let localId = localIds.pop()
	let _this = this
	_this.$jwx.getLocalImgData(localId).then(res1 => {
		uni.uploadFile({
			url: _this.$urls,
			file: res1,
			name: 'file', 
			success(res2) {
				// 业务代码
                if(localIds.length > 0) _this.syncUpload(localIds)
			}
		})
	})
}

5. 最后成功，成功的代价是 想到这个异步用了3个小时的时间（加上中午没睡觉）