《微信小程序開發(fā)零基礎(chǔ)入門-第2版》 課件 （含思政案例） ch14小程序服務(wù)平臺(tái)·銀行卡包小程序

第14章小程序服務(wù)平臺(tái)·基于微信OCR識(shí)別+Vant

Weapp的銀行卡包小程序《微信小程序開發(fā)零基礎(chǔ)入門-第2版》第14章小程序服務(wù)平臺(tái)·基于微信OCR識(shí)別+Vant

Weapp的銀行卡包小程序除了小程序基礎(chǔ)組件與接口能力以外，小程序服務(wù)平臺(tái)還給開發(fā)者提供了更豐富的增值能力。本章將從零開始詳解如何使用“微信服務(wù)平臺(tái)”的“微信OCR識(shí)別“服務(wù)與第三方

組件庫(kù)Vant

Weapp快速開發(fā)實(shí)現(xiàn)一個(gè)銀行卡包小程序。本章學(xué)習(xí)目標(biāo)：掌握自定義組件的開發(fā)和應(yīng)用；掌握Vant

Weapp組件庫(kù)在小程序中的應(yīng)用；掌握“微信OCR識(shí)別”服務(wù)在小程序中的應(yīng)用；能夠在開發(fā)過程中熟練掌握真機(jī)預(yù)覽、調(diào)試等操作。小程序服務(wù)平臺(tái)能力小程序自定義組件準(zhǔn)備工作視圖設(shè)計(jì)邏輯實(shí)現(xiàn)本章小結(jié)01小程序服務(wù)平臺(tái)能力01小程序服務(wù)平臺(tái)能力什么是小程序服務(wù)平臺(tái)0101小程序服務(wù)平臺(tái)能力

除了小程序基礎(chǔ)組件與各類API的接口能力外，小程序還另外有一個(gè)專門的服務(wù)平臺(tái)用于給開發(fā)者提供更多功能豐富的增值能力。開發(fā)者可以根據(jù)需求選購(gòu)不同規(guī)格的平臺(tái)服務(wù)資源。

購(gòu)買完成后，在小程序項(xiàng)目中就可以直接調(diào)用小程序原生接口快捷接入平臺(tái)內(nèi)的能力，高效地完成小程序更多功能。什么是小程序服務(wù)平臺(tái)0101小程序服務(wù)平臺(tái)能力目前小程序服務(wù)平臺(tái)內(nèi)提供的服務(wù)分為四類：AI、安全、地圖和內(nèi)容，節(jié)選了其中部分服務(wù)如圖所示。什么是小程序服務(wù)平臺(tái)cont.01本章案例就將使用AI服務(wù)類中的“微信OCR識(shí)別”服務(wù)來輔助我們完成銀行卡號(hào)的自動(dòng)識(shí)別功能。01小程序服務(wù)平臺(tái)能力微信OCR識(shí)別服務(wù)簡(jiǎn)介0201小程序服務(wù)平臺(tái)能力OCR的概念√全稱是Optical

Character

Recognition（光學(xué)字符識(shí)別）√指的是電子設(shè)備（例如掃描儀或數(shù)碼相機(jī)等）掃描圖片或?qū)嵕爸械淖址ㄟ^檢測(cè)明暗模式確定字符形狀，然后用字符識(shí)別方法將確認(rèn)的形狀翻

譯稱文字的過程。微信OCR識(shí)別服務(wù)簡(jiǎn)介0201小程序服務(wù)平臺(tái)能力

需要注意的是，OCR識(shí)別不能確保100%準(zhǔn)確，可能個(gè)別詞還需要人工二次檢查，如何提高準(zhǔn)確性是OCR識(shí)別技術(shù)最需要攻克的難題。常見的OCR衡量標(biāo)準(zhǔn)有：√識(shí)別速度√誤識(shí)率√拒識(shí)率√UI友好度√產(chǎn)品本身的穩(wěn)定性和易用性等。微信OCR識(shí)別服務(wù)簡(jiǎn)介cont.0201小程序服務(wù)平臺(tái)能力

微信OCR識(shí)別服務(wù)是微信官方團(tuán)隊(duì)提供的一套OCR識(shí)別工具，主要用于識(shí)別卡證圖像。

目前該服務(wù)在微信服務(wù)平臺(tái)中已發(fā)布且屬于AI類，適用于微信小程序和微信公眾號(hào)平臺(tái)。使用該工具可以大幅度提高移動(dòng)端信息錄入效率，提高用戶體驗(yàn)。微信OCR識(shí)別服務(wù)簡(jiǎn)介cont.0201小程序服務(wù)平臺(tái)能力

該服務(wù)廣泛適用于政務(wù)、醫(yī)療、交通、教育、金融等各類行業(yè)，例如

銀行卡、身份證、駕駛證、行駛證、營(yíng)業(yè)執(zhí)照等都可以使用微信OCR識(shí)別服務(wù)快速采集原本需要手工輸入的信息，極大地提升了使用體驗(yàn)。官方示例參考頁(yè)面如圖所示。微信OCR識(shí)別服務(wù)簡(jiǎn)介cont.0201小程序服務(wù)平臺(tái)能力

微信OCR識(shí)別能力還提供了一定額度的免費(fèi)調(diào)用量供開發(fā)者學(xué)習(xí)使用，超出額度需求可以在另外購(gòu)買付費(fèi)資源包使用。

在微信服務(wù)平臺(tái)的詳細(xì)介紹見官方網(wǎng)址：/service/detail/000ce4cec24ca026d37900ed551415。微信OCR識(shí)別服務(wù)簡(jiǎn)介cont.0201小程序服務(wù)平臺(tái)能力

