uni-app生成的H5网站文章详情页微信内分享自定义分享标题、简介与图片的方法

最近需要用uni-app生成一套基于wordpress的H5网站,参考微慕提供的uni-app开源版(与微信小程序代码编写规范基本一致),H5网站很快就生成了,但是在分享到微信的时候,H5由于是单页面的结构,并不能直接用PHP代码实现分享卡片的自定义标题、摘要与图片。于是有以下纪录:

首先,H5用的是hash模式(在menifest.json里选择)。

然后,在详情页detail.vue里引入微信JSSDK。这一步需要提前将微信SDK的js代码放置到指定的目录里,比如我就把SDK放在了 components --> jweixin-module目录下,命名为 jweixin.js。

现在在detail.vue里 fetchDetailData 方法里加入微信自定义分享代码,这一步很关键,是个大坑!

我一开始将fetchDetailData获取到的页面的标题、摘要、首图三个参数用setData写到当前页面的data里,然后我把微信分享代码独立写成了一个方法,比如initWXJSSDK,然后再在onLoad里的fetchDetailData方法之后调用。看起来都正确对吧?但是就是获取不到正确的参数。

所以为了避开这个坑,我将微信分享js代码写进fetchDetailData里,在

uni.setNavigationBarTitle({
    title: res.data.category_name
});

之后,添加以下代码:


/********微信转发分享开始*********/
var sharetitle = response.data.title.rendered;
var sharedesc = response.data.excerpt.rendered;
var shareimage = response.data.content_first_image;
var jweixin = require('../../components/jweixin-module/jweixin.js'); //从指定目录引用微信JSSDK
var surl = encodeURIComponent(window.location.href.split('#')[0]);
//据说可以解决URL中带参数的问题,前台用的js编码,后台php解码
uni.request({
	method: 'POST',
	url: Api.getWXJSSDK(), //从后端获取签名
	header: {
		'content-type': 'application/x-www-form-urlencoded',
	},
	data: {
		url: surl, //一定要传递这个参数到后端,这与微信官方提供的代码是不同的,否则无法正确生成签名
	},
	success: res => {
		jweixin.config({ //这里将wx.config 改成 jweixin.config,因为uni-app自己定义了一套wx对象,为了避免冲突,故改名,下同。
			debug: false,
			appId: res.data.appId,
			timestamp: res.data.timestamp,
			nonceStr: res.data.nonceStr,
			signature: res.data.signature,
			jsApiList: [
				'updateAppMessageShareData', //这里用了新接口
				'updateTimelineShareData'
			]
		});

		jweixin.ready(() => {
			//配置分享数据
			let shareData = {
				title: sharetitle, //分享的标题
				desc: sharedesc, //分享的描述
				//link: window.location.href.split('#')[0], //分享的链接
				link: window.location.href, //分享的链接
				imgUrl: shareimage, //分享的图片链接
				success(response) {
					console.log('分享成功');
				},
			};
			//分享给朋友接口
			jweixin.updateAppMessageShareData(shareData);
			//分享到朋友圈接口
			jweixin.updateTimelineShareData(shareData);
		});
	},
	fail: () => {
		console.log('request fail', err);
	},
	complete: () => {}
});
/**********微信转发分享结束***********/

至此即实现了H5页面在微信中转发分享自定义标题、摘要与图片。

发表回复

您的电子邮箱地址不会被公开。