Uniapp打包H5端实现微信分享好友、微信朋友圈

最新推荐文章于 2025-06-26 15:28:12 发布

原创最新推荐文章于 2025-06-26 15:28:12 发布 · 2.6k 阅读

14 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #H5端/公众号微信分享

Uniapp 专栏收录该内容

3 篇文章

订阅专栏

一.需求

使用Uniapp框架打包的H5端项目，在微信浏览器中（通过公众号或将H5地址收藏后通过收藏）打开，需要实现分享功能（通过点击微信右上角按钮） & 分享后的页面依旧可以被多次次分享；
注意：实现该功能最重要的是对细节的把握，将每一个细节弄清楚则这个需求就比较容易，反之，存在卡点；
效果图-参考uniapp H5端设置分享卡片中取的截图

二.细节问题

2.1.微信公众平台

打开微信公众平台，以公众号的方式进行登录
配置1：在“【设置与开发】 —> 【账号设置】 —> 【功能设置】 —> 【JS接口安全域名】”中设置；
配置2（这个配置个人不确定是否一定要配置，因为自己没有公众号的登录权限，当时没有将IP删除进行实践，但最好也配置上）：在【设置与开发】→【开发接口管理】→【基本配置】→【IP白名单】填写自己服务器的IP；

2.2.签名问题

一定要让后台进行检查，确保签名逻辑的正确性。签名相关的会在下方实现方案中具体提及；
检验签名正确性的地址-微信 JS 接口签名校验工具；

2.3.Ios跟Android传递参数的差异

具体细节在下方实现方案中提及；

2.4.测试环节

建议方案：将H5的链接通过微信进行收藏，然后通过收藏来打开；

三.实现方案（代码环节）

3.1.引入微信JS-SDK

在Uniapp的项目中添加：npm i weixin-js-sdk

3.2.封装一个js类（如：wechatH5Share.js）

// 方法一：判断当前web浏览器是否是微信环境
function isWeChatBrowser() {
	// 获取 userAgent 信息
	const userAgent = navigator.userAgent.toLowerCase()
	// 检查是否包含 'micromessenger' 字样
	return userAgent.indexOf('micromessenger') !== -1
}

// 方法二：判断设备OS类型
const getDeviceOS = () => {
	const userAgent = navigator.userAgent
	if (/android/i.test(userAgent)) {
		return 'Android'
	} else if (/iPad|iPhone|iPod/.test(userAgent)) {
		return 'IOS'
	} else {
		return 'unknown' // 无法确定或非移动操作系统
	}
}

import wx from 'weixin-js-sdk'

//根据个人封装的代码来进行调整
import {
	xxxShare
} from '@/config/api.js';

// 方法三：处理微信分享事件（这里的细节在3.3中提及）
const handleWechatShare = async (shareInfo = {}) => {
    //分析1：3.3中提及
	// 1、向后端请求微信配置信息（目的是为了获取签名等信息 来初始化微信sdk的权限验证信息）
	let url = encodeURIComponent(location.href.split('#')[0]) // 只用#之前的内容
	
    //分析2：3.3中提及
	if (getDeviceOS() == 'IOS') {
		// ios手机会把首次进入的url当做wx.config中的realAuthUrl，所以需要在入口文件将该链接存下来 而不能是当前页面的链接
		var urlInfo = uni.getStorageSync("firstVisitUrl") // 记录首次访问地址
		let t = urlInfo.split('#')[0]
		url = encodeURIComponent(t)
	}
	
    //分析3：3.3中提及
	const data = await getWechatSDKConfig(url) // 调用后端接口 获取签名等参数信息
	
    //分析4：3.3中提及
	let wxConfig = {
		// debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来
		appId: data.appId, // 必填，公众号的唯一标识
		timestamp: data.timeStamp, // 必填，生成签名的时间戳
		nonceStr: data.nonceStr, // 必填，生成签名的随机串
		signature: data.signature, // 必填，签名，见附录1 [一定要按照文档上面，让后端实现]
		// surl: data.url, //自己添加的，debug为true的时候可以网页打印出对应的URL是否正确
		jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
	}

	//分析5：3.3中提及
	// 2、注入权限验证信息，初始化权限信息（目的是为了能够调用微信的相关api）
	wx.config(wxConfig)
    //分析6：3.3中提及
	// 3、初始化微信自定义分享信息（目的是为了在用户点击右上角分享的时候，把分享的内容从链接 变成 自定义内容的卡片）
	initWechatShareData(shareInfo)
}

// 初始化微信自定义分享信息
const initWechatShareData = (shareInfo = {}) => {
	// wx.config没有success回调事件，通过ready接口保证后续代码都是在config执行成功后再执行的；
	wx.ready(() => {
		// uni.$u.toast(JSON.stringify(shareInfo))
		// 自定义分享朋友信息
		wx.updateAppMessageShareData(shareInfo)
		// 自定义分享朋友圈信息
		wx.updateTimelineShareData(shareInfo)
	})

	// 通过error接口处理config失败的情况
	wx.error(function(res) {
		// uni.$u.toast('分享失败，请稍后再试' + res.errMsg)
	})
}

const getWechatSDKConfig = async (targetUrl) => {
	try {
		let params = {
			url: targetUrl
		};
		let res = await xxxShare(params);
		return res;
	} catch (e) {
		throw e;
	}
};

export {
	isWeChatBrowser,
	handleWechatShare
}

将上方js文件在main.js进行配置方便全局调用
具体页面调用示例（假设在onLoad回调中调用），对于在被分享的页面也实现分享，确保下方配置在被分享页设置了即可。

const appMessage = {
								title: '自定义标题',
								desc: "自定义描述",
								link: `${this.自定义的域名地址字段}#/pagesA/B/C?key1=${value1}&key2=${value2}`,
								imgUrl: this.imageUrl,
								success: () => {},
								fail: (err) => {}
							}
							this.$wechatH5Share.handleWechatShare(appMessage)

3.3.js类中的细节

分析1和分析2，分析1是适用于Android手机的微信浏览器打开的情况下，分析2是Ios手机打开的，我们需要记录首次访问地址,pages.json中配置的应用启动页中去执行保存的逻辑，如：

onLoad() {
	uni.setStorageSync("firstVisitUrl", location.href) // 记录首次访问地址
},

分析3：跟后台约定的方法，参数为url，该方法的逻辑实现让后台去查看附录1-JS-SDK使用权限签名算法实现
分析4：参数中左侧key的和jsApiList对应的值保持不变，右侧根据后台返回的来调整；
- 后台的逻辑一定要验证，确保其正确性；
- 后台的逻辑一定要验证，确保其正确性；
- 后台的逻辑一定要验证，确保其正确性；
分析5和分析6：固定写法，cv即可；