開發(fā)者用小程序注冊(cè)時(shí)的同一個(gè)微信掃碼登錄與后就可以在該網(wǎng)頁(yè)上購(gòu)買服務(wù)了，如圖所示。微信OCR識(shí)別服務(wù)簡(jiǎn)介cont.02當(dāng)前我們選擇的是“100次/天連續(xù)發(fā)放36500天”應(yīng)該足夠?qū)W習(xí)使用了。01小程序服務(wù)平臺(tái)能力

購(gòu)買成功后點(diǎn)擊頁(yè)面右上角“我的訂單”進(jìn)入選擇對(duì)應(yīng)綁定的小程序應(yīng)用即可看到已購(gòu)列表，如圖所示。微信OCR識(shí)別服務(wù)簡(jiǎn)介cont.02此時(shí)就可以在使用了同款小程序AppID的項(xiàng)目中接入該項(xiàng)服務(wù)了，注意每天的調(diào)用次數(shù)是100次。01小程序服務(wù)平臺(tái)能力微信OCR識(shí)別服務(wù)接入0301小程序服務(wù)平臺(tái)能力微信OCR識(shí)別服務(wù)接入03

每個(gè)購(gòu)買的服務(wù)都有各自獨(dú)一無二的APIName和ServiceID，微信OCR識(shí)別服務(wù)接入信息如下，開發(fā)者請(qǐng)記錄下來后續(xù)將用到小程序端的頁(yè)面JS代碼中：API

Name：OcrAllInOneService

ID：wx79ac3de8be320b7101小程序服務(wù)平臺(tái)能力

微信OCR識(shí)別服務(wù)的API如果想在小程序端直接調(diào)用，得放在wx.serviceMarket對(duì)象下使用，需要寫成wx.serviceMarket.invokeService(OBJECT)的形式。其中OBJECT中的參數(shù)如表所示。微信OCR識(shí)別服務(wù)接入cont.03字段名類型說明img_dataString圖片二進(jìn)制或base64數(shù)據(jù)（與img_url二選一）img_urlString圖片URL地址（與img_data二選一）data_typeint1：二進(jìn)制；2：base64字符串；3：圖片urlocr_typeint1：身份證；2：銀行卡；3：行駛證；4：駕駛證；7：營(yíng)業(yè)執(zhí)照；8：通用

OCR;10:車牌識(shí)別01小程序服務(wù)平臺(tái)能力假設(shè)圖片已經(jīng)具有URL地址方法一：Promise格式

嘗試識(shí)別身份證圖片信息的示例代碼如右側(cè)所示：微信OCR識(shí)別服務(wù)接入cont.03wx.serviceMarket.invokeService({service:

"wx79ac3de8be320b71",//服務(wù)商OCR的Service

IDapi:

"OcrAllInOne",//服務(wù)商OCR的API

Namedata:

{img_url:"/xxx.jpg",//url地址換成實(shí)際用的data_type:

3,//圖片是url類型ocr_type:

1,//識(shí)別對(duì)象是身份證類型8.

},}).then(res

=>

{//獲取服務(wù)成功11.console.log("invokeService

success",

res)12.}).catch(err

=>

{//獲取服務(wù)失敗

console.error("invokeService

fail",

err)13.14.15.})這里用了Promise格式的try…catch…then的獲取方式01小程序服務(wù)平臺(tái)能力

方法二：success、fail和complete函數(shù)進(jìn)行成功、失敗以及完成回調(diào)。示例代碼修改如右側(cè)所示：微信OCR識(shí)別服務(wù)接入cont.03wx.serviceMarket.invokeService({service:

"wx79ac3de8be320b71",//服務(wù)商OCR的Service

IDapi:

"OcrAllInOne",//服務(wù)商OCR的API

Namedata:{…無變化，代碼略…},success:

res

=>

{//獲取服務(wù)成功console.log("invokeService

success",

res)8.

},fail:

err

=>

{//獲取服務(wù)失敗console.error("invokeService

fail",

err)12.

},complete:

res

=>{//獲取服務(wù)完成（無論成功還是失敗最終都會(huì)執(zhí)行完成回調(diào)）console.log("invokeService

complete",

res)16.

}17.})注：目前這兩種寫法都可以實(shí)現(xiàn)該功能，開發(fā)者根據(jù)自己實(shí)際開發(fā)風(fēng)格自選。01小程序服務(wù)平臺(tái)能力成功回調(diào)后返回值中關(guān)鍵內(nèi)容如下表所示。微信OCR識(shí)別服務(wù)接入cont.03字段名類型說明idcard_resObject身份證的返回結(jié)果bankcard_resObject銀行卡的返回結(jié)果driving_resObject行駛證的返回結(jié)果driving_license_resObject駕駛證的返回結(jié)果biz_license_resObject營(yíng)業(yè)執(zhí)照的返回結(jié)果ocr_comm_resObject通用OCR的返回結(jié)果plate_comm_resObject車牌識(shí)別的返回結(jié)果需要注意的是，這些返回字段不

會(huì)同時(shí)出現(xiàn)，而是根據(jù)之前

invokeService(OBJECT)請(qǐng)求參數(shù)中的

“orc_type”取值不同而返回對(duì)應(yīng)字段的。例如示例代碼中查詢的是身份證類型，那就只會(huì)返回idcard_res字段了。01小程序服務(wù)平臺(tái)能力身份證idcard_res字段對(duì)象的數(shù)據(jù)結(jié)構(gòu)如下：微信OCR識(shí)別服務(wù)接入cont.03例如想獲取身份證正面的姓名字段，從成功回調(diào)函數(shù)的參數(shù)res中拿到的就是res.data.idcard_.text。//正面圖片{"type":

