天天看點

粉絲福利 | 秒 get 支付寶同款掃碼元件

About Scan

随着支付寶的線下場景不斷擴大,收錢碼、口碑、共享單車、充電寶、停車繳費等産品讓我們的生活越來越便利。

二維碼因為成本低、相容性好成為了線上線上最主要的連接配接工具,也是以面臨更多新的挑戰。

因為二維碼是一種點陣式資訊編碼方式,任何視覺上的缺損、彎曲以及光線作用都會極大的影響識别成功率,如果識别困難也就意味着使用者可能選擇放棄,影響支付體驗也影響使用者心智。

源自支付寶的掃碼元件,全網免費開放!歡迎下載下傳接入~

下載下傳位址

關注「mPaaS」CSDN 賬号即可免費下載下傳

https://download.csdn.net/download/m0_47737908/15684443

插件介紹

本插件是支付寶 mPaaS 的掃碼元件,讓您的 app 可以擁有像支付寶一樣的掃碼體驗,識别速度、識别率遠超開源掃碼。掃碼元件完全免費提供使用,接入時需要您在阿裡雲上進行注冊開通并将 mPaaS 掃碼添加到您的工程即可。

接入過程中,您遇到任何問題,都可以在釘釘上搜尋「32843812」進群進行解答。

歡迎大家使用不同帶有掃碼功能的 App,對以下三種二位碼進行掃碼識别,體驗 mPaaS 掃碼強大的識别能力和識别速度

  • 弱光二維碼
粉絲福利 | 秒 get 支付寶同款掃碼元件
  • 反光二維碼
粉絲福利 | 秒 get 支付寶同款掃碼元件
  • 模糊二維碼
粉絲福利 | 秒 get 支付寶同款掃碼元件

插件使用準備

1.購買插件,選擇該插件綁定的項目。

2.在 HBuilderX 裡找到項目,在 manifest 的 app 原生插件配置中勾選子產品,如需要填寫參數則參考本文添加。

3.根據本文的提供的文檔開發代碼,在代碼中引用插件,調用插件功能。

4.打包自定義基座,選擇插件,得到自定義基座,然後運作時選擇自定義基座,進行 log 輸出測試。

5.開發完畢後正式雲打包

付費原生插件目前不支援離線打包。

Android 離線打包原生插件另見文檔

https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android

iOS 離線打包原生插件另見文檔

https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事項:使用 HBuilderX2.7.14 以下版本,如果同一插件且同一appid下購買并綁定了多個包名,送出雲打包界面提示包名綁定不一緻時,需要在HBuilderX項目中manifest.json->“App原生插件配置”->”雲端插件“清單中删除該插件重新選擇

插件使用流程

1. 開通阿裡雲 mPaaS

登陸阿裡雲賬号通路

mPaaS 産品頁

,點選「立即開通」,即可開溝通 mPaaS 産品。

2. 建立 mPaaS 應用

開通後您需要

建立一個 mPaaS 應用

3. 配置 Config 并下載下傳

3.1 Android

3.1.1 填寫配置資訊,并上傳簽名 APK。

點選 代碼管理 > 代碼配置 > Android,輸入 Package Name(應用包名)(此處以 com.mpaas.demo 為例),上傳編譯并添加簽名後的 APK 安裝包。關于快速生成簽名後的 APK 相關資訊,請參見 生成控制台用簽名 APK。

說明:此處需要上傳簽名後的 APK,mPaaS 會根據簽名資訊進行鑒權。

粉絲福利 | 秒 get 支付寶同款掃碼元件
3.1.2 點選 下載下傳配置,即可擷取 mPaaS 的配置檔案。
粉絲福利 | 秒 get 支付寶同款掃碼元件

3.2 iOS

3.2.1 擷取 mPaaS 的配置檔案

點選 代碼管理 > 代碼配置 > iOS,輸入 bundle ID,并點選下載下傳配置,擷取 .config 配置檔案

粉絲福利 | 秒 get 支付寶同款掃碼元件

4. 導入 config 資訊

使用 UniApp mPaaS 掃碼插件的時候,需要您将 config 資訊導入到 uni-app 工程裡

4.1 Android

将 4.1.2 中下載下傳好的 Android 的 config 資訊,填入您的原生插件配置中,如圖所示

粉絲福利 | 秒 get 支付寶同款掃碼元件
粉絲福利 | 秒 get 支付寶同款掃碼元件

4.2 iOS

将 4.2.1 中下載下傳的 config 檔案,重命名為 meta.config,然後将這個檔案放入到您項目中,例如: /XX project/nativeplugins/Mpaas-Scan/ios/meta.config

5. 使用 uniapp 調用 mPaaS 掃碼

經過上述6步,您已将 mPaaS 掃碼元件添加到您的工程内了。您可以在 uniapp 端調起 mPaaS 掃碼了,示例如下

var mpaasScanModule = uni.requireNativePlugin("Mpaas-Scan-Module")

mpaasScanModule.mpaasScan({
                        // 掃碼 UI 風格,參數可為 qr、bar,預設為 qr
                        'type': 'qr',
                        // 掃碼識别類型,參數可多選,qrCode、barCode,不設定,預設識别所有
                        'scanType':  ['qrCode','barCode'],
                        // 是否隐藏相冊,預設false不隐藏
                        'hideAlbum': false
                    },
                    (ret) => {
                        uni.showModal({
                            title: "彈窗标題",
                            // 傳回值中,resp_code 表示傳回結果值,10:使用者取消,11:其他錯誤,1000:成功
                            // 傳回值中,resp_message 表示傳回結果資訊
                            // 傳回值中,resp_result 表示掃碼結果,隻有成功才會有傳回
                            content: JSON.stringify(ret),
                            showCancel: false,
                            confirmText: "确定"
                        })
                    })      

延伸閱讀: 《史上最全的支付寶二維碼掃碼優化技術方案》

粉絲福利 | 秒 get 支付寶同款掃碼元件
粉絲福利 | 秒 get 支付寶同款掃碼元件

繼續閱讀