小程序内嵌webview触发小程序原生方法进行支付 - 新闻资讯 - 云南小程序开发|云南软件开发|云南网站建设-昆明葵宇信息科技有限公司

159-8711-8523

云南网建设/小程序开发/软件开发

知识

不管是网站,软件还是小程序,都要直接或间接能为您产生价值,我们在追求其视觉表现的同时,更侧重于功能的便捷,营销的便利,运营的高效,让网站成为营销工具,让软件能切实提升企业内部管理水平和效率。优秀的程序为后期升级提供便捷的支持!

您当前位置>首页 » 新闻资讯 » 小程序相关 >

小程序内嵌webview触发小程序原生方法进行支付

发表时间:2020-10-28

发布人:葵宇科技

浏览次数:90

小程序内嵌webview无法进行h5的支付 所以需要通过webview触发小程序的支付 具体操作如下

1.h5部分代码

首先引入jweixin

然后判断一下是否为小程序环境 代码如下

// 判断环境
function checkMiniProgram() {
  // 判断是否在微信小程序中打开
  var ua = window.navigator.userAgent.toLowerCase();
  let that = this;
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){      //判断是否是微信环境
    //微信环境下
    wx.miniProgram.getEnv(function(res) {
      if (res.miniprogram) {
        // 小程序环境下逻辑
        console.log('小程序环境下逻辑');
      }else {
        //非小程序环境下逻辑
        console.log('非小程序环境下逻辑');
      }
    })
  }else{
    //非微信环境逻辑
    console.log('非微信环境逻辑');
  }
}

然后在小程序环境中触发小程序行为

function miniProgramPay() {
  var pageParams = encodeURIComponent(JSON.stringify('参数'));
  var url = `../payMent/payMent?pageParams=${pageParams}`;//支付的路径
  wx.miniProgram.navigateTo({
    url: url
  });
}

encodeURIComponent 这里是防止参数中带有?或者= 导致小程序参数被截断

然后触发小程序的页面跳转后 在支付页接参数

2.小程序部分代码

let params = {};
if(options.pageParams) {
  params = JSON.parse(decodeURIComponent(options.pageParams));
}

因为h5中进行了encodeURIComponent 所以需要在小程序中decodeURIComponent

然后正常掉小程序方法支付即可

需要返回上一级webview页面的话 可以通过

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; // 获取上一页

在当前的请求接口中获取要替换webview的页面链接 然后进行

prevPage.setData({
  pageUrl : resultUrl //resultUrl为支付页返回的webview路径 pageUrl为webView页面的参数
})
wx.navigateBack({ //返回上一级页面
  delta: 0,
})

即可替换上一级页面链接并返回webview页面。

相关案例查看更多