uniapp h5项目实现微信内分享以及排坑ios分享获取不到缩略图和描述的bug

uniapp h5项目实现微信内分享

翘翘红

2682人浏览 · 2023-06-05 09:49:50

翘翘红 · 2023-06-05 09:49:50 发布

✅ 背景：uniapp框架搭建的h5项目，部署之后需要在微信环境打开以及自定义分享内容，微信打开分享分为1、链接直接打开，此时做了分享配置也不会分享成功，是因为微信机制，什么类型的链接分享出来就是什么链接；2、app内分享出来的链接在微信内打开进行二次分享

✅ 实现：使用微信的分享js-sdk：jweixin-module

✅ 步骤：

☞ 1、安装微信JS-SDK

npm i jweixin-module

☞ 2、由于多个页面需要配置分享，所以将微信写成一个公共方法，供页面调用，博主这里将微信配置的方法放在util.js中

//引入sdk，只在h5的环境下引入，以防止包过大影响性能
// #ifdef H5
var jweixin = require('jweixin-module');
// #endif

setWeixinShare(title, desc, imgUrl) {
	const _this = this;
	if (_this.isWeixin()) {
		const url = window.location.href;
		// 页面没有传分享缩略图时设置默认的分享缩略图，此处shareImg可改成您需要的
		const shareImg = window.location.origin + CONFIG.INFO.IMG_PATH + 'logo.png';
		_this.getJsApiData(['updateAppMessageShareData','updateTimelineShareData',() => {
			jweixin.updateAppMessageShareData({
				title: title,
				// CONFIG.INFO.SHARE_DESC为页面描述没有时设置默认的描述，可改成您需要的
				desc: _this.validatenull(desc) ? CONFIG.INFO.SHARE_DESC : desc, // 分享描述
				link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
				imgUrl: _this.validatenull(imgUrl) ? shareImg : imgUrl, // 分享图标
				success: res => {
					console.log("res11: ", res);
				},
				fail: err => {
					console.error("err22: ", err);
				}
			}),
			jweixin.updateTimelineShareData({
				title: title, // 分享标题
				link: url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
				imgUrl: _this.validatenull(imgUrl) ? shareImg : imgUrl, // 分享图标
				success: res => {
					console.log("res33: ", res);
				},
				fail: err => {
					console.error("err44: ", err);
				},
			})
		})
	} else {
		return false;
	}
},

// 获取分享配置签名，此处一般都是后端去调微信的接口，前端再调后端的接口获取
getJsApiData(jsApiList, readyFc) {
	const _this = this;
	const url = window.location.href;
	// 接口地址和请求参数改为您需要的
	_this.getAPIData('https://web.cdmp.candocloud.cn/api/wechat/getconfig', 'GET', {
		account: 'gh_d08583fe3034', // 微信公众号账号，以gh_开头的
		url: url
	}, res => {
		// 由于博主这里后端返回的一整个字符串，所以需要二次重组获得，可忽略
		const str = res.data;
		const appId = str.substring(_this.findStr(str, '"', 2) + 1, _this.findStr(str,
			'"', 3));
		const timestamp = str.substring(_this.findStr(str, ':', 1) + 1, _this.findStr(
			str, ',', 1));
		let nonceStr = str.substring(_this.findStr(str, '"', 8) + 1, _this.findStr(str,
			'"', 9));
		let signature = str.substring(_this.findStr(str, '"', 12) + 1, _this.findStr(
			str, '"', 13));
		jweixin.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印
			appId: appId, // 必填，公众号的唯一标识
			timestamp: timestamp, // 必填，生成签名的时间戳
			nonceStr: nonceStr, // 必填，生成签名的随机串
			signature: signature, // 必填，签名
			jsApiList: jsApiList // 必填，需要使用的 JS 接口列表
		});
		jweixin.ready(() => {
			// 将成功的函数返回
			readyFc();
		});
		jweixin.error((e) => {
			//_this.showToast(e || '分享失败');
			console.log(e, '失败信息')
		})
	}, err => {
		console.error('接口请求失败', err);
	});
},

// 判断是否是微信浏览器，只在微信浏览器调用分享配置
isWeixin() {
	const ua = navigator.userAgent.toLowerCase();
	if (ua.match(/MicroMessenger/i) == 'micromessenger') {
		return true;
	} else {
		return false;
	}
},

// 判断页面传递的参数是否为空
validatenull: function(val) {
	if (typeof val === 'boolean') {
		return false
	}
	if (typeof val === 'number') {
		return false
	}
	if (val instanceof Array) {
		if (val.length === 0) return true
	} else if (val instanceof Object) {
		if (JSON.stringify(val) === '{}') return true
	} else {
		if (val === 'null' || val == null || val === 'undefined' || val === undefined || val === '')
			return true
		return false
	}
	return false
},

// 通过指定字符串的位置截取字符串，不需要这步操作可忽略
findStr(str, cha, num) {
	var x = str.indexOf(cha);
	for (var i = 0; i < num; i++) {
		x = str.indexOf(cha, x + 1);
	}
	return x;
}

☞ 3、在需要配置分享的页面调用，此处一般都是在接口返回了标题描述缩略图之后再调用，此处博主已经在main.js将util中的方法挂载到全局，所以直接使用this.$util.setWeixinShare即可调用成功，如果您没有将方法挂载到全局，那么还需要再页面引入之后再调用，这里不做赘述

// #ifdef H5
// name,description,logo为接口返回的数据，自行定义
this.$util.setWeixinShare(name,description,logo);
// #endif

✅ 结束：至此，整个uniapp开发的h5项目微信内二次分享已完结，如果分享没有问题那么就不需要再浏览下面的代码了，不过博主这里却分享失败了，经过多次测试才发现，在ios系统下，由于微信网页内部机制，进入的链接如果携带了特殊字符的参数，会获取不到缩略图和描述导致分享失败，是因为微信内部会将链接进行一次重组/编码，导致链接和分享链接不一致，所以需要在路由进去前进行拦截，手动重定向一次路由

// 引入util.js，以使用util中的方法
import util from '@/common/util.js'

// 在路由前拦截重定向地址，以修复ios下分享失败，安卓没问题
router.beforeEach((to, from, next) => {
	let url = window.location.href;
	let needr = false;
	// 此处重定向的判断逻辑可自行修改为你想要的
	const array = url.match(/app_id/g);
	const count = array ? array.length : 0;
	if (count > 1 && !(url.indexOf('/loginOnlyApp?') > -1)) {
		url = url.replace(/app_id.*?&/, '');
		needr = true;
	}
	// 如果存在特殊字符串;;，需要重定向
	if (url.indexOf(';;') > -1) {
		url = url.replace(';;', '%3B%3B');
		needr = true;
	}
	// 微信环境以及ios系统下存在uuid=字符串，则将uuid=替换为uid=，此处可根据实际情况进行删除
	if (util.isWeixin() && util.iOS() && url.indexOf('uuid=') > -1) {
		url = url.replace('uuid=', 'uid=');
		needr = true;
	}
	if(needr){
		// 重定向地址
		window.location.replace(url);
	}
	next();
});