微信公众号H5端网页分享微信好友-实现思路(踩坑记录总结)

F2E_zeke

已于 2024-04-21 17:45:32 修改

阅读量1.4k

点赞数 2

分类专栏： JavaScript Uniapp 文章标签：微信 javascript uni-app

于 2023-04-20 17:33:52 首次发布

本文链接：https://blog.csdn.net/rd_xiaobai/article/details/130270906

版权

JavaScript 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

Uniapp

7 篇文章 1 订阅

订阅专栏

第三方配置就不说了，按着官方文档来就可以了
H5端微信分享使用JS-SDK
详情请查看JS-SDK说明文档

第一个坑

在进行接口鉴权时需要签名等参数，签名等参数需要调用后端接口返回。需要注意的是：调用接口需要一个参数就是页面路径地址(url参数,我这边页面路径用url作为入参，具体看后端拿什么字段作为入参字段)。
区分俩种情况：

IOS端
微信IOS版，每次切换路由，SPA的url是不会变的，发起签名请求的url参数必须是最初进入页面时的url
Android端
微信安卓版，每次切换路由，SPA的url是会变的，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)

/** 这段代码写在App.vue的onLaunch生命周期中(在获取签名时_SYSTEM_AUTHURL会用到)
 * 定义全局第一次进入的页面地址，否则iOS端微信JSSDK授权会一直报invalid signature签名失效的错误
 * IOS：微信IOS版，微信安卓版，每次切换路由，SPA的url是不会变的，发起签名请求的url参数必须是最初进入页面时的url
 * Android：微信安卓版，每次切换路由，SPA的url是会变的，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)
 * */
let authUrl = window.location.href.split('#')[0];
uni.setStorageSync('_SYSTEM_AUTHURL', authUrl);

第二个坑

updateAppMessageShareData的link参数，分享链接的地址上有带中文的参数(中文参数值会被干掉)，安卓上分享是可以正常分享，但是在IOS上会出现报错，导致你分享标题、描述、图片等都失效了：
在这里插入图片描述

只要把分享链接先 encodeURIComponent转码就可以了。
例如：

// 分享的链接link
"https://www.xxx.com/test?&eid=1&name=名字"
// 改成
"https://www.xxx.com/test?&eid=1&name="+encodeURIComponent("名字")

updateAppMessageShareData示例：

// jweixin 是引入的微信sdk.js文件
jweixin.updateAppMessageShareData({
    title: '', // 分享标题
    desc: '的哈加快速度好看\r\n的时间里将埃里克', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: '', // 分享图标(我这里是oss的图片全路径)
	success: res => {
		console.log('成功', res);
	},
	error: err => {
		console.log('失败', err);
	},
	cancel: can => {
		console.log('取消', can);
	}
})

小技巧

对于描述要实现多行显示的话：
只需要在updateAppMessageShareData的分享描述desc值，需要换行的地方拼接上一个’\r\n’。
title标题和desc描述文字过长时，会自动显示’…’

实现思路

先创建一个公共js文件wxsdk.js：
a.引入官方文档的微信sdk文件
b.引入获取签名的api接口文件
c.引入store仓库index.js文件
wesdk.js文件里大致执行顺序是：
getWxConfig里面先调用isWechat 判断当前环境是否是微信内置浏览器
后调用shareAppMessage分享的方法，并将分享的配置信息传过去(定制情况下)，非定制情况下(这里传的是应用首页路径)

