uni-app 開(kāi)發(fā)微信公眾號(hào)（H5）分享支付 JSSDK 的使用

發(fā)表時(shí)間：2020-9-24

發(fā)布人：葵宇科技

瀏覽次數(shù)：206

UNI-APP 開(kāi)發(fā)微信公眾號(hào)（H5）分享支付 JSSDK 的使用

什么是微信JSSDK ?

開(kāi)發(fā)微信公眾號(hào)的嵌入網(wǎng)頁(yè)。想要擁有在微信瀏覽器的功能，就必須使用 wx JSSDK 來(lái)獲取基礎(chǔ)能力，從而實(shí)現(xiàn)業(yè)務(wù)。
使用范圍 ?

微信公眾號(hào)的操作，app 、微信小程序有單獨(dú)的方法來(lái)設(shè)置功能，此jssdk 只適用于微信公眾號(hào)。
前期準(zhǔn)備？

公眾號(hào)需要申請(qǐng)，申請(qǐng)?zhí)囟ǖ哪芰Α?strong>最重要的是最要做一步參數(shù)處理。

流程如下：網(wǎng)頁(yè)向java-web請(qǐng)求微信分享，然后通過(guò)公眾號(hào)的appid和secret獲取微信的access_token,然后通過(guò)access_token獲取微信ticket,微信返回的ticket生成時(shí)間戳和nonceStr，加上當(dāng)前的url 求你注意下要傳前端的url，代碼我寫(xiě)在下面了，不傳遞永遠(yuǎn)不可能簽名成功 和ticket進(jìn)行簽名生成signature,然后將 appid,timestamp,nonceStr,signature返回給前端頁(yè)面，前端通過(guò)config接口注入權(quán)限驗(yàn)證配置即可(可以使用微信開(kāi)發(fā)工具測(cè)試)
```
/**
 * 獲取當(dāng)前項(xiàng)目的鏈接
 */
export function getWebUrl(name) {
	return window.location.href.substring(0, window.location.href.indexOf('#'));
}
```
點(diǎn)擊查看 java 示例
引入方式 ?
在 uniapp 中可以使用模塊方式引用微信 js-sdk ，微信官網(wǎng)直接下載的使用有問(wèn)題，可以使用 jweixin-module。

安裝
- NPM安裝方式（不會(huì)用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  
});
```
建議大家使用第一種方式，簡(jiǎn)單便捷。一句話，直接導(dǎo)入進(jìn)去。沒(méi)有啥后顧之憂。
不建議使用第二種，第二種引入的話，可能會(huì)有問(wèn)題，報(bào)錯(cuò)的情況發(fā)生。
可能看到這里大家還是不知道如何操作。那么下面示例可以看一下。

使用方法 ?

工具類(lèi) jws.js

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

// jwx.js
//#ifdef H5
const jweixin = require('jweixin-module')
//#endif
export function configWeiXin(callback) {
	//懂點(diǎn)前端應(yīng)該知道這里是查詢(xún)接口的箭頭函數(shù)，內(nèi)部細(xì)節(jié)不寫(xiě)了，就是查詢(xún)后端返回的公眾號(hào)參數(shù)信息
	scanCodeService.getWeiXinJsConfig().then(result => {
		let apiList = [ // 可能需要用到的能力 需要啥就寫(xiě)啥。多寫(xiě)也沒(méi)有壞處
			'onMenuShareAppMessage',
			'onMenuShareTimeline',
			'hideOptionMenu',
			'showOptionMenu',
			'chooseWXPay',
			'checkJsApi',
			'openLocation',
			'getLocation'
		];
		let info = {
			debug: false, // 調(diào)試，發(fā)布的時(shí)候改為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: '回調(diào)查詢(xún)'
							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);
				}
			});
		});
	})
}

分享示例：

分享需要注意，進(jìn)入頁(yè)面時(shí)就要設(shè)置好分享的參數(shù)。這樣點(diǎn)擊右上角分享才能分享的是你是設(shè)置的參數(shù)。

比如你想全局設(shè)置的話。不管在哪一個(gè)頁(yè)面都能分享是同一個(gè)內(nèi)容。然后這里面是有層級(jí)關(guān)系的。

全局 < 頁(yè)面，單獨(dú)頁(yè)面上設(shè)置的分享比全局設(shè)置的要高.

全局分享設(shè)置

需要利用全局混入的方式設(shè)置。 app.vue 中寫(xiě)下下面示例代碼。

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

/**
 *微信公眾號(hào) 全局混入微信 wxjsSdk
 * 偏于微信公眾號(hào)獲取位置 支付 等等 內(nèi)置 sdk 使用
 * 條件必須是公眾號(hào)才配置此功能參數(shù)
 * 全局混入 公眾號(hào)分享設(shè)置內(nèi)容
 */
Vue.mixin({
	onUnload() {

	},
	onShow() {
		// 公眾號(hào)全頁(yè)面設(shè)置分享 這里的工具類(lèi)我就不提供了，
		// 具體就是一些條件判斷 如果是h5 并且是微信公眾號(hào)的情況下 才會(huì)執(zhí)行
		if (authenticateUtil.isYlsdH5()) {
			if (UtilsService.isWeixinByJs()) {
				// 分享頁(yè)面配置
					jwx.configWeiXin(jweixin => {
						let shareInfo = {
							title: '標(biāo)題內(nèi)容',
							desc: '描述',
							link: window.location.href,
							imgUrl: '圖片地址',
							success: function() {}
						};
						jweixin.onMenuShareAppMessage(shareInfo);
						jweixin.onMenuShareTimeline(shareInfo);
					});
			}
		}
	},
	methods: {
	},
	onLoad() {

	}


});

單獨(dú)頁(yè)面分享設(shè)置

把內(nèi)容寫(xiě)在單獨(dú)頁(yè)面里面就行了。他的層級(jí)比全局的要高，請(qǐng)注意。

	import * as jwx from "@/*****/jws"
	
onShow() {
			// 公眾號(hào)全頁(yè)面設(shè)置分享 這里的工具類(lèi)我就不提供了，
			// 具體就是一些條件判斷 如果是h5 并且是微信公眾號(hào)的情況下 才會(huì)執(zhí)行
			if (authenticateUtil.isYlsdH5()) {
				if (UtilsService.isWeixinByJs()) {
					// 分享頁(yè)面配置
						jwx.configWeiXin(jweixin => {
							let shareInfo = {
								title: '標(biāo)題內(nèi)容',
								desc: '描述',
								link: window.location.href,
								imgUrl: '圖片地址',
								success: function() {}
							};
							jweixin.onMenuShareAppMessage(shareInfo);
							jweixin.onMenuShareTimeline(shareInfo);
						});
				}
			}
		},