目錄

實(shí)現(xiàn)PC端微信掃碼

簡(jiǎn)介

實(shí)現(xiàn)步驟

1. 獲取商戶號(hào)

2. 生成支付二維碼

3. 監(jiān)聽(tīng)支付結(jié)果

4. 發(fā)起支付請(qǐng)求

5. 處理支付回調(diào)

示例代碼

結(jié)論

Native支付

Native支付的工作原理

Native支付的優(yōu)勢(shì)

Native支付的應(yīng)用和市場(chǎng)地位

開(kāi)通使用微信 native 支付流程

步驟一：注冊(cè)微信開(kāi)放平臺(tái)賬號(hào)

步驟二：創(chuàng)建應(yīng)用

步驟三：配置支付

步驟四：集成支付功能

步驟五：測(cè)試和上線

qrcode

一、安裝

二、使用

三、模糊識(shí)別（此處為意譯，原文直譯為：糾錯(cuò)級(jí)別）

四、二維碼容量

五、編碼模式

混合模式

自動(dòng)模式

手動(dòng)模式

漢字模式

六、多字節(jié)字符

方法介紹

方法一：toDataURL(text, options, callback)

方法二：toString(text, options, callback)

方法三：toBuffer(text, options, callback)

方法四：toFile(path, text, options, callback)

方法五：?create(data, options)

方法六：toCanvas(text, options, callback)

實(shí)現(xiàn)PC端微信掃碼

在本文中，我們將討論如何在PC端實(shí)現(xiàn)微信掃碼native支付功能，并提供代碼案例和qrcode的使用方法

簡(jiǎn)介

微信掃碼native支付是一種方便快捷的支付方式，用戶只需使用微信掃描二維碼即可完成支付操作。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，實(shí)現(xiàn)微信掃碼native支付可以為PC端應(yīng)用添加更多支付選擇，提高用戶體驗(yàn)。

實(shí)現(xiàn)步驟

以下是實(shí)現(xiàn)微信掃碼native支付的步驟：

1. 獲取商戶號(hào)

首先，您需要擁有一個(gè)微信支付商戶號(hào)。如果沒(méi)有，請(qǐng)注冊(cè)一個(gè)商戶賬號(hào)并申請(qǐng)商戶號(hào)。

2. 生成支付二維碼

在PC端應(yīng)用中，您可以使用qrcode庫(kù)生成支付二維碼。這個(gè)庫(kù)可以幫助您生成包含支付信息的二維碼。

const QRCode = require('qrcode');const generatePaymentQRCode = async (paymentInfo) => {const paymentDataURL = await QRCode.toDataURL(JSON.stringify(paymentInfo));// 顯示二維碼圖片，例如將paymentDataURL賦值給img標(biāo)簽的src屬性
};

3. 監(jiān)聽(tīng)支付結(jié)果

用戶掃描二維碼完成支付后，您需要監(jiān)聽(tīng)支付結(jié)果。為了實(shí)現(xiàn)跳轉(zhuǎn)到支付結(jié)果頁(yè)面等功能，您可以使用回調(diào)函數(shù)或事件監(jiān)聽(tīng)器。

const handlePaymentResult = (result) => {// 處理支付結(jié)果，例如跳轉(zhuǎn)到支付結(jié)果頁(yè)面
};const listenPaymentResult = () => {// 監(jiān)聽(tīng)支付結(jié)果，例如通過(guò)回調(diào)函數(shù)或事件監(jiān)聽(tīng)器
};

4. 發(fā)起支付請(qǐng)求

用戶確認(rèn)支付后，您需要向微信支付平臺(tái)發(fā)起支付請(qǐng)求以完成支付。這個(gè)請(qǐng)求可以使用微信支付的API來(lái)實(shí)現(xiàn)。

const initiatePaymentRequest = (paymentInfo) => {// 使用微信支付API發(fā)起支付請(qǐng)求
};

5. 處理支付回調(diào)

發(fā)送支付請(qǐng)求后，您需要處理微信支付平臺(tái)的回調(diào)。支付回調(diào)通常在用戶支付成功后觸發(fā)，您可以在接收到支付回調(diào)后執(zhí)行相應(yīng)的后續(xù)處理，例如更新訂單狀態(tài)或通知用戶支付結(jié)果。

const handlePaymentCallback = () => {// 處理支付回調(diào)，例如更新訂單狀態(tài)或通知用戶支付結(jié)果的操作
};

示例代碼

下面是整理后的示例代碼：

