uni-app 开发微信公众号（H5）分享支付 JSSDK 的使用

发表时间：2020-9-24

发布人：葵宇科技

浏览次数：150

UNI-APP 开发微信公众号（H5）分享支付 JSSDK 的使用

什么是微信JSSDK ?

开发微信公众号的嵌入网页。想要拥有在微信浏览器的功能，就必须使用 wx JSSDK 来获取基础能力，从而实现业务。
使用范围 ?

微信公众号的操作，app 、微信小程序有单独的方法来设置功能，此jssdk 只适用于微信公众号。
前期准备？

公众号需要申请，申请特定的能力。最重要的是最要做一步参数处理。

流程如下：网页向java-web请求微信分享，然后通过公众号的appid和secret获取微信的access_token,然后通过access_token获取微信ticket,微信返回的ticket生成时间戳和nonceStr，加上当前的url 求你注意下要传前端的url，代码我写在下面了，不传递永远不可能签名成功 和ticket进行签名生成signature,然后将 appid,timestamp,nonceStr,signature返回给前端页面，前端通过config接口注入权限验证配置即可(可以使用微信开发工具测试)
```
/**
 * 获取当前项目的链接
 */
export function getWebUrl(name) {
	return window.location.href.substring(0, window.location.href.indexOf('#'));
}
```
点击查看 java 示例
引入方式 ?
在 uniapp 中可以使用模块方式引用微信 js-sdk ，微信官网直接下载的使用有问题，可以使用 jweixin-module。

安装
- NPM安装方式（不会用NPM就不要用这种方式）
```
npm install jweixin-module --save
```
- 下载使用方式
  下载地址：https://unpkg.com/jweixin-module@1.6.0/lib/index.js
使用
```
var jweixin = require('jweixin-module')  
jweixin.ready(function(){  
    // TODO  
});
```
建议大家使用第一种方式，简单便捷。一句话，直接导入进去。没有啥后顾之忧。
不建议使用第二种，第二种引入的话，可能会有问题，报错的情况发生。
可能看到这里大家还是不知道如何操作。那么下面示例可以看一下。

使用方法 ?

工具类 jws.js

import * as scanCodeService from "@/common/service/scanCodeService"

// jwx.js
//#ifdef H5
const jweixin = require('jweixin-module')
//#endif
export function configWeiXin(callback) {
	//懂点前端应该知道这里是查询接口的箭头函数，内部细节不写了，就是查询后端返回的公众号参数信息
	scanCodeService.getWeiXinJsConfig().then(result => {
		let apiList = [ // 可能需要用到的能力 需要啥就写啥。多写也没有坏处
			'onMenuShareAppMessage',
			'onMenuShareTimeline',
			'hideOptionMenu',
			'showOptionMenu',
			'chooseWXPay',
			'checkJsApi',
			'openLocation',
			'getLocation'
		];
		let info = {
			debug: false, // 调试，发布的时候改为false
			appId: result.data.appId,
			nonceStr: result.data.noncestr,
			timestamp: result.data.timestamp,
			signature: result.data.signature,
			jsApiList: apiList
		};
		jweixin.config(info);
		jweixin.error(err => {
			console.log('config fail:', err);
		});

		jweixin.ready(res => {
			if (callback) callback(jweixin);
		});
	}).catch()
}

支付示例

payUtil.js

import * as jwx from "@/*****/jws"

/**
 1. 微信 浏览器 web 支付
 2. @param {Object} orderInfo
 */
export async function wxChatWebPay(orderInfo) {

	return new Promise((resolve) => {

		jwx.configWeiXin(jweixin => {
			jweixin.chooseWXPay({
				nonceStr: orderInfo.nonceStr,
				timestamp: orderInfo.timestamp,
				package: orderInfo.package,
				signType: orderInfo.signType,
				paySign: orderInfo.paySign,
				success: () => {
					// 支付成功后
					let count = 1;
					let timer = setInterval(function() {
						uni.request({
							url: '回调查询'
							method: "GET",
							data: {},
							success: (res) => {
								if (res.data.code === 0) {
									clearInterval(timer);
									timer = null;
									uni.hideLoading()
									resolve(true);
								} else if (res.data.code === -1) {
									if (count === 12) {
										clearInterval(timer);
										timer = null;
										resolve(false);
									}
									count++;
								} else {
									resolve(false);
								}
							},
							complete: () => {}
						});
					}, 2000);
				},
				fail: err => {
					// 支付失败
					resolve(false);
				},
				cancel: err => {
					// 支付取消
					resolve(false);
				}
			});
		});
	})
}

分享示例：

分享需要注意，进入页面时就要设置好分享的参数。这样点击右上角分享才能分享的是你是设置的参数。

比如你想全局设置的话。不管在哪一个页面都能分享是同一个内容。然后这里面是有层级关系的。

全局 < 页面，单独页面上设置的分享比全局设置的要高.

全局分享设置

需要利用全局混入的方式设置。 app.vue 中写下下面示例代码。

import * as jwx from "@/*****/jws"

/**
 *微信公众号 全局混入微信 wxjsSdk
 * 偏于微信公众号获取位置 支付 等等 内置 sdk 使用
 * 条件必须是公众号才配置此功能参数
 * 全局混入 公众号分享设置内容
 */
Vue.mixin({
	onUnload() {

	},
	onShow() {
		// 公众号全页面设置分享 这里的工具类我就不提供了，
		// 具体就是一些条件判断 如果是h5 并且是微信公众号的情况下 才会执行
		if (authenticateUtil.isYlsdH5()) {
			if (UtilsService.isWeixinByJs()) {
				// 分享页面配置
					jwx.configWeiXin(jweixin => {
						let shareInfo = {
							title: '标题内容',
							desc: '描述',
							link: window.location.href,
							imgUrl: '图片地址',
							success: function() {}
						};
						jweixin.onMenuShareAppMessage(shareInfo);
						jweixin.onMenuShareTimeline(shareInfo);
					});
			}
		}
	},
	methods: {
	},
	onLoad() {

	}


});

单独页面分享设置

把内容写在单独页面里面就行了。他的层级比全局的要高，请注意。

	import * as jwx from "@/*****/jws"
	
onShow() {
			// 公众号全页面设置分享 这里的工具类我就不提供了，
			// 具体就是一些条件判断 如果是h5 并且是微信公众号的情况下 才会执行
			if (authenticateUtil.isYlsdH5()) {
				if (UtilsService.isWeixinByJs()) {
					// 分享页面配置
						jwx.configWeiXin(jweixin => {
							let shareInfo = {
								title: '标题内容',
								desc: '描述',
								link: window.location.href,
								imgUrl: '图片地址',
								success: function() {}
							};
							jweixin.onMenuShareAppMessage(shareInfo);
							jweixin.onMenuShareTimeline(shareInfo);
						});
				}
			}
		},