0,//正面"name":

{"text":"張三"},//姓名"id":

{"text":

"123456789012345678"},//身份證號(hào)碼

"address":

{"text":"廣東省廣州市XXX"},//住址"gender":

{"text":"男"},//性別"nationality":

{"text":"漢"}//民族}//背面圖片{"type":

1,//背面"valid_date":

{"text":

"20171025-20271025"}//有效期}01小程序服務(wù)平臺(tái)能力微信OCR識(shí)別服務(wù)接入cont.03銀行卡bankcard_res字段對(duì)象的數(shù)據(jù)結(jié)構(gòu)如下：{"number":{"text":"1234567890"}//銀行卡號(hào)}本章案例會(huì)用到銀行卡號(hào)識(shí)別，因此從成功回調(diào)函數(shù)的參數(shù)res中拿到的卡號(hào)參數(shù)就是res.data.bankcard_res.text。后續(xù)字段的獲取方法就不再贅述，請(qǐng)開發(fā)者隨意抽選另外一個(gè)返回對(duì)象，嘗試寫出其中某個(gè)字段的正確表達(dá)。02小程序自定義組件02小程序自定義組件上一章我們使用了ColorUI組件庫(kù)快速完成聊天頁(yè)面的設(shè)計(jì)，本章將介紹另外一款小程序組件庫(kù)Vant

Weapp來幫助我們實(shí)現(xiàn)銀行名稱索引的分類顯示和快速定位。本章也將在項(xiàng)目中嘗試自主開發(fā)自定義組件來實(shí)現(xiàn)一款銀行卡組件<bankcard>。02小程序自定義組件小程序UI組件庫(kù)-Vant

Weapp0102小程序自定義組件

有贊小程序組件庫(kù)VantWeapp是一款輕量、可靠的小程序UI組件庫(kù)。

與有贊移動(dòng)端組件庫(kù)Vant基于相同的視覺規(guī)范，并提供一致的API接口，方便開發(fā)者快速搭建小程序應(yīng)用。小程序UI組件庫(kù)-Vant

Weapp0102小程序自定義組件

不少電商類小程序都會(huì)用到這個(gè)組件庫(kù)，例如其中的一款商品卡片組件<van-card>就可以直接引用從而實(shí)現(xiàn)如圖所示的商品展示效果。小程序UI組件庫(kù)-Vant

Weapp0102小程序自定義組件其官方文檔地址：https://youzan.github.io/vant-weapp/#/intro，開發(fā)者未來可以通過查看文檔了解這些第三方組件的引用方式和用法示例。小程序UI組件庫(kù)-Vant

Weapp0102小程序自定義組件VantWeapp有三種安裝方式，開發(fā)者可以根據(jù)自己的實(shí)際情況任選一種。√方法一：通過npm或yarn指令安裝√方法二：通過git下載源碼√方法三：直接下載源碼小程序UI組件庫(kù)-Vant

Weapp0102小程序自定義組件小程序UI組件庫(kù)-Vant

Weapp01√方法一：通過npm或yarn指令安裝小程序目前已經(jīng)支持使用npm或yarn命令安裝第三方包，語(yǔ)法如下：#通過

npm安裝npm

i

@vant/weapp

-S

--production#通過

yarn安裝yarn

add

@vant/weapp

--production02小程序自定義組件小程序UI組件庫(kù)-Vant

Weapp01√方法二：通過git下載源碼也可以通過git下載源代碼，語(yǔ)法如下：git

clone

/youzan/vant-weapp.git02小程序自定義組件小程序UI組件庫(kù)-Vant

Weapp01√方法三：直接下載源碼官方的下載訪問地址是：/youzan/vant-weapp，然后點(diǎn)擊右側(cè)的“Cloneordownload”按鈕，如下圖所示，在下拉畫面中選擇“DownloadZIP”即可下載壓縮包。02小程序自定義組件小程序UI組件庫(kù)-Vant

Weapp01如果有時(shí)候github不太穩(wěn)定會(huì)下載很慢或打不開，開發(fā)者也可以直接使用本書配套提供的代碼包（已經(jīng)下載好了）進(jìn)行學(xué)習(xí)。下載完畢后在代碼包中找到dist文件（路徑在@vant/weapp/dist），將其拷貝到小程序項(xiàng)目中自定義的目錄中即可使用。02小程序自定義組件自主開發(fā)組件模板配置0202小程序自定義組件自主開發(fā)組件模板配置02自基礎(chǔ)庫(kù)1.6.3版本開始小程序平臺(tái)支持開發(fā)者自定義組件（關(guān)于自定義組件的更多介紹見“13.2.1什么是自定義組件”），本章項(xiàng)目將帶大家學(xué)習(xí)如何自主開發(fā)自定義組件<bankcard>用于展示銀

行卡效果。02小程序自定義組件自主開發(fā)組件模板配置cont.02假設(shè)已經(jīng)創(chuàng)建好了小程序項(xiàng)目，在根目錄下新建components文件夾并在其中新建bankcard目錄。對(duì)新增的bankcard目錄右鍵選擇“新建Component“，然后輸入同樣的名字按回車鍵即可自動(dòng)生成自定義組件的wxml、wxss、json和js文件以及它們內(nèi)部的代碼。02小程序自定義組件自主開發(fā)組件模板配置cont.02bankcard.wxml文件自動(dòng)生成的代碼如下：<!--components/bankcard/bankcard.wxml--><text>components/bankcard/bankcard.wxml</text>可以將其中第2行刪掉等待后續(xù)補(bǔ)充。02小程序自定義組件自主開發(fā)組件模板配置cont.02bankcard.wxss文件自動(dòng)生成的代碼如下：1./*

components/bankcard/bankcard.wxss

*/暫時(shí)不需要做任何更改，后續(xù)會(huì)補(bǔ)充一些樣式代碼。02小程序自定義組件自主開發(fā)組件模板配置cont.02bankcard.json文件自動(dòng)生成的代碼如下：1.

