<p><span style="font-size:14px">點(diǎn)擊上方“</span><span style="font-size:14px"><strong>青年碼農(nóng)</strong></span><span style="font-size:14px">”關(guān)注</span></p><p><span style="font-size:14px">回復(fù)“</span><span style="font-size:14px"><strong>特效源碼</strong></span><span style="font-size:14px">”可獲取各種資料</span></p><blockquote><p>目前的一個(gè)小程序項(xiàng)目需要把客戶之前的h5頁(yè)面嵌入到現(xiàn)在的小程序中，并且之前的支付功能要正常。小程序提供了webview開(kāi)放能力供我們使用，但是不允許在webview直接調(diào)起微信支付。因此只能另辟蹊徑。我們今天來(lái)講一講。在小程序的webview里實(shí)現(xiàn)微信支付功能。</p></blockquote><p><span style="font-size:15px">在webview中不能支付，那只能把webview嵌入h5頁(yè)面的支付挪到小程序中，也就是把支付時(shí)的參數(shù)傳給小程序，小程序調(diào)起原生支付，這里面有兩種情況，一種是同一主體的，另外一種是非同主體。</span></p><h4><strong><span style="font-size:16px">1.同主體</span></strong></h4><p><span style="font-size:15px">適用場(chǎng)景：同一主體下H5頁(yè)面</span></p><p><span style="font-size:15px">前置條件：商戶號(hào)已和小程序綁定</span></p><p><span style="font-size:15px">流程：H5內(nèi)獲取支付必須參數(shù)，傳遞給小程序，小程序內(nèi)調(diào)用支付</span></p><p><span style="font-size:15px"/></p><div class="image-package"><img src="https://upload-images.jianshu.io/upload_images/8877503-50346ac18761c32c.jpeg" img-data="{"format":"jpeg","size":84693,"height":777,"width":779}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p>
</p><h4><strong><span style="font-size:16px">2.非同一主體</span></strong></h4><p><span style="font-size:15px">適用場(chǎng)景：第三方商品</span></p><p><span style="font-size:15px">前置條件：商戶號(hào)已和小程序綁定</span></p><p><span style="font-size:15px">原理：由于第三方商品是內(nèi)嵌第三方頁(yè)面，需要傳遞當(dāng)前小程序appid，結(jié)合第三方商戶號(hào)等信息，調(diào)用微信統(tǒng)一下單接口，返回支付必須參數(shù)。小程序內(nèi)發(fā)起支付。</span></p><div class="image-package"><img src="https://upload-images.jianshu.io/upload_images/8877503-256d52d670c898e2.jpeg" img-data="{"format":"jpeg","size":85037,"height":777,"width":781}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><p><span style="font-size:15px">接下來(lái)就是代碼實(shí)現(xiàn)，webview中src中配置網(wǎng)頁(yè)鏈接，參數(shù)的話，通過(guò)get方式傳遞</span></p><span style="font-size:inherit"><<span style="font-size:inherit">web-view</span> <span style="font-size:inherit">src</span>=<span style="font-size:inherit">"xxx.com?name='zhangsan'"</span>></span><span style="font-size:inherit"></<span style="font-size:inherit">web-view</span>></span>
<p><span style="font-size:15px">h5頁(yè)面可以直接在url中獲取到，這里就不過(guò)多解釋。拿到參數(shù)后可以處理其他邏輯，重點(diǎn)（需要后端配合），生成的支付參數(shù)要用小程序的方式，參數(shù)格式如下</span>
</p>timeStamp: <span style="font-size:inherit">''</span>,
nonceStr: <span style="font-size:inherit">''</span>,
<span style="font-size:inherit">package</span>: <span style="font-size:inherit">''</span>,
signType: <span style="font-size:inherit">'MD5'</span>,
paySign: <span style="font-size:inherit">''</span>,
<p><span style="font-size:15px">拿到參數(shù)后，只需要在重新打開(kāi)小程序頁(yè)面即可，打開(kāi)方式</span>
</p><div class="image-package"><img src="https://upload-images.jianshu.io/upload_images/8877503-a7d1f8238fbe3c6e.jpeg" img-data="{"format":"jpeg","size":64442,"height":852,"width":1080}" class="uploaded-img" style="min-height:200px;min-width:200px;" width="auto" height="auto"/>
</div><span style="font-size:inherit">let</span> url = <span style="font-size:inherit">"../payPage/index?payParam="</span><span style="font-size:inherit">encodeURIComponent</span>(<span style="font-size:inherit">JSON</span>.stringify(payParam));
wx.miniProgram.navigateTo({
<span style="font-size:inherit">url</span>: url
});
<p><span style="font-size:15px">保險(xiǎn)一點(diǎn)，我們用 encodeURIComponent 函數(shù)編碼，通過(guò)這種方式，可以打開(kāi)小程序，只需要在小程序?qū)?yīng)頁(yè)面中，接收參數(shù)，調(diào)用支付即可。</span></p><p><span style="font-size:14px">注意：記得在小程序頁(yè)面用 <span style="font-size:14px">decodeURIComponent 解碼</span></span></p><p><span style="font-size:15px">非同一主體流程一樣，只不過(guò)在用webview的時(shí)候，把當(dāng)前小程序的appid一同傳過(guò)去，生成的支付參數(shù)要用傳遞過(guò)去的appid生成，這樣才能在當(dāng)前小程序支付。其他的也不多說(shuō)，這都是一步一步調(diào)通并上線的項(xiàng)目，如果有不懂的可以留言。
</span></p>