uni-app H5分享到微信 配合uniCloud 完整流程

【小白，勿喷】第一次尝试，花了差不多一天的时间，仅仅是Demo
【需求说明】将自己的H5 vlog 分享给微信好友或是微信朋友圈时 带图文，总之好看即可，不是单纯的链接就行
以下会分以下处理：

我在DCLOUD社区里面找了好久，也没有找到完整的教程，索性，自己去摸索！

1.注册一个 微信 公众号测试号 https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo

参数配置：且看下图：

一一讲解：
url: ：

• 这里需要创建一个云函数 getWXToken 这个是云函数的名称（h5绑定云函数不细讲）
• 云函数url 化 进入云函数列表 官方文档
• 云函数里面我仅用于测试，没有做验证；如果没有配置好云函数，填写链接和token完，会提示配置失败，所以先配置好，再点击配置即可
  代码如下：

'use strict';
exports.main = async (event, context) => {
	//event为客户端上传的参数
	console.log('event : ', event)
	let WECHAT_TOKEN = "这里是在测试公众号填写的token";
	let params = event.queryStringParameters
	if(params){
		let signature = params.signature
		let nonce = params.nonce
		let echostr = params.echostr
		let timestamp = params.timestamp
		return echostr //返回随机字符串即可
	}
	return event
};

接下来是：JS接口安全域名
这里我用的是本地测试，所以就将项目运行，然后获取 即可。h5使用的是hash模式 具体配置参考 H5去除# h5去除路由

配置公众号和H5项目，接下里开始准备编写云函数：

获取签名：

获取签名，这里有用到官方提供的Demo里面的node的代码 下载链接
示例代码：

云函数名称 wxAction

'use strict';

//读取配置文件，变量config的类型是Object类型
const config = require('./config');
// 用户获取签名的函数
const sign = require('./sign.js');
exports.main = async (event, context) => {
	//event为客户端上传的参数
	let params = event.params || {}
	// 生成签名
	if (event.action === 'signature') {
		var tokenApiUrl =
			`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appid}&secret=${config.appsecret}`
		// 获取token
		let getToken = await uniCloud.httpclient.request(tokenApiUrl, {
			method: 'POST',
			data: {},
			dataType: 'json'
		})
		let token = getToken.data.access_token
		// 获取Ticket
		var ticketApiUrl = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${token}&type=jsapi`
		let getTicket = await uniCloud.httpclient.request(ticketApiUrl, {
			method: 'POST',
			data: {},
			dataType: 'json'
		})
		let jsapi_ticket = getTicket.data.ticket
		console.log(jsapi_ticket)
		// 获取签名
		let signature=sign(jsapi_ticket, params.url)
		signature.appId=config.appid
		return signature
	}
	//返回数据给客户端
	return event
};

引入微信jssdk 文章参考

H5项目引入微信JSSDK

jwx.js 我这边稍作修改

'use strict';

var wx = require('jweixin-module');
initJssdk: function(data, callback) {
//这里的uri我很纳闷，我使用 
		var uri = window.location.href.split('#')[0];
		uniCloud.callFunction({
				name: 'wxAction',
				data: {
					action: 'signature',
					params: {
						url: uri
					}
				}
			})
			.then(res => {
				let data = res.result
				console.log('从后台获取的数据', res)
				console.log(uri)
				wx.config({
					debug: false,
					appId: data.appId,
					timestamp: data.timestamp,
					nonceStr: data.nonceStr,
					signature: data.signature,
					jsApiList: [ //这里是需要用到的接口名称  
						'checkJsApi', //判断当前客户端版本是否支持指定JS接口  
						'onMenuShareAppMessage', //分享接口  
						'getLocation', //获取位置  
						'openLocation', //打开位置  
						'scanQRCode', //扫一扫接口  
						'chooseWXPay', //微信支付  
						'chooseImage', //拍照或从手机相册中选图接口  
						'previewImage', //预览图片接口  
						'uploadImage' //上传图片  
					]
				});
				wx.ready(() => {
					wx.onMenuShareTimeline({
						title: "分享朋友圈", // 分享标题
						link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: 'http://icon.mobanwang.com/UploadFiles_8971/200910/20091011134333685.png', // 分享图标
						success: function() {
							// 用户点击了分享后执行的回调函数
							if (callback) {
								callback(res.data);
							}
						}
					});
					wx.onMenuShareAppMessage({
						title: "分享好友", // 分享标题
						desc: "分享好友描述", // 分享描述
						link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
						imgUrl: 'http://icon.mobanwang.com/UploadFiles_8971/200910/20091011134333685.png', // 分享图标
						type: "", // 分享类型,music、video或link，不填默认为link
						dataUrl: "", // 如果type是music或video，则要提供数据链接，默认为空
						success: function() {
							// 用户点击了分享后执行的回调函数
							if (callback) {
								callback(res.data);
							}
						}
					});
				})
			})
	},

在页面中调用：这里看个人如何处理分享逻辑，怎么喜欢怎么来

initShare(){
	if (this.$jwx && this.$jwx.isWechat()) {
					uni.showToast({
						title:'微信环境'
					})
					this.$jwx.initJssdk({shareTitle:'微信分享测试',shareDesc:'我是分享的描述'})
				}
	},

做完以上 的步骤之后，就开始来测试吧。使用微信开发者工具进行测试

当出现以上的界面是，说明测试成功了

个人比较疑惑的地方：

var uri = encodeURIComponent(window.location.href.split(’#’)[0]);//获取当前url然后传递给后台获取授权和签名信息
别人是这样写的，我没有进行url的转义；
我在尝试多次之后，总会出现以下错误：

说真的，我已经怀疑人生了，这里的bug找了一半的时间都在找这个bug上。
但是通过微信的签名工具，后端获取的签名是正确的。我都被整蒙了；

我排查了两个地方：
1.uri 如果转义过去，就会出错
2. JS接口安全域名 不要填写https:// 和 http 不然永远不知道哪里的错误
以上代码还有很多需要修复的地方，比如 access_token的缓存和票据的缓存；这些可能需要接下来的开发中去慢慢优化了

感谢以上的大神的文章参考