{"component":true,"usingComponents":

{}4.

}該內(nèi)容無需做任何更改。02小程序自定義組件自主開發(fā)組件模板配置cont.02bankcard.js文件自動(dòng)生成的代碼如下：//

components/bankcard/bankcard.jsComponent({3.

/***組件的屬性列表*/properties:

{7.8.

},9.10.

/***組件的初始數(shù)據(jù)*/data:

{14.15.

},16.17.

/***組件的方法列表*/methods:

{21.22.

}23.})此時(shí)自定義組件基礎(chǔ)模板就創(chuàng)建好了，后續(xù)將在視圖設(shè)計(jì)環(huán)節(jié)補(bǔ)充具體的內(nèi)容。03準(zhǔn)備工作03準(zhǔn)備工作01項(xiàng)目創(chuàng)建03準(zhǔn)備工作為了節(jié)約時(shí)間，這里我們直接把2.1.5節(jié)完成的小程序空白模板代碼包templateDemo復(fù)制一份并重命名為demo14_bankCard,導(dǎo)入開發(fā)工具等待改造。導(dǎo)入方法見2.1.5節(jié)“2導(dǎo)入代碼包”。01項(xiàng)目創(chuàng)建03準(zhǔn)備工作02頁(yè)面配置03準(zhǔn)備工作02頁(yè)面配置在app.json文件的pages屬性中追加2個(gè)新路徑地址"pages/add/add"和"pages/list/list"，然后按快捷鍵Ctrl+S保存修改后會(huì)在pages文件夾下自動(dòng)生成add和list目錄及其內(nèi)部的頁(yè)面文件。計(jì)劃頁(yè)面用法如下：index頁(yè)面用于顯示首頁(yè)；add頁(yè)面用于顯示銀行卡信息錄入頁(yè)；list頁(yè)面用于顯示可供選擇的銀行名稱索引。03準(zhǔn)備工作03自定義組件03準(zhǔn)備工作03自定義組件1）Vant

Weapp組件庫(kù)引入在根目錄中新建文件夾plugins，然后將事先下載好的Vant

Weapp組件庫(kù)代碼包中的dist目錄（@vant/weapp/dist）復(fù)制粘貼進(jìn)去并更名為weapp。03準(zhǔn)備工作03自定義組件1）Vant

Weapp組件庫(kù)引入cont.接下來查閱Vant

Weapp官方文檔把需要用到的組件在app.json或頁(yè)面json文件中的usingComponents屬性內(nèi)部進(jìn)行聲明。由于本次有多個(gè)頁(yè)面需要共享其中一些組件，因此不妨直接在app.json文件中聲明一次即可，無需在不同的頁(yè)面中重復(fù)聲明相同的組件。03準(zhǔn)備工作03自定義組件1）Vant

Weapp組件庫(kù)引入

cont.app.json的組件聲明參考代碼如下：1.

{"pages":[…],"window":{…},…,"usingComponents":

{"van-button":

"/plugins/weapp/button/index","van-cell":

"/plugins/weapp/cell/index","van-cell-group":

"/plugins/weapp/cell-group/index","van-field":

"/plugins/weapp/field/index","van-icon":

"/plugins/weapp/icon/index","van-index-bar":

"/plugins/weapp/index-bar/index","van-index-anchor":

"/plugins/weapp/index-anchor/inde13.

}14.}03準(zhǔn)備工作03自定義組件1）Vant

Weapp組件庫(kù)引入cont.引用的Vant

Weapp組件介紹如下：<van-button>：按鈕；<van-cell>：?jiǎn)卧瘢?lt;van-cell-group>：?jiǎn)卧穹纸M；<van-field>：表單輸入框,<van-icon>：圖標(biāo)；<van-index-bar>：索引欄；<van-index-anchor>：索引欄分組頭部。注意：在app.json文件中不要有"style":"v2"，因?yàn)檫@是小程序的新版基礎(chǔ)組件聲明，里面有很多強(qiáng)行加的樣式難以覆蓋，如保留會(huì)造成部分第三方組件錯(cuò)位等情況。03準(zhǔn)備工作03自定義組件2）自定義組件bankcard配置請(qǐng)按照“14.2.2自主開發(fā)組件模板配置“一節(jié)介紹的內(nèi)容完成自定義組件<bankcard>的基礎(chǔ)模板文件創(chuàng)建和首頁(yè)json文件的組件引用聲明。然后在需要用該組件的頁(yè)面json的“usingComponents“屬性中引用組件路徑。本次項(xiàng)目會(huì)在首頁(yè)展示銀行卡列表，因此index.json代碼新增如下：1.

{"usingComponents":

{"bankcard":

"/components/bankcard/bankcard"4.

}5.

}03準(zhǔn)備工作04公共JS文件03準(zhǔn)備工作04公共JS文件在小程序項(xiàng)目的根目錄下新建utils文件夾，并在其中新建tool.js文件，代碼如下：1.…待補(bǔ)充…2.//導(dǎo)出公共函數(shù)和數(shù)據(jù)module.exports

=

