小程序内嵌webview觸發小程序原生方法進行支付 - 新聞資訊 - 雲南小程序開發|雲南軟件開發|雲南網站建設-昆明融晨信息技術有限公司

159-8711-8523

雲南網建設/小程序開發/軟件開發

知識

不(bù)管是(shì)網站,軟件還是(shì)小程序,都要(yào / yāo)直接或間接能爲(wéi / wèi)您産生價值,我們在(zài)追求其視覺表現的(de)同時(shí),更側重于(yú)功能的(de)便捷,營銷的(de)便利,運營的(de)高效,讓網站成爲(wéi / wèi)營銷工具,讓軟件能切實提升企業内部管理水平和(hé / huò)效率。優秀的(de)程序爲(wéi / wèi)後期升級提供便捷的(de)支持!

您當前位置>首頁 » 新聞資訊 » 小程序相關 >

小程序内嵌webview觸發小程序原生方法進行支付

發表時(shí)間:2020-10-28

發布人(rén):融晨科技

浏覽次數:126

小程序内嵌webview無法進行h5的(de)支付 所以(yǐ)需要(yào / yāo)通過webview觸發小程序的(de)支付 具體操作如下

1.h5部分代碼

首先引入jweixin

然後判斷一下是(shì)否爲(wéi / wèi)小程序環境 代碼如下

// 判斷環境
function checkMiniProgram() {
  // 判斷是(shì)否在(zài)微信小程序中打開
  var ua = window.navigator.userAgent.toLowerCase();
  let that = this;
  if(ua.match(/MicroMessenger/i) == 'micromessenger'){      //判斷是(shì)否是(shì)微信環境
    //微信環境下
    wx.miniProgram.getEnv(function(res) {
      if (res.miniprogram) {
        // 小程序環境下邏輯
        console.log('小程序環境下邏輯');
      }else {
        //非小程序環境下邏輯
        console.log('非小程序環境下邏輯');
      }
    })
  }else{
    //非微信環境邏輯
    console.log('非微信環境邏輯');
  }
}

然後在(zài)小程序環境中觸發小程序行爲(wéi / wèi)

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

encodeURIComponent 這(zhè)裏是(shì)防止參數中帶有?或者= 導緻小程序參數被截斷

然後觸發小程序的(de)頁面跳轉後 在(zài)支付頁接參數

2.小程序部分代碼

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

因爲(wéi / wèi)h5中進行了(le/liǎo)encodeURIComponent 所以(yǐ)需要(yào / yāo)在(zài)小程序中decodeURIComponent

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

需要(yào / yāo)返回上(shàng)一級webview頁面的(de)話 可以(yǐ)通過

let pages = getCurrentPages();
let prevPage = pages[pages.length - 2]; // 獲取上(shàng)一頁

在(zài)當前的(de)請求接口中獲取要(yào / yāo)替換webview的(de)頁面鏈接 然後進行

prevPage.setData({
  pageUrl : resultUrl //resultUrl爲(wéi / wèi)支付頁返回的(de)webview路徑 pageUrl爲(wéi / wèi)webView頁面的(de)參數
})
wx.navigateBack({ //返回上(shàng)一級頁面
  delta: 0,
})

即可替換上(shàng)一級頁面鏈接并返回webview頁面。

相關案例查看更多