引用微信JSSDK与支付宝JSSDK

文章目录

引用微信JSSDK与支付宝JSSDK
前言
一、浏览器判断
二、微信JSSDK引入
- 2.1 绑定域名
- 2.2 引入JS文件
- 2.3 通过config接口注入权限验证配置
- 2.4 使用扫一扫功能
三、支付宝JSSDK引入
- 3.1 引入JS文件
- 3.2 使用支付宝扫一扫功能
四、目录结构

前言

要做一个H5页面，需具有扫一扫功能、微信支付、支付宝支付等功能，因各种原因使用了uniapp，然后我又选择了引用支付宝与微信SDK来实现

一、浏览器判断

需要判断是在微信还是支付宝扫码的，然后进行支付

let en = window.navigator.userAgent
this.platform = /MicroMessenger/.test(en) ? 'wechat' : /AlipayClient/.test(en) ? 'alipay' : 'other'

二、微信JSSDK引入

官方文档
主要是通过以下三步来引入

2.1 绑定域名

登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。不设置的话无法验证通过。

2.2 引入JS文件

到官方文档下载JS文件（支持https）：http://res2.wx.qq.com/open/js/jweixin-1.6.0.js，引入到自己的项目中。

在需要调用JS接口的页面引入JS文件

const wx = require('../../js/jweixin')

2.3 通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA的web app可在每次url变化时进行调用）

wx.config({debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: '', // 必填，公众号的唯一标识timestamp: , // 必填，生成签名的时间戳nonceStr: '', // 必填，生成签名的随机串signature: '',// 必填，签名jsApiList: [] // 必填，需要使用的JS接口列表
});

向后端请求配置信息

// 微信JDK配置
async getConfig() {console.log('开始配置', location.href, this.platform)await uni.request({url: `${baseUrl}/wechatConfig`,method: 'GET',data: {url: location.href},success: (res) => {let data = res.data.data;wx.config({debug: true,appId: data.appId, timestamp: data.timestamp, nonceStr: data.nonceStr, signature: data.signature, jsApiList: ["scanQRCode", "chooseWXPay"] });wx.ready(() => {console.log('验证成功')});wx.error((res) => {console.log('验证失败')});},fail: (res) => {this.HMmessages.show('获取配置信息失败', {icon: 'error',fontColor: "#ff0000"});}})
},

2.4 使用扫一扫功能

wx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: (res) => {let scanResults = res.resultStr; // 当needResult 为 1 时，扫码返回的结果console.log(scanResults, ‘扫码返回的结果’)},fail: (res) => {this.HMmessages.show('扫描二维码失败', {icon: 'error',fontColor: "#ff0000"});}
});

三、支付宝JSSDK引入

官方文档
支付宝相对微信来说要简单很多，引入后就可以直接使用，无需配置。

3.1 引入JS文件

到官方文档下载JS文件，引入到自己的项目中，然后在需要的页面引入即可。

const ap = require('../../js/alipay')

3.2 使用支付宝扫一扫功能

ap.scan((res)=> {let scanResults = res.code;console.log(scanResults, '扫描结果')
});

四、目录结构

引用微信JSSDK与支付宝JSSDK相关推荐

企业微信开发：使用 JS-SDK 实现图像接口功能（六）
前言本文主要是实现图像接口,之前我以为企业微信和微信应该大差不差的,结果这玩意坑还挺多,写篇文章记录一下自己踩过的坑,希望对你们有所帮助!这个地方就不介绍配置 wx.config 了详细请看上一 ...
php微信分享接口调用,TP5的微信分享接口和JSSDK使用
TP5的微信分享接口和JSSDK使用项目开发中,经常会用到微信分享接口,使用官方提供的SDK可以实现微信分享到朋友圈或者好友以后,能够正常显示页面的Logo图片.标题和描述内容,而不仅仅只是简单粗暴 ...
微信公众号+Vue+JS-SDK配置注册失败，显示config:fail,Error: 系统错误，错误码：63002,invalid signature等解决方法
用vue做微信公众号调用js-sdk遇到的问题问题1(JS-SDK在IOS中报签名无效invalid signature) 解决办法在VUE路由进去你要操作的页面时进行config接口注入首先打 ...
微信企业号和微信公众号使用js-sdk说明和注意事项
一.1.微信公众号使用JS-SDK说明文档 (官方):https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 2.企 ...
微信公众平台使用JSSDK网页调起扫码并获取扫码数据（PHP）
微信公众平台使用JSSDK网页调起扫码并获取扫码数据初学者,部分css样式在网上扒下来的,功能实现了,代码很糙,非常糙,望海涵,也希望大神多指导. QQ:961052877,有问题大家一起交流.可以 ...
（第三方平台）开发相关，解除80端口占用，微信公众号分享jssdk实现，微信开放平台登录接口接入，2022微信分享接入本地调试，微信分享定制
一.开发相关 1.平台地址微信开放平台 QQ互联平台SDK 2.文章收集来自CSDN兄台的QQ登录使用的教程微信网站应用开发的详细流程和引导 VueJs单页应用实现微信网页授权及微信分享功能 [ ...
腾腾流氓，云云更流氓（问微信怎样接入支付宝支付），手贱的赶紧点，你会感谢我的...
草原上的两匹马! 打从当年微信开始布局公众号之初时,估计就已经想到了与支付宝正面冲突的场面,所以微信先来个瞒天过海,在春晚搞了个微信红包,那叫一个火呀,此时的云云隐隐感觉到些许不安. 早期的微信开发者 ...
IOS集成微信支付或者支付宝支付功能小结
2019独角兽企业重金招聘Python工程师标准>>> 第一,你需要有微信开发平台的开发者账号,(网址https://open.weixin.qq.com/,或者自行百度" ...
微信中使用支付宝进行支付
微信中使用支付宝不能直接使用,由于微信内置浏览器的原因,在微信中使用支付宝时无法跳转出去,支付宝官网给出了实例文档支付宝官网地址下载后将其例子融入到vue中使用步骤: 第一步:将ap.js放在 ...

引用微信JSSDK与支付宝JSSDK

引用微信JSSDK与支付宝JSSDK

文章目录

前言

一、浏览器判断

二、微信JSSDK引入

2.1 绑定域名

2.2 引入JS文件

2.3 通过config接口注入权限验证配置

2.4 使用扫一扫功能

三、支付宝JSSDK引入

3.1 引入JS文件

3.2 使用支付宝扫一扫功能

四、目录结构

引用微信JSSDK与支付宝JSSDK相关推荐

最新文章

热门文章