最近需要用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页面在微信中转发分享自定义标题、摘要与图片。