H5项目中使用微信JS-SDK（以H5项目批量上传图片为例，兼容IOS及安卓）

H5项目中使用微信图片上传相关sdk，主要用于解决 1.安卓手机无法一次选择多张图片进行上传问题；2.控制IOS系统手机一次可无限量选择图片上传的问题

一、准备工作：公众号配置

验证所需使用的sdk是否符合需求

可在使用场景中，打开微信官方提供的微信SDKDemo 链接，或企业微信官方提供的企业微信SDKDemo 链接。选择相应的接口demo，若符合需求，可进行后续开发，若不符合则需寻找其他方法。

2.配置微信公众号

微信公众平台需管理员或长期运营者扫码登录，长期运营者，可在人员设置中进行配置

（1）添加js接口安全域名

在公众号设置中配置js接口安全域名，在设置弹窗中添加项目域名，并下载弹窗中超链接的文件，将文件放在前端项目服务器中，放在项目所在的文件夹。注意，JS接口安全域名只能添加5个域名且每月只能编辑5次，操作需要谨慎。

（2）配置IP白名单

开发者密码(AppSecret) 这个数据后台需要用到，若不知道开发者密码，可进行重置后获取。

IP白名单弹窗中添加项目ip地址，若不清楚项目IP可参考 jxjtyedu 公众号的白名单，该公众号配置的IP白名单基本涉及公司所有项目IP。IP白名单数量不限，修改次数不限，但IP不可重复。

二、前端开发

1.安装插件并配置sdk文件

（1）安装微信SDK插件

npm install weixin-js-sdk

（2）封装wxSdk文件

在utils 文件夹中添加 weChatSdk.ts文件

import wx from'weixin-js-sdk'
import axios from "axios";
import { globalurl } from "./global";
const env = import.meta.env;
let action = ''
switch (env.MODE) {
  case "development":
    action = globalurl.development;
  	break;
  case "test":
  	action = globalurl.test;
  	break;
  case "production":
  	action = globalurl.production;
  	break;
}
const wxconfig = async () =>{
	const url = encodeURIComponent(window.location.href.split('#')[0]);
	axios.get(`${action}print/printCommon/getJsapiInit?url=${url}`).then((result) =>{ // 接口获取配置参数
  	const {data} = result.data
		wx.config({
    	debug: true,// 开启调试模式,调用的所有api的返回值会在客户alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
			appId: data.appId,
			timestamp: data.timeStamp,
			nonceStr: data.nonceStr,
			signature: data.signature,
			jsApiList:[ // 必填，需要使用的JS接口列表
				"chooseImage",
				"getNetworkType",
				"uploadImage",
				"downloadImage",
				"getLocalImgData"
    	]
  	})
	})
}
export default wxconfig;

微信所有js接口列表地址

（3）注入权限验证配置

若项目为hash模式，则只需在app.vue文件引入weChatSdk.ts 中wxconfig方法，并在mounted时调用即可在项目任意页面使用微信js接口

若项目为history模式，则推荐在所需使用微信js接口的页面引入wxconfig方法并调用

2.批量上传图片（以下代码暂未测试，请勿使用，近期内会进行测试，测试完成后会再次编辑）

// 选择图片 拍照或从手机相册中选图接口
const chooseImg = (index, type) => {
	wx.ready(() => {
		wx.chooseImage({
			count: 9，// 每次可选图片数量 默认9
			sizeType: ['original",]，// 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album，camera']，// 可以指定来源是相册还是相机，默认二者都有
			success: function (res) {
				let locaIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img的src属性显示图片,但IOS WKWebview 不支持 localId 直接显示图片
				// 获取本地图片 此接口仅在 IOS WKWebview 下提供，用于兼容 IOS wKWebview 不支持 localId 直接显示图片的问题
				localIds.map(item => {
					getLocalImg(item)
      	})
    	}
  	})
	})
}

// 获取本地图片
const getLocalImg = (localId) => {
	wx.ready(() => {
		wx.getLocalImgData({
			localId: localId，// 图片的localID
			success: function (res) [
				let localData = res.localData; // localData是图片的base64数据，可以用 img 标签显示
				// 部分浏览器获取的返回值不是标准的base64格式，判断获取到的图片数据是否有base64头部
				if (localData.indexOf('data:image') != 0) {
					// 判断是否有这样的头部
					localData = 'data:image/jpeg;base64,' + localData
      	}
				localData = localData.replace(/\r/\n/g,).replace('data:image/jgp','data:image/jpeg')
				// 第一个替换的是换行符，第二个替换的是图片类型，因为在IOS机上测试时看到它的图片类型时jgp，为了兼容其他设备就把它转为jpeg
				// 将图片由base64转为binary后上传
				handleUpload(convertFile(localData))
      }
  	})
	})
}

// base64 转binary
const convertFile = base64 => {
	let fileArray = base64.split(','),
  	//过滤出文件类型
  	fileType = fileArray[0].match(/:(.*?);/)[1],
  	//atob 是对经过 base-64 编码的字符串进行解码
  	bstr = atob(fileArray[1]),
  	n = bstr.length,
  	//Uint8Array 数组类型表示一个 8 位无符号整型数组
  	u8arr = new Uint8Array(n)
	while (n--) {
		// 返回字符串n个字符的 Unicode 编码
		u8arr[n] = bstr.charCodeAt(n)
	}
	//return new Blob([u8arr]，[ type: fileType 3)
	return new File([u8arr]，'文件名'，{ type: fileType })
}

// file 上传
const handleUpload = async (file) => {
	// 上传至服务器代码
}

H5项目中使用微信JS-SDK（以H5项目批量上传图片为例，兼容IOS及安卓）

猜你喜欢