uniapp實現(xiàn)微信小程序支付(前端)詳細代碼
1.本篇主要是介紹uniapp微信小程序支付以及小程序內(nèi)置網(wǎng)頁跳轉(zhuǎn)H5頁面兩個方向的微信支付流程
2.微信小程序內(nèi)微信支付
uni.request({ url:"請求路徑", method:"方法", data:{ 后端需要的數(shù)據(jù) }, success(payRes){ //payRes這里主要有幾個參數(shù)后面會調(diào)取uni的支付接口需要使用,下面會介紹每個數(shù)據(jù) //這個請求結(jié)束后就是前端最重要的步驟了,需要拉起支付密碼框來完成支付 uni.requestPayment({ "provider": "wxpay",//支付方式 "timeStamp":payRes.data.timeStamp,//時間戳 "nonceStr":payRes.data.nonceStr,//隨機字符串 "package":payRes.data.package,//接口返回的prepay_id "signType":payRes.data.signType,//簽名算法,需要與后臺下單時一致 "paySign":payRes.data.paySign,簽名 success: function (resSuccess) { //觸發(fā)該success時已經(jīng)是輸入密碼支付成功后觸發(fā),可做一些頁面跳轉(zhuǎn)和成功提示 }, fail: function (err) { //支付失敗時出發(fā),比如取消支付、余額不足等 } }); } })
3.小程序內(nèi)部跳轉(zhuǎn)H5頁面進行微信支付
1.H5支付因為是非微信內(nèi)部的支付,所以需要安裝使用微信的JS-SDK包來實現(xiàn),所以實現(xiàn)寫法會有一些改變,但是大同小異。
2.現(xiàn)在控制臺輸入指令(安裝了node.js的情況下,我這里是16.6的版本)npm i jweixin-module -S
<script> //這里兩種引入方式 一種是node的require,還有一種就是常用的import的方式引入 效果都一樣 const jweixin = require("jweixin ") export default { data(){ return { } }, methods:{ uni.request({ url:"請求路徑", method:"方法", data:{ 后端需要的數(shù)據(jù) }, success(payRes)=>{ payMent(){ //首先要對jweixin進行初始化配置 jweixin.config({ debug:false,//是否開啟調(diào)度模式,開啟測試支付時會有彈窗 appId: payRes.data.appId, // 公眾號的唯一標識 timestamp: payRes.data.timeStamp, // 生成簽名的時間戳 nonceStr: payRes.data.nonceStr, // 生成簽名的隨機串 signature: payRes.data.signType, //簽名 jsApiList: ['chooseWXPay'] // 必填 }) jweixin.chooseWXPay({ timestamp: payRes.data.timeStamp, // 支付簽名時間戳 nonceStr: payRes.data.nonceStr, // 支付簽名隨機串,不長于 32 位 package: payRes.data.package, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值 signType: payRes.data.signType, // 簽名方式 paySign: payRes.data.paySign, // 支付簽名 success(res){ //成功 }, fail(res){ //失敗 } }) } } }) } } </scrpit>
4.小程序如何用內(nèi)置瀏覽器跳轉(zhuǎn)其他H5頁面
1.小程序內(nèi)沒法直接跳轉(zhuǎn)至某個網(wǎng)頁(我沒找到),但是可以通過<web-view>來嵌套H5網(wǎng)頁,默認全屏,跳轉(zhuǎn)網(wǎng)址寫在src中。
2.我這里的H5頁面是有uni生成的,自動生成的H5項目是hash模式,如果我們需要向H5頁面?zhèn)鲄ⅲ趕rc中寫網(wǎng)址的時候就必須帶#/,例如:http://192.168.0.1/#/?id=sadas。也可以在manifest.json中將路由模式改為history
3.我把web-view單獨寫了一個頁面,將H5的網(wǎng)址利用路由傳參的方式傳遞個web-view頁面(因為需要傳入用戶信息),受到路由長度的限制,需要先利用encodeURIComponent對格式進行轉(zhuǎn)換,在web-view頁面再用decodeURIComponent對傳入?yún)?shù)進行解析
//跳轉(zhuǎn)頁面 <script> export default{ methods:{ goPage(){ uni.navihateTo({ url:`/page/webView/webView?url=${encodeURIComponent("訪問地址"))}` }) } } } </script> //web-view <template> <web-view :src="url"></web-view> </template> <script> export default{ data(){ return { url:"" } } onLoad(option){ this.url =decodeURIComponen(option.url) } } </script>
5.過程中遇到的問題
1.H5寫的微信支付,安卓無法使用,ios沒問題,找了半天沒找到解決方案
總結(jié)
到此這篇關(guān)于uniapp實現(xiàn)微信小程序支付(前端)的文章就介紹到這了,更多相關(guān)uniapp微信小程序支付內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Bootstrap Navbar Component實現(xiàn)響應(yīng)式導(dǎo)航
這篇文章主要介紹了Bootstrap Navbar Component實現(xiàn)響應(yīng)式導(dǎo)航的相關(guān)資料,講解了Bootstrap Navbar應(yīng)用及源碼解析,需要的朋友可以參考下2016-10-10深入理解JavaScript系列(9) 根本沒有“JSON對象”這回事!
寫這篇文章的目的是經(jīng)??吹介_發(fā)人員說:把字符串轉(zhuǎn)化為JSON對象,把JSON對象轉(zhuǎn)化成字符串等類似的話題,所以把之前收藏的一篇老外的文章整理翻譯了一下,供大家討論,如有錯誤,請大家指出,多謝2012-01-01JS中的算法與數(shù)據(jù)結(jié)構(gòu)之字典(Dictionary)實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之字典(Dictionary),結(jié)合實例形式詳細分析了javascript數(shù)據(jù)結(jié)構(gòu)中字典的概念、原理、定義與常見使用方法,需要的朋友可以參考下2019-08-08javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)
這篇文章給大家介紹了javascript實現(xiàn)的動態(tài)添加表單元素input,button等(appendChild)的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友參考下吧2007-11-11three.js實現(xiàn)炫酷的全景3D重力感應(yīng)
這篇文章主要為大家詳細介紹了three.js實現(xiàn)炫酷的全景3D重力感應(yīng),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-12-12