const openDialog = async () => {let result = await reqQrcode(route.query.orderId as string);await generatePaymentQRCode(result.data.codeUrl);dialogVisible.value = true;let timer = setInterval(async () => {let result = await reqQueryPayState(route.query.orderId as string);if (result.data) {dialogVisible.value = false;ElMessage({type: "success",message: "支付成功",});clearInterval(timer);getOrderInfo();}}, 2000);};const generatePaymentQRCode = async (codeUrl) => {const paymentDataURL = await QRCode.toDataURL(codeUrl);// 顯示二維碼圖片，例如將paymentDataURL賦值給img標(biāo)簽的src屬性
};const handlePaymentResult = (result) => {// 處理支付結(jié)果，例如跳轉(zhuǎn)到支付結(jié)果頁(yè)面
};const listenPaymentResult = () => {// 監(jiān)聽(tīng)支付結(jié)果，例如通過(guò)回調(diào)函數(shù)或事件監(jiān)聽(tīng)器
};const initiatePaymentRequest = (paymentInfo) => {// 使用微信支付API發(fā)起支付請(qǐng)求
};const handlePaymentCallback = () => {// 處理支付回調(diào)，例如更新訂單狀態(tài)或通知用戶支付結(jié)果的操作
};

結(jié)論

通過(guò)遵循上述步驟，我們可以在PC端實(shí)現(xiàn)微信掃碼native支付功能。這樣，用戶可以輕松完成支付操作，提高支付的便捷性。

希望本文提供的代碼案例和qrcode庫(kù)的使用方法對(duì)您有所幫助。祝您成功實(shí)現(xiàn)微信掃碼native支付功能！

Native支付是一種廣泛應(yīng)用于移動(dòng)支付領(lǐng)域的支付方式。它基于手機(jī)操作系統(tǒng)的本地功能，允許用戶使用手機(jī)完成支付而無(wú)需依賴第三方支付應(yīng)用或其他設(shè)備。本文將介紹Native支付的工作原理、優(yōu)勢(shì)，以及其在移動(dòng)支付市場(chǎng)中的地位和應(yīng)用。

Native支付

產(chǎn)品介紹 - Native支付 | 微信支付服務(wù)商文檔中心https://pay.weixin.qq.com/docs/partner/products/partner-native-payment/introduction.html

?

1. 商戶后臺(tái)系統(tǒng)根據(jù)用戶選購(gòu)的商品生成訂單。
2. 用戶確認(rèn)支付后調(diào)用微信支付【Native下單API】生成預(yù)支付交易。
3. 微信支付系統(tǒng)收到請(qǐng)求后生成預(yù)支付交易單，并返回交易會(huì)話的二維碼鏈接code_url。
4. 商戶后臺(tái)系統(tǒng)根據(jù)返回的code_url生成二維碼。
5. 用戶打開(kāi)微信“掃一掃”掃描二維碼，微信客戶端將掃碼內(nèi)容發(fā)送到微信支付系統(tǒng)。
6. 微信支付系統(tǒng)收到客戶端請(qǐng)求，驗(yàn)證鏈接有效性后發(fā)起用戶支付，要求用戶授權(quán)。
7. 用戶在微信客戶端輸入密碼，確認(rèn)支付后，微信客戶端提交授權(quán)。
8. 微信支付系統(tǒng)根據(jù)用戶授權(quán)完成支付交易。
9. 微信支付系統(tǒng)完成支付交易后給微信客戶端返回交易結(jié)果，并將交易結(jié)果通過(guò)短信、微信消息提示用戶。微信客戶端展示支付交易結(jié)果頁(yè)面。
10. 微信支付系統(tǒng)通過(guò)發(fā)送異步消息通知商戶后臺(tái)系統(tǒng)支付結(jié)果。商戶后臺(tái)系統(tǒng)需回復(fù)接收情況，通知微信后臺(tái)系統(tǒng)不再發(fā)送該單的支付通知。
11. 未收到支付通知的情況，商戶后臺(tái)系統(tǒng)調(diào)用【查詢訂單API】。
12. 商戶確認(rèn)訂單已支付后給用戶發(fā)貨。

Native支付的工作原理

Native支付利用手機(jī)操作系統(tǒng)的本地支付功能實(shí)現(xiàn)支付過(guò)程。它通常與商家的移動(dòng)應(yīng)用程序或移動(dòng)網(wǎng)頁(yè)集成，為用戶提供便捷、安全的支付方式。以下是Native支付的一般工作流程：

1. 用戶在商家的移動(dòng)應(yīng)用程序或移動(dòng)網(wǎng)頁(yè)上選擇商品并進(jìn)入支付頁(yè)面。
2. 商家通過(guò)移動(dòng)支付軟件開(kāi)發(fā)工具包（SDK）調(diào)用手機(jī)操作系統(tǒng)的本地支付功能。
3. 用戶輸入支付密碼、指紋或進(jìn)行人臉識(shí)別等身份驗(yàn)證方式。
4. 手機(jī)操作系統(tǒng)向支付服務(wù)提供商發(fā)送支付請(qǐng)求，并進(jìn)行支付驗(yàn)證。
5. 支付服務(wù)提供商驗(yàn)證支付請(qǐng)求的合法性，并向商家和用戶返回支付結(jié)果。
6. 商家根據(jù)支付結(jié)果完成訂單處理，向用戶提供支付成功的確認(rèn)信息。

