uni-app支付相关配置和代码（H5+APP+小程序+requestPayment service fail not found报错)

借鉴文章：

uniapp 开发过程中遇到的微信支付调用失败 payment微信:-1]General errors","errCode":-100,"code":-100 解决办法

一、公众号H5支付

1.实现技术：概述 | 微信开放文档说明公众H5需要引入工具包去实现，将文件引入到项目后我们可以详细阅读该文档，粗略的知道它的使用方式。

2.实现代码：

//在H5状态下编译即可
//#ifndef H5var jweixin = require('../../util/jweixin.js');
//#endif
//通常你会调用后端一个接口，用来获得
this.$http.post('pay/pay',this.order).then(res=>{
if(res.code==1){
this.wxjsPay(res.data)
}})

后台返回参数如下：appid跟你公众号里面的一样。

继续往下写一个方法，把上面返回的结果传入

// H5微信支付wxjsPay(data){jweixin.config({debug: true, //调试时候打开提示，初始化失败或者支付接口调用失败或者取消支付都有弹框提示。appId: data.appId, // 必填，公众号的唯一标识timestamp: data.timeStamp, // 必填，生成签名的时间戳nonceStr: data.nonceStr, // 必填，生成签名的随机串signature: data.paySign, // 必填，签名jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表});jweixin.ready(() => {history.pushState(null,null,"/#/");jweixin.chooseWXPay({appId:data.appId,timestamp: data.timeStamp,nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位package: data.package, // 统一支付接口返回的prepay_id参数值signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'paySign: data.paySign, // 支付签名success: function(res) { //支付成功回调uni.showToast({title: '支付成功',icon:"success",duration:2000});//成功后跳转到setTimeout(function() {uni.navigateTo({url: './order?tab=2'});}, 2000)},fail: function(res) {uni.showToast({title: '支付失败',icon:"error",duration:2000});}});});},

3.特别提示：history.pushState(null,null,"/#/"); 的使用，当你的缺少这段代码的时候真机调试的时候会遇到当前页面未注册https://www.xxx.xxxx这样的提示。vue单页面程序，如果不刷新页面的话，例如你是从页面（/pages/index/index）开始浏览，使用了uni.redirect转向到支付页面，在不刷新的情况下，当调用微信支付的时候，依然识别为/pages/index/index 页面相关引用文章。这个history.pushState亲测有效。在微信开发工具里面测试H5的时候遇到一下情况：

放轻松，只要以上步骤书写正确，就可以直接发布在手机上测试了。

---------------------------------------------------------这是一段补充------------------------------------------------------

PS:这是2021年10月18日做的补充，测试人员说明苹果手机上的H5支付有问题报错提示如下：

说明history.pushState在ios上并不奏效，这回我是仔细的看了一下这个提示，原来我脑子里面一直默认的发布后的项目是https,所以配置的都是Https开头路径，人家既然提示了当前页面是http://www.jusmd.com/ 那为什么不直接在商户平台配置这个呢，按照网上说的配置过后都会匹配默认该路径下的。所以我就在微信商户平台上

---------------------------------------------------------这是一段补充-----------------------------------------------------

4.有关H5支付需要进行的配置：

4.1扫描公众平台进入公众号中获取appid ，具体操作指南AppID及其主体信息查询指引

以上步骤你你找到了公众号的appid后，去微信商户平台进行绑定。

4.2借鉴文档：账号关联（AppID绑定），仔细浏览文档之后，就明白了是从微信公众平台的公众号里面获取appid，放到微信商户平台里面去添加appid关联申请，然后需要再跑到公众平台的公众号通过。我这个项目使用到uniapp开发、要求实现小程序、app、H5多端的。所以我关联的AppID账号就有这么多。

并且要说一句的的就是，这里面绑定的appid是需要跟你调用pay/pay接口返回appid一样

4.3产品中心-开发配置-支付配置（配置支付页面的路径，路径要以"/"结尾,会匹配当前路径下的所有支付页面）

二、手机app支付（调用微信app支付）

这回咱们把配置相关放到前面先说。

1.从微信开放平台创建应用（获取appid）到微信商户平台中绑定appid提交交过绑定申请后，需要回到微信开放平台中进行通过。

（关联提交绑定申请）

（查看通过申请）

以上步骤就是把你的app配置好并开通了支付功能。接下来就是对项目进行配置了这里咱们可以直接借鉴uniapp官方提供的查看uniapp项目中app支付配置。由于版本不同的原因你的配置文件manifest.json的结构跟官方提示配置的不太相同。无关紧要，看下面的就行了：

注意这里的appid跟微信开放平台申请的是一样的，这里配置好了，微信支付权限也就开通了。

要实现的页面

编写代码