{…待補(bǔ)充…6.

}等需要使用時(shí)往里面追加公共函數(shù)和數(shù)據(jù)即可。03準(zhǔn)備工作此時(shí)項(xiàng)目的準(zhǔn)備工作就完成了，項(xiàng)目的目錄結(jié)構(gòu)如圖所示。04視圖設(shè)計(jì)04視圖設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)0104視圖設(shè)計(jì)導(dǎo)航欄設(shè)計(jì)01用戶可以通過在app.json中對(duì)window屬性進(jìn)行重新配置來自定義導(dǎo)航欄效果。本次項(xiàng)目因追求簡(jiǎn)約樣式，默認(rèn)用白底黑字風(fēng)格，app.json文件代碼如下："window":{"navigationBarBackgroundColor":

"#fff","navigationBarTitleText":"我的銀行卡包","navigationBarTextStyle":"black"5.

},04視圖設(shè)計(jì)自定義組件bankcard設(shè)計(jì)0204視圖設(shè)計(jì)自定義組件bankcard設(shè)計(jì)02自定義組件bankcard需要是一個(gè)矩形的卡片樣式，可以適當(dāng)增加圓角邊框和陰影效果?？ㄆ系膬?nèi)容分成上下2行，第一行顯示銀行卡圖標(biāo)和銀行名稱，第二行顯示銀行卡號(hào)和復(fù)制圖標(biāo)按鈕?？蚓€圖如圖所示。04視圖設(shè)計(jì)自定義組件bankcard設(shè)計(jì)cont.02計(jì)劃使用基礎(chǔ)組件如下：整體卡片：<view

class=”card”>；單行區(qū)域：<view

class=”cardBar”>；圖標(biāo)：第三方Vant

Weapp組件庫(kù)圖標(biāo)組件<van-icon>；銀行名稱和卡號(hào)：<text>組件。04視圖設(shè)計(jì)【首頁(yè)】設(shè)計(jì)0304視圖設(shè)計(jì)【首頁(yè)】設(shè)計(jì)03計(jì)劃使用的組件如下：銀行卡片區(qū)域：<view

class=”cardBox”>；銀行卡片：自定義銀行卡組件<bankcard>；添加按鈕：Vant

Weapp組件庫(kù)的按鈕組件<van-button>。04視圖設(shè)計(jì)【首頁(yè)】設(shè)計(jì)cont.03<bankcard

bgColor="orange

"cardName="建設(shè)銀行"cardNum="622234211234021

"></bankcard>04視圖設(shè)計(jì)【銀行卡信息錄入頁(yè)】設(shè)計(jì)0404視圖設(shè)計(jì)【銀行卡信息錄入頁(yè)】設(shè)計(jì)04計(jì)劃使用的組件如下：整體容器與各區(qū)域：<view>；主副標(biāo)題：<view>；文本輸入框：Vant

Weapp組件庫(kù)的文本輸入組件<van-field>；按鈕：Vant

Weapp組件庫(kù)的按鈕組件<van-button>。04視圖設(shè)計(jì)【銀行卡信息錄入頁(yè)】設(shè)計(jì)04關(guān)鍵代碼如下：<!--3表單區(qū)域--><view

class="formBox"><!--3-1銀行名稱輸入框--><van-field

label="銀行名稱"placeholder="請(qǐng)輸入或選擇銀行名稱"required

right-icon="search"/><!--3-2銀行卡號(hào)輸入框-->

<van-field

type="number"

label="銀行卡號(hào)"placeholder="請(qǐng)掃描識(shí)別銀行卡號(hào)"border="{{

false}}"

required

right-icon="photo-o"/></view>04視圖設(shè)計(jì)【銀行名稱索引頁(yè)】設(shè)計(jì)0504視圖設(shè)計(jì)【銀行名稱索引頁(yè)】設(shè)計(jì)05使用其中的自定義索引列表頁(yè)面即可，會(huì)用到組件如下：<van-index-bar>:Vant

Weapp組件庫(kù)的索引欄組件；<van-index-anchor>:Vant

Weapp組件庫(kù)的索引分組頭部；<van-cell>：Vant

Weapp組件庫(kù)的單元格組件。04視圖設(shè)計(jì)05【銀行名稱索引頁(yè)】設(shè)計(jì)關(guān)鍵代碼如下：<van-index-bar

index-list="{{

indexList

}}"><view><van-index-anchor

index="G"

/><van-cell

title="光大銀行"/><van-cell

title="廣發(fā)銀行"/></view>…</van-index-bar>05邏輯實(shí)現(xiàn)05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯0105邏輯實(shí)現(xiàn)【首頁(yè)】邏輯011）根據(jù)本地緩存顯示銀行卡列表05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯011）根據(jù)本地緩存顯示銀行卡列表因?yàn)楫?dāng)前還沒有任何銀行卡數(shù)據(jù)存在本地緩存，這里可以臨時(shí)在index.js的onload()函數(shù)中錄入一些數(shù)據(jù)進(jìn)緩存試用。index.js相關(guān)代碼如右側(cè)所示：//臨時(shí)存放一個(gè)本地緩存let

cardList

=