import jweixin from '@/js_sdk/jweixin-module/index.js';
import { getWxOptions } from '@/util/api/weixin.js'
import store from "@/store"
//判断是否在微信中  
const isWechat = function() {
	var ua = window.navigator.userAgent.toLowerCase();
	if (ua.match(/micromessenger/i) == 'micromessenger') {
		return true;
	} else {
		return false;
	}
};
//获取微信JSSDK授权
const getWxConfig = function(shareLink) {
	let share = shareLink ? shareLink : '/pages/home/index?status=phi&hospitalId=' + store.getters.domainInfo.hospitalId
	var that = this;
	if (!that.isWechat()) {
		// '/pages/error/wechat'这个是警告页面提示请在微信内打开(防止将页面地址复制在手机浏览器打开)
		return uni.reLaunch({
			url: '/pages/error/wechat'
		})
	}
	let u = navigator.userAgent;
	let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	// 判断是否拿微信开发者工具打开，是的话不能走 window.entryUrl，否则sdk授权不成功
	if (u.indexOf('wechatdevtools') > -1) {
		isiOS = false
	}
	let pageUrl = '';
	if (isiOS) {
		pageUrl = uni.getStorageSync('_SYSTEM_AUTHURL');
	}else {
		pageUrl = window.location.href.split('#')[0];
	}
	let hospitalId = uni.getStorageSync('_SYSTEM_HOSPITALID');
	// 判断是否合作机构  请求不同授权接口
	getWxOptions({
		partnersCode: uni.getStorageSync('_PARTNER_CODE'),
		url: pageUrl,
		hospitalId
	}).then(res => {
		jweixin.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: res.data.appid, // 必填，公众号的唯一标识
			timestamp: res.data.timestamp, // 必填，生成签名的时间戳，由开发者生成的当前时间戳
			nonceStr: res.data.nonceStr, // 必填，生成签名的随机串，由开发者随机生成
			signature: res.data.signature, // 必填，签名
			// 必填，需要使用的JS接口列表
			jsApiList: [
				'checkJsApi',
				'openLocation',
				'chooseImage',
				'openAddress',
				'chooseWXPay',
				'updateAppMessageShareData',
				'updateTimelineShareData',
				'getLocalImgData',
				'uploadImage',
				'hideMenuItems'
			]
		})
		jweixin.ready(() => {
			/**
			 * config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
			 * 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
			 */
			//分享给朋友接口--如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行
			// jweixin.updateAppMessageShareData('相关参数');
			setTimeout(function() {
				that.shareAppMessage(share);
			}, 100);
			//分享到朋友圈接口--如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行
			// jweixin.updateTimelineShareData('相关参数');
			
			// [生产环境] 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有 menu 项见附录3
			// https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
			if (process.uniEnv.ENV == 'prod') {
				jweixin.hideMenuItems({
					menuList: ['menuItem:copyUrl']
				});
			}
		});
		jweixin.error(err => {
			console.log(err, '接口验证失败');
		});
	})
};
// 分享页面
const shareAppMessage = function(shareParams) {
	let customizationShare = typeof shareParams == 'object' ? true : false;
	let shareContent = {
		title: '',
		desc: '',
		link: '',
		imgUrl: ''
	};
	if(customizationShare) {
		// 定制分享内容
		shareContent.title = shareParams.title;
		shareContent.desc = shareParams.desc;
		shareContent.link = store.getters.domainInfo.host + process.uniEnv.BASE_DIST + shareParams.link;
		shareContent.imgUrl = process.uniEnv.BASE_FILEURL + '/' + shareParams.imgUrl;
	}else {
		// 这里拿的是store仓库中默认的分享内容
		shareContent.title = store.getters.domainInfo.htmlAbbreviation + sTitle;
		shareContent.desc = store.getters.domainInfo.shareText;
		shareContent.link = store.getters.domainInfo.host + process.uniEnv.BASE_DIST + '/pages/home/index?status=phi&hospitalId=' + store.getters.domainInfo.hospitalId;
		shareContent.imgUrl = process.uniEnv.BASE_FILEURL + '/' + store.getters.domainInfo.logo;
	};
	jweixin.updateAppMessageShareData({
	    title: shareContent.title, // 分享标题
	    desc: shareContent.desc, // 分享描述
	    link: shareContent.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
	    imgUrl: shareContent.imgUrl, // 分享图标
		success: res => {
			console.log('成功', res);
		},
		error: err => {
			console.log('失败', err);
		},
		cancel: can => {
			console.log('取消', can);
		}
	})
}

在store仓库中initsdk.js文件中写初始化sdk方法：

import getters from '../getters.js';
import wxopt from '@/util/plugins/wxsdk.js'
const payment = {
	state: {
		// 微信sdk 页面中通过Getter获取
		wxsdk: null,
	},
	actions: {
		// 初始化微信SDK
		init_wxsdk({ commit, state, getters }, shareParams ) {
			let link;
			if(shareParams) {
				shareParams.link = shareParams.link + '&hospitalId=' + getters.domainInfo.hospitalId;
				link = shareParams;
			}else {
				link = '/pages/home/index?status=phi&hospitalId=' + getters.domainInfo.hospitalId;
			};
			// 通过config接口注入权限验证配置
			state.wxsdk = wxopt;
			state.wxsdk.getWxConfig(link); // 配置授权
		}
	}
}
export default payment

在App.vue的onLaunch生命周期中接着第一个坑示例代码后面写上初始化微信sdk方法，走默认分享内容

import { mapActions, mapGetters } from 'vuex';
onLaunch: function(options) {
	let authUrl = window.location.href.split('#')[0];
	uni.setStorageSync('_SYSTEM_AUTHURL', authUrl);
	// 写上初始化sdk方法
	this.init_wxsdk();
}
// 还需要在methods生命周期中写上
methods: {
	...mapActions(["init_wxsdk"])
}

在需要实现定制分享的页面中：

import { mapActions, mapGetters } from 'vuex';
onLoad(options) {
	// 走定制分享内容
	let shareParam = {
		title: this.details.fullName + ' ' + this.details.titleValue || this.details.role,
		desc: hospitalName + ' ' + this.deptName + '\r\n' + beGoodAt,
		link: nowPagesPath,
		imgUrl: img
	};
	this.init_wxsdk(shareParam);
	// 走默认分享内容
	this.init_wxsdk();
}
// 还需要在methods生命周期中写上
methods: {
	...mapActions(["init_wxsdk"])
}