uniapp对接微信公众号H5微信支付、分享、小程序隐藏右上角分享胶囊

1、导包

npm install jweixin-module --save

2、在创建wxApi.js文件，将方法封装在js文件里

/*
    微信(公众号)支付方法
*/
const wx = require('jweixin-module');

// 微信支付
const wexinPay = (data, callback, errorCallback) => {
	let [appId, timestamp, nonceStr, signature, packages, sign] = [data.appid, data.timeStamp, data.nonceStr, data.app_sign,data.package, data.app_sign
	];
	
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId, // 必填，公众号的唯一标识
		timestamp, // 必填，生成签名的时间戳
		nonceStr, // 必填，生成签名的随机串
		signature, // 必填，签名，见附录1
		jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	WeixinJSBridge.invoke(
		'getBrandWCPayRequest', {
			appId: appId, //公众号名称，由商户传入
			timeStamp: timestamp, //时间戳，自1970年以来的秒数
			nonceStr: nonceStr, //随机串
			package: packages,
			signType: 'MD5', //微信签名方式：
			paySign: sign //微信签名
		},
		function(res) {
			if (res.err_msg == 'get_brand_wcpay_request:ok') {
				// 使用以上方式判断前端返回,微信团队郑重提示：
				//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
				//支付成功回调
				callback(res)
			} else if (res.err_msg == 'get_brand_wcpay_request:cancel') {
				//支付失败回调
				errorCallback(res)
			}
		}
	)
}

// 微信分享
const wexinShare = (data, callback, errorCallback) => {
	let [appId, timestamp, nonceStr, signature, packages, sign,name,link,url] = [data.appId, data.timestamp, data.nonceStr, data.signature,data.package, data.app_sign,data.name,data.link,data.url	];
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId, // 必填，公众号的唯一标识
		timestamp, // 必填，生成签名的时间戳
		nonceStr, // 必填，生成签名的随机串
		signature, // 必填，签名，见附录1
		jsApiList: ["onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	
	
	wx.ready(function(){
	  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
	    
        // 设置分享内容
		wx.onMenuShareAppMessage({
		  title: '', // 分享标题
		  desc: name, // 分享描述
		  link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			imgUrl:url,
		  type: '', // 分享类型,music、video或link，不填默认为link
		  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
		  success: function (res) {
		  	console.log("分享成功",name,link,url);
		  	// 设置成功
		  	callback(res)
		  },
		  fail:function(err){
		  	errorCallback(err)
		  }
		});
	});
}


// 隐藏右上角胶囊
const wexinHide = (data, callback, errorCallback) => {
	let [appId, timestamp, nonceStr, signature] = [data.appId, data.timestamp, data.nonceStr, data.signature];
	wx.config({
		debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		appId, // 必填，公众号的唯一标识
		timestamp, // 必填，生成签名的时间戳
		nonceStr, // 必填，生成签名的随机串
		signature, // 必填，签名，见附录1
		jsApiList: ["hideOptionMenu"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
	});
	
	wx.ready(function(){
	  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
		wx.hideOptionMenu();

	});
	wx.error(function(res){
		console.log("信息验证失败",res);
	  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
	});

}

// 导出这三个方法
export default {
	wexinPay,
	wexinShare,
	wexinHide,
}

3、将方法挂入全局main.js

//导入
import wxApi from './common/wxApi.js'
//挂载
Vue.prototype.$wxPay = wxApi.wexinPay
Vue.prototype.$wxShare = wxApi.wexinShare
Vue.prototype.$wxHide = wxApi.wexinHide

4、调用微信支付

            //支付订单
			payorder() {
				const that = this;
                    // 调用后台接口 获取jsapy中wxpay 所需要的参数
                    // 接口根据自己的业务来写
				    that.$http.post("api/agent_goods/pay_order", {
						order_id: that.order_id, //
						pay_type: 4,
					})
					.then(res => {
						console.log("支付订单", res);
						if (res.status_code == 200) {
							console.log('微信公众号支付', res)
                            // 调用挂载在全局中的方法 将后端获取的数据传入方法中
                            // 千万注意 res.data获取的参数要与 上边封装方法中数据接口的参数名一致
							that.$wxPay(res.data, function(res) {
								/*成功的回调*/
								console.log('成功', res)
								uni.showToast({
									title: "支付成功",
								})
								setTimeout(() => {
									that.toPath('/pages/suppliers/orderList')
								}, 1000)
							}, function(e) {
								/**失败的回调*/
								that.$tool.toast('支付失败或取消支付')
								console.log("支付失败或取消支付", e)
							})
						}
					})
			},

5、调用微信分享

const that = this
// 调用后端接口 将当前分享页面的链接传给后端 后台通过域名进行授权
this.$http.get('api/user/signature',{url:'url'}).then(res=>{
				console.log("获取分享验证",res);
				let data1 = res.data; // 得到分享需要的参数 appId 公众号的唯一标识，timestamp 生成签名的时间戳,nonceStr 生成签名的随机串 ,signature 签名
				data1.name = that.goodsInfo.goods_name; // 分享描述
				data1.link = 'url'; // 分享链接
				data1.url = that.goodsInfo.image; // 分享图片路径
				if (res.status_code == 200) {

                // 调用封装好的分享方法
				that.$wxShare(data1, function (res) {
				 /*成功的回调*/
				console.log('成功',res)
				}, function (e) {
				/**失败的回调*/
				// that.$tool.toast('分享失败或取消分享')
					console.log("分享失败或取消分享",e)
				})

注意:

① 公众号分享只能通过右上角分享触发,默认分享的是当前页面

② 分享的页面链接必须在后台配置 js接口安全域名和网络授权域名

6、隐藏右上角胶囊

onLoad() {
			const that = this
				// 隐藏右上角按钮功能
				let url = that.$http.baseUrl2+window.location.pathname;
				console.log("当前页面完整路径",url);
				that.$http.get('api/user/signature',{url:url}).then(res=>{
					console.log("隐藏验证",res); 
					let data1 = res.data; // 得到分享需要的参数 appId 公众号的唯一标识，timestamp 生成签名的时间戳,nonceStr 生成签名的随机串 ,signature 签名
					if (res.status_code == 200) {
						that.$wxHide(data1)
					} else {
						that.$tool.toast(res.message)
					}
				})
		},