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

约定不等于承诺〃 2022-12-10 05:00 1124阅读 0赞

#  #

## 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 示例][java]
4.  引入方式 ?  
    在 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 
        });
    
    建议大家使用第一种方式，简单便捷。一句话，直接导入进去。没有啥后顾之忧。  
    不建议使用第二种，第二种引入的话，可能会有问题，报错的情况发生。  
    可能看到这里大家还是不知道如何操作。那么下面示例可以看一下。
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.

[java]: https://blog.csdn.net/qq_36846766/article/details/80785454