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