[{bgColor:

"tomato",cardName:"光大銀行",cardNum:

"622212345678123"6.

},7.

{bgColor:

"rebeccapurple",cardName:"中信銀行",cardNum:

"622254321234321"11.

}]12. wx.setStorageSync("cardList",

cardList)05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯011）根據(jù)本地緩存顯示銀行卡列表cont.保存并重新運(yùn)行后檢查調(diào)試器的Storage面板就會(huì)發(fā)現(xiàn)已經(jīng)有了一些本地緩存數(shù)據(jù)，如圖所示。此時(shí)就可以把onload()函數(shù)中的內(nèi)容刪掉，然后用這個(gè)臨時(shí)數(shù)據(jù)來做后續(xù)的邏輯實(shí)現(xiàn)。05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯011）根據(jù)本地緩存顯示銀行卡列表cont.假設(shè)當(dāng)前本地緩存中這些數(shù)據(jù)就是之前添加成功的銀行卡信息，現(xiàn)在我們修改index.js的onshow()函數(shù)把它們讀取出來并更新到頁(yè)面上。onshow:

function

()

{//獲取本地緩存let

cardList

=

wx.getStorageSync("cardList")//更新到頁(yè)面上this.setData({cardList:

cardList7.

})8.

},在首頁(yè)不關(guān)閉的前提下新打開了其它頁(yè)面再返回首頁(yè)時(shí)onload()不會(huì)重新被觸發(fā)；而onshow()是只要首頁(yè)被隱藏了又重新顯示出來都會(huì)再次觸發(fā)，這樣能確保數(shù)據(jù)及時(shí)更新。05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯01根據(jù)本地緩存顯示銀行卡列表cont.修改index.wxml文件，使用wx:for屬性根據(jù)cardList數(shù)組的取值循環(huán)渲染出全部卡片。<view

class="cardBox"><!--循環(huán)渲染每一張卡片-->

<bankcard

wx:for="{{cardList}}

"

wx:key="cardNum"bgColor="{{item.bgColor}}"

cardName="{{item.cardName}}

"cardNum="{{item.cardNum}}

"

></bankcard></view>05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯012）長(zhǎng)按刪除單張銀行卡05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯012）長(zhǎng)按刪除單張銀行卡如果有些銀行卡不需要了，可以考慮長(zhǎng)按刪除它。為了防止誤刪，每次都應(yīng)彈出對(duì)話框讓用戶二次確認(rèn)，確認(rèn)后刪除本地緩存和頁(yè)面顯示的指定卡號(hào)信息。05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯012）長(zhǎng)按刪除單張銀行卡cont.首先需要查找當(dāng)前要?jiǎng)h的卡號(hào)在緩存數(shù)組里面的下標(biāo)，查到后刪除指定數(shù)組元素即可。找到公共JS文件utils/tool.js，追加公共函數(shù)getCardIndex(String

cardNum,Array[]

cardList)用于獲取卡號(hào)cardNum在數(shù)組

cardList中的下標(biāo)，如果是-1表示卡號(hào)不存在，否則就返回正確的數(shù)組下標(biāo)。function

getCardIndex(cardNum,

cardList)

{//數(shù)組下標(biāo)記錄標(biāo)識(shí)let

index

=

-1//遍歷數(shù)組for

(let

i

=

0;

i

<

cardList.length;

i++)

{//如果發(fā)現(xiàn)一致的卡號(hào)if

(cardList[i].cardNum

==

cardNum)

{//記錄當(dāng)前數(shù)組下標(biāo)index

=

i//停止循環(huán)break12.

}13.

}//返回查詢結(jié)果（-1表示不存在）return

index16.

}05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯012）長(zhǎng)按刪除單張銀行卡cont.修改index.wxml文件，為銀行卡片組件追加longpress事件并將銀行卡號(hào)作為參數(shù)num進(jìn)行攜帶。<!--循環(huán)渲染每一張卡片-->

<bankcard

wx:for="{{cardList}}"

wx:key="cardNum"

bgColor="{{item.bgColor}}"cardName="{{item.cardName}}"

cardNum="{{item.cardNum}}"

data-num="{{item.cardNum}}"bindlongpress="deleteCard"></bankcard>05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯012）長(zhǎng)按刪除單張銀行卡cont.index.js文件頂部引用公共文件tool.js，且追加自定義函數(shù)

deleteCard()//如果沒點(diǎn)擊確認(rèn)按鈕則不做任何操作if

(!res.confirm)return12.12.12.//獲取銀行卡數(shù)組let

cardList

=

this.data.cardList//查詢卡號(hào)所在數(shù)組下標(biāo)let

index

=

tool.getCardIndex(cardNum,

cardLis12.12.12.12.12.12.

//從數(shù)組中去掉下標(biāo)為index的元素12. cardList.splice(index,

1)12.

//更新頁(yè)面顯示12.

this.setData({12. cardList:

cardList12.

})12.

//更新數(shù)據(jù)緩存12. wx.setStorageSync("cardList",

cardList)12.

}12.

})12.

},deleteCard:

function

(e)

{//獲取銀行卡號(hào)let

cardNum

=

e.currentTarget.dataset.num//獲取銀行卡號(hào)4位尾號(hào)let

lastNum

=

cardNum.substring(cardNum.length

-

4)//消息提醒wx.showModal({title:"提醒",content:"您確定刪除尾號(hào)為"+lastNum+"的銀行卡嗎？",//成功回調(diào)函數(shù)success:

res

=>

{05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯012）長(zhǎng)按刪除單張銀行卡cont.運(yùn)行后首頁(yè)效果如下圖所示。05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯013）復(fù)制銀行卡號(hào)至剪貼板05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯013）復(fù)制銀行卡號(hào)至剪貼板點(diǎn)擊首頁(yè)銀行卡片第二行的復(fù)制圖標(biāo)即可快速?gòu)?fù)制整個(gè)銀行卡號(hào)至設(shè)備的剪貼板中。為自定義組件bankcard第二行的小圖標(biāo)追加點(diǎn)擊事件，bankcard.wxml代碼修改如下：<!--components/bankcard/bankcard.wxml-->…<!--2-2復(fù)制按鈕圖標(biāo)--><van-icon

