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

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

 更新時間:2024年07月12日 11:24:11   作者:SakuraPowerc  
這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)微信小程序支付(前端)的相關(guān)資料,發(fā)現(xiàn)網(wǎng)上教程很多,單只針對小程序的簡單清晰的流程卻很少,文字通過代碼介紹的非常詳細,需要的朋友可以參考下

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)文章

最新評論