//获取orderinfo
this.$http.post('card/recharge', {money: this.amount,type: this.type,openid: this.openid,//app环境下不传也可以way:this.way}).then(res => {if (res.code == 1) {// #ifdef MP-WEIXIN||APP-PLUSconsole.log("进入微信支付")this.payMent(this.provider,res.data)// #endif} else {uni.showToast({title: res.msg,icon: 'none',duration:2000})}})

获得结果res

调起微信支付

payMent(provider, orderInfo) {console.log("传入",orderInfo)//唤起支付uni.requestPayment({provider: provider, //服务提供商微信（wxpay）或支付宝（alipay）orderInfo: orderInfo,success: (res) => {uni.showToast({title: '支付成功',icon:"success",duration:2000});//成功后跳转到setTimeout(function() {uni.navigateTo({url:'./gongyika'});}, 2000)},fail: (err) => {if (err.errMsg.indexOf('cancel') > -1) {uni.showToast({title: '取消支付',icon: 'none'})} else {uni.showToast({title: JSON.stringify(err),icon: 'none'})}}});},

这一需要注意的是orderInfo类型，当微信支付的时候要求orderInfo传入Object，当要求支付宝支付的时候则是String类型，orderInfo里面包括了哪些东西可以借鉴微信支付文档

运行到模拟器如果出现”客户端未安装“字样，说明微信支付已经调用成功了。直接打包apk真机测试就没问题了，

如果出现错误码-1可以根据下表去排查：

当你遇到了errMsg：requestPayment service fail not found，这个问题为啥要标红，因为网上一大堆人遇到了，你猜我是咋回事，快把自己蠢死了。我调起requestPayment忘记传入provider（就是初始化的时候没有给值wxpay）才报了这个错。

三、小程序支付

小程序跟app支付都调用uni,requestPayment接口，不一样的是，传入的参数是不一样的，大家可以直接在uniapp开发文档中看出来区别

所以跟上面写的app代码结合一下使用，使用es6的解构直接判断环境来给参数类型。

payMent(provider, orderInfo) {//唤起支付uni.requestPayment({provider: provider, //服务提供商微信或支付宝//  #ifdef APP-PLUSorderInfo: orderInfo,// #endif//  #ifdef MP-WEIXIN...orderInfo,// #endifsuccess: (res) => {uni.showToast({title: '支付成功',success: () => {uni.showToast({title: '支付成功',icon:"success",duration:2000});//成功后跳转到setTimeout(function() {uni.navigateTo({url: './order?tab=2'});}, 2000)}});},fail: (err) => {if (err.errMsg.indexOf('cancel') > -1) {uni.showToast({title: '取消支付',icon: 'none'})} else {uni.showToast({title: JSON.stringify(err),icon: 'none'})}}});},

如果不做上面代码参数判断就会出现这个报错：（多看官方文档真香）

如有错误，欢迎指正！

有问题评论交流

uni-app支付相关配置和代码（H5+APP+小程序+requestPayment service fail not found报错)相关推荐

微信APP支付申请配置流程
微信APP支付申请配置流程 APP支付申请步骤微信APP支付配置 APP支付:用户在APP内点击后跳转到微信内完成支付. APP支付申请步骤注册开放平台账号进入微信开放平台注册:https:// ...
微信App支付相关问题
微信App支付相关问题 Q1:调起微信支付页面时,一闪而过,在屏幕上方有弹窗首先检查调用request.checkArgs(),检查参数.当返回true时,还是出现上述状况,就检查签名.注意参与签名 ...
app vue 真机运行_uni-app黑魔法：小程序自定义组件运行到H5平台
引言移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS.Android是当时两大平台. 随着硬件及OS的更新换代,H5可承载的体验逐步完善,为提高开发效率.节约资源(复用代码)以及 ...
【微信小程序】使用uni-app——开发首页搜索框导航栏（可同时兼容APP、H5、小程序）
目录前言 App.H5效果小程序效果一.兼容APP.H5的方式二.兼容小程序三.实现同时兼容前言首页都会提供一个搜索框给到客户,让客户自己去搜索自己想要的内容,这里就需要导航栏,来实现搜 ...
Web、app、H5、小程序测试的区别
单纯从功能测试的层面上来讲的话,APP 测试.web 测试和H5测试在流程和功能测试上是没有区别的. Web项目或pc项目都是在电脑上进行测试的.常见的PC项目架构有BS架构和CS架构的,BS架构就是 ...
uniapp实现下拉刷新及上拉（分页）加载更多（app，H5，小程序均可使用）
开门见山地说,在移动端开发中,80%的项目都会涉及到列表展示,而有了列表不可避免的需求就是列表的下拉刷新和上拉加载更多.本篇文章主要介绍在使用uniapp开发移动端的过程中,比较好用的一个下拉及上拉组 ...
10行代码实现微信小程序支付功能，使用小程序云开发实现小程序支付功能（含源码
前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能. 传送门借助小程序云开发实现小程 ...
uniapp （H5、小程序、app）地图导航
H5地图导航腾讯地图 window.location.href = http://apis.map.qq.com/uri/v1/marker?marker=coord:lat,lng;addr:ad ...
uniapp判断当前运行环境 app h5 微信小程序
仅3.4.10+版本以上才支持,如果您的hbuilderX版本不是这个版本的需要先升级一下版本 hbuilderx下载选择3.4.11及以上版本 const type = uni.getSystem ...

uni-app支付相关配置和代码（H5+APP+小程序+requestPayment service fail not found报错)

uni-app支付相关配置和代码（H5+APP+小程序+requestPayment service fail not found报错)相关推荐

最新文章

热门文章