name="description"

bindtap="copyCardNum"

/>05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯013）復(fù)制銀行卡號(hào)至剪貼板cont.

為自定義組件bankcard追加監(jiān)聽器，bankcard.js代碼修改如下：//

components/bankcard/bankcard.jsComponent({3.

/***監(jiān)聽器*/observers:

{"cardNum":

function

(cardNum)

{//在cardNum被設(shè)置時(shí)，執(zhí)行這個(gè)函數(shù)this.setData({num:

cardNum11.

})12.

}13.

},14.

…15.})05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯013）復(fù)制銀行卡號(hào)至剪貼板cont.最后，在bankcard.js的methods中追加自定義函數(shù)copyCardNum的具體內(nèi)容，

bankcard.js代碼修改如下：//

components/bankcard/bankcard.jsComponent({3.

…4.

/***組件的方法列表*/methods:

{copyCardNum()

{wx.setClipboardData({data:

this.data.num11.

})12.

}13.

}})05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯013）復(fù)制銀行卡號(hào)至剪貼板cont.運(yùn)行效果如圖所示。05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯014）跳轉(zhuǎn)新頁(yè)面05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯014）跳轉(zhuǎn)新頁(yè)面點(diǎn)擊首頁(yè)底部的添加按鈕希望可以跳轉(zhuǎn)到add頁(yè)面來錄入新卡信息。為按鈕組件追加點(diǎn)擊事件，index.wxml代碼修改如下：<!--2底部添加按鈕--><van-button

plain

type="info"

size="large"

bindtap="addCard">+添加銀行卡</van-button>05邏輯實(shí)現(xiàn)【首頁(yè)】邏輯014）跳轉(zhuǎn)新頁(yè)面cont.index.js文件追加自定義函數(shù)addCard()如下：addCard:

function

()

{//新窗口打開add頁(yè)wx.navigateTo({url:

"../add/add",5.

})6.

},05邏輯實(shí)現(xiàn)【銀行名稱索引頁(yè)】邏輯0205邏輯實(shí)現(xiàn)【銀行名稱索引頁(yè)】邏輯021）索引欄顯示完整銀行名稱功能實(shí)現(xiàn)05邏輯實(shí)現(xiàn)【銀行名稱索引頁(yè)】邏輯021）索引欄顯示完整銀行名稱功能實(shí)現(xiàn)首先找到公共JS文件，錄入一套銀行名稱數(shù)組cardNameList，并在module.export中導(dǎo)出utils/tool.js修改內(nèi)容如下：//2銀行名稱數(shù)組const

cardNameList

=

[3.

{id:

"B",list:

[{code:

"bj",

name:"北京銀行"},7.

]8.

},9.

…,10.

{id:

"Z",list:

[{code:

"zx",

name:"中信銀行"},14.

]15.

}16.

]這里錄入了一部分常見的銀行名稱，開發(fā)者后續(xù)也可以繼續(xù)追加補(bǔ)充。05邏輯實(shí)現(xiàn)【銀行名稱索引頁(yè)】邏輯021）索引欄顯示完整銀行名稱功能實(shí)現(xiàn)cont.數(shù)組更新到data屬性中等待使用。list.js文件修改如下：//引用公共JS文件const

tool

=

require("../../utils/tool")3.4.

Page({5.在list.js文件頂部引用公共文件tool.js，并將銀行名稱

6./***頁(yè)面的初始數(shù)據(jù)*/data:

{//首字母索引indexList:

["A",

…,

"Z"],//銀行名稱數(shù)組cardNameList:

tool.cardNameList14.

},05邏輯實(shí)現(xiàn)【銀行名稱索引頁(yè)】邏輯021）索引欄顯示完整銀行名稱功能實(shí)現(xiàn)cont.修改list.wxml頁(yè)面內(nèi)容，使用wx:for循環(huán)渲染出全部的銀行名稱分組效果。<!--2按照拼音首字母分組--><view

wx:for="{{cardNameList}}"

wx:key="id"><!--2-1索引分組頭部--><van-index-anchor

index="{{item.id}}"

/><!--2-2索引單項(xiàng)--><van-cell

wx:for="{{item.list}}"

wx:for-item="card"

wx:key="code"

title="{{}}"

/></view>05邏輯實(shí)現(xiàn)【銀行名稱索引頁(yè)】邏輯021）索引欄顯示完整銀行名稱功能實(shí)現(xiàn)cont.最終效果如圖所示。05邏輯實(shí)現(xiàn)【銀行名稱索引頁(yè)】邏輯022）返回【銀行卡信息錄入頁(yè)】功能實(shí)現(xiàn)05邏輯實(shí)現(xiàn)【銀行名稱索引頁(yè)】邏輯022）返回【銀行卡信息錄入頁(yè)】功能實(shí)現(xiàn)當(dāng)用戶單擊選中銀行名稱時(shí)希望可以跳轉(zhuǎn)回到【銀行卡信息錄入頁(yè)】，并且可以攜帶參數(shù)讓銀行卡信息錄入頁(yè)顯示到第一個(gè)文本輸入框中。list.wxml代碼修改如下：<!--2-2索引單項(xiàng)-->

<van-cell

wx:for="{{item.list}}"

wx:for-item="card"

wx:key="code"

title="{{}}"

data-name="{{}}"

bindtap="chooseCardName"

/>參數(shù)取值是銀行卡的中文名稱。05邏輯實(shí)現(xiàn)【銀行名稱索引頁(yè)】邏輯022）返回【銀行卡信息錄入頁(yè)】功能實(shí)現(xiàn)cont.list.js文件新增自定義函數(shù)chooseCardName如下：chooseCardName:

function

(e)

{//獲取銀行名稱let

name

=

e.currentT//頁(yè)面重定向至add頁(yè)并攜帶參數(shù)namewx.redirectTo({url:

"../add/add?name="+name,7.

})8.

},此時(shí)list頁(yè)面就做完了。05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯0305邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯031）自動(dòng)填寫銀行名稱05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯03自動(dòng)填寫銀行名稱修改add.wxml，為第一個(gè)文本輸入框右側(cè)顯示的圖標(biāo)追加點(diǎn)擊事件：<!--3-1銀行名稱輸入框-->

