欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

uniapp實(shí)現(xiàn)微信小程序支付(前端)詳細(xì)代碼

 更新時(shí)間:2024年07月12日 11:24:11   作者:SakuraPowerc  
這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)微信小程序支付(前端)的相關(guān)資料,發(fā)現(xiàn)網(wǎng)上教程很多,單只針對(duì)小程序的簡(jiǎn)單清晰的流程卻很少,文字通過(guò)代碼介紹的非常詳細(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)寫(xiě)法會(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)址寫(xiě)在src中。

2.我這里的H5頁(yè)面是有uni生成的,自動(dòng)生成的H5項(xiàng)目是hash模式,如果我們需要向H5頁(yè)面?zhèn)鲄?,在src中寫(xiě)網(wǎng)址的時(shí)候就必須帶#/,例如:http://192.168.0.1/#/?id=sadas。也可以在manifest.json中將路由模式改為history

3.我把web-view單獨(dú)寫(xiě)了一個(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寫(xiě)的微信支付,安卓無(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)文章

最新評(píng)論