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

一.需求

  • 使用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即可;

四.总结

  • Uniapp打包H5端实现微信分享好友、微信朋友圈的需求实现重点在于细节,希望能给初次接触该需求的同学节省时间,若有疑问,欢迎留言。

五.参考资料

实现自定义微信分享当前页,需要在uniapp中使用微信JS-SDK,以下是大致的步骤: 1. 在公众号后台开启JS接口安全域名,并将当前网站的域名加入安全域名列表。 2. 在uniapp项目中安装并引入jweixin-1.6.0.js,可以通过npm命令安装,也可以手动下载并引入。 3. 在vue组件的mounted钩子函数中初始化微信JS-SDK,代码如下: ``` mounted() { // 初始化微信JS-SDK this.initWXSDK() }, methods: { initWXSDK() { // 替换为你自己的appId和当前页面地址 const appId = 'yourAppId' const url = window.location.href const timestamp = new Date().getTime() const nonceStr = 'yourNonceStr' // 调用后接口获取微信JS-SDK的签名signature axios.get('/api/getSignature?url=' + encodeURIComponent(url)) .then(res => { const signature = res.data.signature // 配置微信JS-SDK wx.config({ debug: false, appId: appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'updateAppMessageShareData', 'updateTimelineShareData' ] }) // 初始化成功后调用分享函数 wx.ready(() => { this.shareToWechat() }) }) .catch(err => { console.error(err) }) }, shareToWechat() { // 获取当前页面的标题、描述和图片 const title = '分享标题' const desc = '分享描述' const imgUrl = '分享图片地址' // 分享给朋友 wx.updateAppMessageShareData({ title: title, desc: desc, link: window.location.href, imgUrl: imgUrl, success: function () { // 分享成功后的回调函数 } }) // 分享朋友圈 wx.updateTimelineShareData({ title: title, link: window.location.href, imgUrl: imgUrl, success: function () { // 分享成功后的回调函数 } }) } } ``` 4. 在后接口中生成微信JS-SDK的签名signature,代码如下: ``` const crypto = require('crypto') const request = require('request') const config = { appId: 'yourAppId', appSecret: 'yourAppSecret' } async function getSignature(url) { const access_token = await getAccessToken() const nonceStr = createNonceStr() const timestamp = Math.floor(Date.now() / 1000) const jsapi_ticket = await getJsApiTicket(access_token) // 按照微信JS-SDK的规则生成签名signature const str = `jsapi_ticket=${jsapi_ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${url}` const signature = crypto.createHash('sha1').update(str, 'utf-8').digest('hex') return { appId: config.appId, timestamp: timestamp, nonceStr: nonceStr, signature: signature } } function createNonceStr() { return Math.random().toString(36).substr(2, 15) } function getAccessToken() { return new Promise((resolve, reject) => { const url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appId}&secret=${config.appSecret}` request(url, (err, res, body) => { if (err) { reject(err) } else { const data = JSON.parse(body) if (data.access_token) { resolve(data.access_token) } else { reject(data.errmsg) } } }) }) } function getJsApiTicket(access_token) { return new Promise((resolve, reject) => { const url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${access_token}&type=jsapi` request(url, (err, res, body) => { if (err) { reject(err) } else { const data = JSON.parse(body) if (data.ticket) { resolve(data.ticket) } else { reject(data.errmsg) } } }) }) } module.exports = { getSignature } ``` 这样就完成了在uniapp h5中自定义微信分享当前页的实现
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值