<van-field

label="銀行名稱"placeholder="請(qǐng)輸入或選擇銀行名稱"required

right-icon="search"bind:click-icon="chooseCardName"/>05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯03自動(dòng)填寫銀行名稱cont.對(duì)應(yīng)的add.js文件追加自定義函數(shù)chooseCardName()chooseCardName()

{//頁(yè)面重定向wx.redirectTo({url:

"../list/list",5.

})6.

},05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯031）自動(dòng)填寫銀行名稱cont.修改add.js的onload()函數(shù)，將獲取到的銀行名稱name參數(shù)顯示

到頁(yè)面上。onload:

function

(options)

{//臨時(shí)測(cè)試是否拿到了參數(shù)//

console.log(options)//獲取銀行名稱參數(shù)name（如果沒傳參，就返回空字符串）let

name

=

||""http://更新到頁(yè)面上this.setData({cardName:

name9.

})10.

},05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯03自動(dòng)填寫銀行名稱cont.為add.wxml頁(yè)面的第一個(gè)文本輸入框追加value取值為{{cardName}}<!--3-1銀行名稱輸入框-->

<van-field

label="銀行名稱"value="{{cardName}}"placeholder="請(qǐng)輸入或選擇銀行名稱"required

right-icon="search"

bind:click-icon="chooseCardName"/>05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯031）自動(dòng)填寫銀行名稱cont.最終效果。05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯032）微信OCR識(shí)別銀行卡號(hào)05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯032）微信OCR識(shí)別銀行卡號(hào)修改add.wxml，為第二個(gè)文本輸入框右側(cè)顯示的圖標(biāo)追加點(diǎn)擊事件：<!--3-2銀行卡號(hào)輸入框-->

<van-field

type="number"

label="銀行卡號(hào)"placeholder="請(qǐng)掃描識(shí)別銀行卡號(hào)"border="{{false}}"required

right-icon="photo-o"

bind:click-icon="scanCard"/>05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯032）微信OCR識(shí)別銀行卡號(hào)cont.對(duì)應(yīng)的add.js文件追加自定義函數(shù)scanCard()。其中調(diào)用微信平臺(tái)服務(wù)的核心代碼如右側(cè)所示。1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.20.21.22.23.24.25.26.//調(diào)用微信平臺(tái)服務(wù)wx.serviceMarket.invokeService({service:

"wx79ac3de8be320b71",//服務(wù)商OCR的Service

IDapi:

"OcrAllInOne",//服務(wù)商OCR的API

Namedata:{//用CDN方法標(biāo)記要上傳并轉(zhuǎn)換成HTTP

URL的文件img_url:

new

wx.serviceMarket.CDN({type:

"filePath",filePath:

res.tempFilePaths[0],}),data_type:

3,//識(shí)別類型為2銀行卡

ocr_type:

2},//微信OCR識(shí)別服務(wù)成功

success:

res=>{//將卡號(hào)更新到頁(yè)面上this.setData({cardNum:

res.data.bankcard_res.number.text})},//微信OCR識(shí)別服務(wù)失敗

fail:

err=>{…},//微信OCR識(shí)別服務(wù)完成complete:

res

=>

{…}})//微信OCR服務(wù)結(jié)束05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯032）微信OCR識(shí)別銀行卡號(hào)cont.為add.wxml頁(yè)面的第二個(gè)文本輸入框追加value取值為{{cardNum}}。<!--3-2銀行卡號(hào)輸入框-->

<van-field

type="number"

label="銀行卡號(hào)"value="{{cardNum}}"placeholder="請(qǐng)掃描識(shí)別銀行卡號(hào)"border="{{

false}}"required

right-icon="photo-o"

bind:click-icon="scanCard"/>05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯033）添加銀行卡至本地緩存05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯033）添加銀行卡至本地緩存接下來就要考慮把數(shù)據(jù)存到本地緩存中。先初始化一下cardName和cardNum的值，add.js的data屬性修改如下：//index.jsPage({3.

/***頁(yè)面的初始數(shù)據(jù)*/data:

{cardName:"",//銀行名稱cardNum:""http://卡號(hào)9.

},10.

…11.

})05邏輯實(shí)現(xiàn)【銀行卡信息錄入頁(yè)】邏輯033）添加銀行卡至本地緩存cont.修改add.wxml，為兩個(gè)文本輸入框都追加change事件：<!--3-1銀行名稱輸入框-->

<van-field

label="銀行名稱"value="{{cardName}}"placeholder="請(qǐng)輸入或選擇銀行名稱"requiredright-icon="search"

bind:click-icon="chooseCardName"

bind:change="nameChange"/><!--3-2銀行卡號(hào)輸入框-->

<van-field

type="number"

label="銀行卡號(hào)"value="{{cardNum}}"

placeholder="請(qǐng)掃描識(shí)別銀行