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
    

    使用

    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. 

你可能感兴趣的:(个人学习,微信公众号,uni-app)