微信小程序中web-view调用微信支付

在原来的H5支付页面中加个判断

前提需要添加这个：

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>var isWxMini = window.__wxjs_environment === 'miniprogram'     // 判断场景是否小程序
if (isWxMini) {
//  把要用到的参数传到小程序中进行支付 wxJson是由后台协商好返回的数据格式，该代码仅供参考，不能实际使用const wxJson = {amount: 100   //  订单金额，如还需其他参数可增加};//1.跳转页面wx.miniProgram.navigateTo({url: "/pages/pay/pay?param=" + wxJson     // 微信小程序调用支付的页面})//2.返回上一级页面//直接在这请求接口 获取支付的信息 wx.miniProgram.navigateBack({delta: 1})wx.miniProgram.postMessage({ data:res }) //返回参数
} else {//  这里放原理的支付逻辑
}

接下来在小程序中添加一个页面pay，空白页即可

//1.跳转onLoad: function (options) {var amount= options.amount;wx.request({url: '/miniProgram/getPayParam?amount=' + amount,    //  后台接口，返回调起微信支付所需参数method: 'get',success: function(res) {　　　　　　wx.requestPayment({'timeStamp': res.data.data.timeStamp,'nonceStr': res.data.data.nonceStr,'package': res.data.data.package,'signType': 'MD5','paySign': res.data.data.paySign,'success': function (res) {//定义小程序页面集合var pages = getCurrentPages();//当前页面 (wxpay page)var currPage = pages[pages.length - 1];//上一个页面 （index page）var prevPage = pages[pages.length - 2];//通过page.setData方法使index的webview 重新加载url 有点类似于后台刷新页面//此处有点类似小程序通过加载URL的方式回调通知后端 该订单支付成功。后端逻辑不做赘述。wx.redirectTo({ url: '/pages/index/index' });//小程序主动返回到上一个页面。即从wxpay page到index page。此时index page的webview已经重新加载了url 了//微信小程序的page 也有栈的概念navigateBack 相当于页面出栈的操作wx.navigateBack();},'fail': function (res) {console.log("支付失败");console.log(res);var pages = getCurrentPages();var currPage = pages[pages.length - 1];var prevPage = pages[pages.length - 2];console.log("准备修改数据");wx.redirectTo({ url: '/pages/index/index' });console.log("准备结束页面")// wx.navigateBack();}})}})
}
//2.返回上一级<web-view src="{{url}}" bindmessage="onLoadMessage" bindload="onWebLoad" binderror="onWebError"></web-view>onLoadMessage(e) {console.log('onLoadMessage')console.log(e)let paylist = e.detail.datafor (let str of paylist) {console.log(str,'str')let item = JSON.parse(str)console.log(item,'item')app.payOrder(item.pay, function () {}, function () {})}},

微信小程序中web-view调用微信支付相关推荐

微信小程序中嵌套html_在微信小程序中渲染HTML内容3种解决方案及分析与问题解决...
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 在微信小程序中渲 ...
微信小程序中嵌套html_在微信小程序中渲染HTML内容的方法示例
大部分Web应用的富文本内容都是以HTML字符串的形式存储的,通过HTML文档去展示HTML内容自然没有问题.但是,在微信小程序(下文简称为「小程序」)中,应当如何渲染这部分内容呢? 解决方案 wxP ...
微信小程序webview(H5页面)调用微信小程序支付
1.业务描述:微信小程序商城入口进入的页面是商城H5页面,在H5页面进行微信支付如何实现: 2.微信小程序(webview访问H5页面)必须使用微信小程序支付: 如何实现以及实现方式以及支付后页面返回 ...
微信小程序中使view占满整个屏幕高度的实现方法
前言: 今天做小程序的时候,在项目中要用到一个view占满屏幕高度和宽度,然后再在这个view里放置其他元素的情况. 宽度很简单,直接设置width: 750rpx;或者width: 100%;就行. ...
微信小程序中，如何获取微信绑定的手机号
获取手机号获取微信用户绑定的手机号,需先调用wx.login接口. 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发. 注意:目前该接 ...
微信小程序中实现循环调用一个方法
要想循环调用一个方法肯定是要判断某个值,当这个值为假时调用这个方法,为真就不调用 query:function(){if(!!wx.getStorageSync('userInfo')){let _t ...
微信小程序中开通云开发
本篇讲述在微信小程序中使用云开发微信小程序云开发提供云函数.云数据库.云存储三大基础能力.使得我们开发者可以将小程序的部署和运营环节交给腾讯云去处理,我们不需要在运维和管理上面投入太多时间. 云开发 ...
微信小程序中的图片处理
微信小程序中的图片处理微信小程序中的<image></image>用于向页面中插入图片.有两个重要的属性 1.src 要插入图片的资源地址 2.mode 图片裁剪.缩放 ...
微信小程序中的用户ID(openid和unionid)
前沿做过微信开发的同学,多多少少都会涉及到用户的唯一标示的问题.由于微信牢牢把控着用户的信息,因此当你需要在微信平台中获取用户的标示信息,必然要通过微信的平台接口来获取(当然,你可以通过你自己的平台 ...
微信小程序中调用公共的js
微信小程序中调用公共的js 微信小程序中调用公共的js 实现思路: 将部分的js逻辑放到utils中,logs.js中调用utils.js中的方法实现代码: utils.js: function f ...

微信小程序中web-view调用微信支付

微信小程序中web-view调用微信支付相关推荐

最新文章

热门文章