Native支付的優(yōu)勢(shì)

Native支付相對(duì)于傳統(tǒng)的移動(dòng)支付方式具有以下優(yōu)勢(shì)：

1. 便捷性：Native支付與手機(jī)操作系統(tǒng)的本地功能緊密集成，用戶可以在商家的移動(dòng)應(yīng)用程序內(nèi)直接完成支付，無(wú)需下載額外的支付應(yīng)用或使用其他設(shè)備。
2. 安全性：通過(guò)本地支付功能，Native支付可以利用手機(jī)操作系統(tǒng)提供的身份驗(yàn)證和加密技術(shù)，保護(hù)用戶的支付信息和個(gè)人隱私。
3. 用戶體驗(yàn)：Native支付在用戶界面上通常與商家的移動(dòng)應(yīng)用程序或移動(dòng)網(wǎng)頁(yè)無(wú)縫銜接，提供一致的用戶體驗(yàn)，無(wú)需用戶在不同應(yīng)用之間切換。
4. 商戶支持：Native支付對(duì)于商家來(lái)說(shuō)也非常便利，商家可以通過(guò)集成本地支付功能，提供更多的支付選擇，提升用戶支付意愿和購(gòu)買體驗(yàn)。

Native支付的應(yīng)用和市場(chǎng)地位

Native支付作為一種普遍采用的支付方式，在移動(dòng)支付市場(chǎng)中具有重要地位。許多主流的移動(dòng)支付服務(wù)提供商，如Apple Pay、Google Pay和Samsung Pay，都采用了Native支付技術(shù)。此外，許多電子商務(wù)平臺(tái)、餐飲、零售和出行服務(wù)提供商也積極采用Native支付，以提供更便捷、安全的支付體驗(yàn)。

盡管Native支付在移動(dòng)支付市場(chǎng)中占據(jù)重要地位，但也面臨一些挑戰(zhàn)。例如，不同的手機(jī)操作系統(tǒng)之間存在兼容性問(wèn)題，導(dǎo)致用戶的選擇和支付方式受到限制。此外，在一些地區(qū)，移動(dòng)支付基礎(chǔ)設(shè)施的發(fā)展仍存在不足，限制了Native支付的普及程度。

綜上所述，Native支付作為一種便捷、安全的移動(dòng)支付方式，已經(jīng)在移動(dòng)支付市場(chǎng)中獲得廣泛應(yīng)用。隨著技術(shù)的進(jìn)步和數(shù)字支付環(huán)境的不斷改善，Native支付有望繼續(xù)發(fā)展并為用戶提供更加便利的支付體驗(yàn)。

開(kāi)通使用微信 native 支付流程

本文介紹了如何開(kāi)通并使用微信 native 支付，以便在您的應(yīng)用程序或網(wǎng)站中實(shí)現(xiàn)便捷的支付功能。請(qǐng)按照以下步驟進(jìn)行操作。

步驟一：注冊(cè)微信開(kāi)放平臺(tái)賬號(hào)

1. 打開(kāi)微信開(kāi)放平臺(tái)官網(wǎng)。
2. 點(diǎn)擊右上角的"注冊(cè)"按鈕，填寫相關(guān)信息并創(chuàng)建賬號(hào)。
3. 登錄微信開(kāi)放平臺(tái)賬號(hào)。

步驟二：創(chuàng)建應(yīng)用

1. 在微信開(kāi)放平臺(tái)控制臺(tái)，點(diǎn)擊"創(chuàng)建應(yīng)用"。
2. 填寫應(yīng)用名稱、應(yīng)用類型和應(yīng)用描述等相關(guān)信息。
3. 選擇"支付產(chǎn)品"中的"小程序支付"，并填寫相關(guān)信息。
4. 點(diǎn)擊"提交"后，等待審核。

步驟三：配置支付

1. 審核通過(guò)后，在微信開(kāi)放平臺(tái)控制臺(tái)，進(jìn)入"開(kāi)發(fā)配置"，找到"支付配置"。
2. 點(diǎn)擊"修改配置"，填寫商戶號(hào)和API密鑰等支付相關(guān)信息。
3. 配置成功后，點(diǎn)擊"提交"。

步驟四：集成支付功能

1. 根據(jù)您的開(kāi)發(fā)語(yǔ)言和技術(shù)棧，選擇合適的微信支付 API。
2. 引入相關(guān)的微信支付庫(kù)，例如在 JavaScript 中可以使用 wxpay.js。
3. 在您的應(yīng)用或網(wǎng)站中，編寫代碼調(diào)用相應(yīng)的支付接口。

