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

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

先看一遍 微信 JS SDK 文档：http://caibaojian.com/wxwiki/0030551f015f01ecaa56d20b88ee3c6cb32503bf.html

1. 什么是微信JSSDK ?

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

2. 使用范围 ?

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

3. 前期准备？

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

   流程如下： 网页向java-web请求微信分享，然后通过公众号的appid和secret获取微信的access_token,然后通过access_token获取微信ticket,微信返回的ticket生成时间戳和nonceStr，加上当前的url 求你注意下要传前端的url，代码我写在下面了，不传递永远不可能签名成功 和ticket进行签名生成signature,然后将 appid,timestamp,nonceStr,signature返回给前端页面，前端通过config接口注入权限验证配置即可(可以使用微信开发工具测试)

   /**
    * 获取当前项目的链接
    */
   export function getWebUrl() {
   	return window.location.href.substring(0, window.location.href.indexOf('#'));
   }
   

   点击查看 java 示例

4. 引入方式 ?
   在 uniapp 中可以使用模块方式引用微信 js-sdk ，微信官网直接下载的使用有问题，可以使用 jweixin-module。

   安装

   • NPM安装方式（不会用NPM就不要用这种方式）

   npm install jweixin-module --save
   

   • 下载使用方式
     下载地址：https://unpkg.com/[email protected]/lib/index.js

   使用

   var jweixin = require('jweixin-module')  
   jweixin.ready(function(){  
       // TODO  
   });
   

   建议大家使用第一种方式，简单便捷。一句话，直接导入进去。没有啥后顾之忧。
   不建议使用第二种，第二种引入的话，可能会有问题，报错的情况发生。
   可能看到这里大家还是不知道如何操作。那么下面示例可以看一下。

5. 使用方法 ?

   工具类 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()
   }
   
   

6. 支付示例

   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);
   				}
   			});
   		});
   	})
   }
   

7. 分享示例：

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

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

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

   全局 分享设置

   需要利用 全局混入的方式设置。 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);
   						});
   				}
   			}
   		},
   

8. 注意事项：
   ** 好兄弟！！！ 公众号后台注意：别忘了配置 js 域名 不然不管用。**

   --------------------------------------------------分割线 2021-2-8 ------------------------------------------
   发现评论区 不确定 scanCodeService.getWeiXinJsConfig() 是一个什么方法 返回什么参数 我把内容细节给大家 发出来 方便大家学习。

// 获取微信jssdk的授权token 
// http.get 是我封装的请求 你可以用 uni.request 方式返回 调用服务器接口，这个因人而异
export function getWeiXinJsConfig() {

	return http.get('你的服务器接口地址',
			{
				header: authenticateUtil.getHeader()
			}).then(response => {
			if (response.data && response.data.code === 0) {
				return response.data;
			} else {
				return null;
			}
		})
		.catch(error => {
			return error;
		});
}

UtilService.js

/**
 * 根据设备判断是否是微信环境的
 */
export function isWeixinByJs() {
	let ua = window.navigator.userAgent.toLowerCase();
	return ua.match(/MicroMessenger/i) == 'micromessenger';
}

有问题欢迎大家指出，感觉 不清楚、实现不出效果、感觉混乱的读者。请联系 qq 1019011560.