下面是一個(gè)使用 JavaScript 的簡(jiǎn)單示例代碼：

<script>function onBridgeReady() {WeixinJSBridge.invoke('getBrandWCPayRequest', {"appId": "", // 替換為您的APP ID"timeStamp": "", // 替換為服務(wù)器返回的時(shí)間戳"nonceStr": "", // 替換為服務(wù)器返回的隨機(jī)字符串"package": "", // 替換為服務(wù)器返回的package"signType": "MD5", // 替換為服務(wù)器返回的簽名類型"paySign": "" // 替換為服務(wù)器返回的簽名},function(res) {if (res.err_msg == "get_brand_wcpay_request:ok") {// 支付成功，跳轉(zhuǎn)到支付成功頁(yè)面或進(jìn)行其他操作} else {// 支付失敗，跳轉(zhuǎn)到支付失敗頁(yè)面或進(jìn)行其他操作}});}if (typeof WeixinJSBridge === "undefined") {if (document.addEventListener) {document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);} else if (document.attachEvent) {document.attachEvent('WeixinJSBridgeReady', onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}} else {onBridgeReady();}
</script>

步驟五：測(cè)試和上線

1. 在開(kāi)發(fā)環(huán)境下，通過(guò)模擬支付流程，測(cè)試支付功能的正確性。
2. 確保支付功能正常后，將應(yīng)用部署到生產(chǎn)環(huán)境，并進(jìn)行真實(shí)支付測(cè)試。
3. 在支付功能正常并通過(guò)測(cè)試后，即可上線使用。

希望本文能幫助您了解并成功開(kāi)通微信 native 支付，并在您的應(yīng)用或網(wǎng)站中實(shí)現(xiàn)便捷的支付體驗(yàn)。注意確保遵守微信支付的相關(guān)規(guī)定和政策。

qrcode

qrcode?是一個(gè)流行的 Node.js 庫(kù)，用于生成 QR 碼（Quick Response Code）。它提供了一系列方法，可以方便地生成和自定義 QR 碼。

以下是 qrcode 庫(kù)的主要方法：

一、安裝

npm install --save qrcode

二、使用

<!-- index.html -->
<html><body><canvas id="canvas"></canvas><script src="bundle.js"></script> </body>
</html>

// index.js -> bundle.js
var QRCode = require('qrcode')
var canvas = document.getElementById('canvas')QRCode.toCanvas(canvas, 'sample text', function (error) {if (error) console.error(error)console.log('success!');
})

<canvas id="canvas"></canvas><script src="/build/qrcode.min.js"></script>
<script>QRCode.toCanvas(document.getElementById('canvas'), 'sample text', function (error) {if (error) console.error(error)console.log('success!');})
</script> 

import QRCode from 'qrcode' // With promises
QRCode.toDataURL('I am a pony!').then(url => {console.log(url)}).catch(err => {console.error(err)})// With async/await
const generateQR = async text => {try {console.log(await QRCode.toDataURL(text))} catch (err) {console.error(err)}
}

QRCode.toDataURL('some text', { errorCorrectionLevel: 'H' }, function (err, url) {console.log(url)
})

QRCode.toDataURL('some text', { version: 2 }, function (err, url) {console.log(url)
})

手動(dòng)模式

var QRCode = require('qrcode')var segs = [{ data: 'ABCDEFG', mode: 'alphanumeric' },{ data: '0123456', mode: 'numeric' }
]QRCode.toDataURL(segs, function (err, url) {console.log(url)
})

var QRCode = require('qrcode')
var toSJIS = require('qrcode/helper/to-sjis')QRCode.toDataURL(kanjiString, { toSJISFunc: toSJIS }, function (err, url) {console.log(url)
})

<canvas id="canvas"></canvas><script src="/build/qrcode.min.js"></script>
<script src="/build/qrcode.tosjis.min.js"></script>
<script>QRCode.toCanvas(document.getElementById('canvas'),'sample text', { toSJISFunc: QRCode.toSJIS }, function (error) {if (error) console.error(error)console.log('success!')})
</script> 

const qrcode = require('qrcode');qrcode.toDataURL('Hello World', function (err, url) {console.log(url);
});

const qrcode = require('qrcode');qrcode.toString('Hello World', function (err, svgString) {console.log(svgString);
});

const qrcode = require('qrcode');qrcode.toBuffer('Hello World', function (err, buffer) {console.log(buffer);
});

const qrcode = require('qrcode');qrcode.toFile('./qrcode.png', 'Hello World', function (err, path) {console.log(path);
});

const qrcode = require('qrcode');const qr = qrcode.create('Hello World');
console.log(qr); // 返回 QR 碼對(duì)象

const qrcode = require('qrcode');qrcode.toCanvas('Hello World', function (err, canvas) {console.log(canvas);
});