认证主体：傅**（实名认证）
IP属地：湖北
付费下载
下载本文档
组件库Vant
Weapp快速开发实现一个银行卡包小程序。本章学习目标：掌握自定义组件的开发和应用；掌握Vant
Weapp组件库在小程序中的应用；掌握“微信OCR识别”服务在小程序中的应用；能够在开发过程中熟练掌握真机预览、调试等操作。小程序服务平台能力小程序自定义组件准备工作视图设计逻辑实现本章小结01小程序服务平台能力01小程序服务平台能力什么是小程序服务平台0101小程序服务平台能力
除了小程序基础组件与各类API的接口能力外，小程序还另外有一个专门的服务平台用于给开发者提供更多功能丰富的增值能力。开发者可以根据需求选购不同规格的平台服务资源。
购买完成后，在小程序项目中就可以直接调用小程序原生接口快捷接入平台内的能力，高效地完成小程序更多功能。什么是小程序服务平台0101小程序服务平台能力目前小程序服务平台内提供的服务分为四类：AI、安全、地图和内容，节选了其中部分服务如图所示。什么是小程序服务平台cont.01本章案例就将使用AI服务类中的“微信OCR识别”服务来辅助我们完成银行卡号的自动识别功能。01小程序服务平台能力微信OCR识别服务简介0201小程序服务平台能力OCR的概念√全称是Optical
Character
Recognition（光学字符识别）√指的是电子设备（例如扫描仪或数码相机等）扫描图片或实景中的字符，通过检测明暗模式确定字符形状，然后用字符识别方法将确认的形状翻
需要注意的是，OCR识别不能确保100%准确，可能个别词还需要人工二次检查，如何提高准确性是OCR识别技术最需要攻克的难题。常见的OCR衡量标准有：√识别速度√误识率√拒识率√UI友好度√产品本身的稳定性和易用性等。微信OCR识别服务简介cont.0201小程序服务平台能力
目前该服务在微信服务平台中已发布且属于AI类，适用于微信小程序和微信公众号平台。使用该工具可以大幅度提高移动端信息录入效率，提高用户体验。微信OCR识别服务简介cont.0201小程序服务平台能力
该服务广泛适用于政务、医疗、交通、教育、金融等各类行业，例如
银行卡、身份证、驾驶证、行驶证、营业执照等都可以使用微信OCR识别服务快速采集原本需要手工输入的信息，极大地提升了使用体验。官方示例参考页面如图所示。微信OCR识别服务简介cont.0201小程序服务平台能力
在微信服务平台的详细介绍见官方网址：/service/detail/000ce4cec24ca026d37900ed551415。微信OCR识别服务简介cont.0201小程序服务平台能力
开发者用小程序注册时的同一个微信扫码登录与后就可以在该网页上购买服务了，如图所示。微信OCR识别服务简介cont.02当前我们选择的是“100次/天连续发放36500天”应该足够学习使用了。01小程序服务平台能力
购买成功后点击页面右上角“我的订单”进入选择对应绑定的小程序应用即可看到已购列表，如图所示。微信OCR识别服务简介cont.02此时就可以在使用了同款小程序AppID的项目中接入该项服务了，注意每天的调用次数是100次。01小程序服务平台能力微信OCR识别服务接入0301小程序服务平台能力微信OCR识别服务接入03
Name：OcrAllInOneService
ID：wx79ac3de8be320b7101小程序服务平台能力
OCR;10:车牌识别01小程序服务平台能力假设图片已经具有URL地址方法一：Promise格式
"wx79ac3de8be320b71",//服务商OCR的Service
IDapi:
"OcrAllInOne",//服务商OCR的API
Namedata:
3,//图片是url类型ocr_type:
1,//识别对象是身份证类型8.
},}).then(res
=>
success",
res)12.}).catch(err
=>
{//获取服务失败
fail",
err)13.14.15.})这里用了Promise格式的try…catch…then的获取方式01小程序服务平台能力
"wx79ac3de8be320b71",//服务商OCR的Service
IDapi:
"OcrAllInOne",//服务商OCR的API
Namedata:{…无变化，代码略…},success:
res
=>
success",
res)8.
},fail:
err
=>
fail",
err)12.
},complete:
res
complete",
res)16.
}17.})注：目前这两种写法都可以实现该功能，开发者根据自己实际开发风格自选。01小程序服务平台能力成功回调后返回值中关键内容如下表所示。微信OCR识别服务接入cont.03字段名类型说明idcard_resObject身份证的返回结果bankcard_resObject银行卡的返回结果driving_resObject行驶证的返回结果driving_license_resObject驾驶证的返回结果biz_license_resObject营业执照的返回结果ocr_comm_resObject通用OCR的返回结果plate_comm_resObject车牌识别的返回结果需要注意的是，这些返回字段不
会同时出现，而是根据之前
invokeService(OBJECT)请求参数中的
0,//正面"name":
{"text":"张三"},//姓名"id":
{"text":
"123456789012345678"},//身份证号码
"address":
{"text":"广东省广州市XXX"},//住址"gender":
{"text":"男"},//性别"nationality":
{"text":"汉"}//民族}//背面图片{"type":
1,//背面"valid_date":
{"text":
Weapp来帮助我们实现银行名称索引的分类显示和快速定位。本章也将在项目中尝试自主开发自定义组件来实现一款银行卡组件<bankcard>。02小程序自定义组件小程序UI组件库-Vant
Weapp0102小程序自定义组件
有赞小程序组件库VantWeapp是一款轻量、可靠的小程序UI组件库。
与有赞移动端组件库Vant基于相同的视觉规范，并提供一致的API接口，方便开发者快速搭建小程序应用。小程序UI组件库-Vant
Weapp0102小程序自定义组件
不少电商类小程序都会用到这个组件库，例如其中的一款商品卡片组件<van-card>就可以直接引用从而实现如图所示的商品展示效果。小程序UI组件库-Vant
Weapp0102小程序自定义组件VantWeapp有三种安装方式，开发者可以根据自己的实际情况任选一种。√方法一：通过npm或yarn指令安装√方法二：通过git下载源码√方法三：直接下载源码小程序UI组件库-Vant
Weapp0102小程序自定义组件小程序UI组件库-Vant
Weapp01√方法一：通过npm或yarn指令安装小程序目前已经支持使用npm或yarn命令安装第三方包，语法如下：#通过
npm安装npm
@vant/weapp
-S
--production#通过
yarn安装yarn
add
@vant/weapp
--production02小程序自定义组件小程序UI组件库-Vant
Weapp01√方法二：通过git下载源码也可以通过git下载源代码，语法如下：git
clone
Weapp01√方法三：直接下载源码官方的下载访问地址是：/youzan/vant-weapp，然后点击右侧的“Cloneordownload”按钮，如下图所示，在下拉画面中选择“DownloadZIP”即可下载压缩包。02小程序自定义组件小程序UI组件库-Vant
Weapp01如果有时候github不太稳定会下载很慢或打不开，开发者也可以直接使用本书配套提供的代码包（已经下载好了）进行学习。下载完毕后在代码包中找到dist文件（路径在@vant/weapp/dist），将其拷贝到小程序项目中自定义的目录中即可使用。02小程序自定义组件自主开发组件模板配置0202小程序自定义组件自主开发组件模板配置02自基础库1.6.3版本开始小程序平台支持开发者自定义组件（关于自定义组件的更多介绍见“13.2.1什么是自定义组件”），本章项目将带大家学习如何自主开发自定义组件<bankcard>用于展示银
{"component":true,"usingComponents":
{}4.
/***组件的属性列表*/properties:
{7.8.
},9.10.
/***组件的初始数据*/data:
{14.15.
},16.17.
/***组件的方法列表*/methods:
{21.22.
Weapp组件库引入在根目录中新建文件夹plugins，然后将事先下载好的Vant
Weapp组件库代码包中的dist目录（@vant/weapp/dist）复制粘贴进去并更名为weapp。03准备工作03自定义组件1）Vant
Weapp组件库引入cont.接下来查阅Vant
Weapp组件库引入
{"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准备工作03自定义组件1）Vant
Weapp组件库引入cont.引用的Vant
{"usingComponents":
{"bankcard":
"/components/bankcard/bankcard"4.
}5.
{…待补充…6.
"#fff","navigationBarTitleText":"我的银行卡包","navigationBarTextStyle":"black"5.
},04视图设计自定义组件bankcard设计0204视图设计自定义组件bankcard设计02自定义组件bankcard需要是一个矩形的卡片样式，可以适当增加圆角边框和阴影效果。卡片上的内容分成上下2行，第一行显示银行卡图标和银行名称，第二行显示银行卡号和复制图标按钮。框线图如图所示。04视图设计自定义组件bankcard设计cont.02计划使用基础组件如下：整体卡片：<view
class=”card”>；单行区域：<view
class=”cardBar”>；图标：第三方Vant
Weapp组件库图标组件<van-icon>；银行名称和卡号：<text>组件。04视图设计【首页】设计0304视图设计【首页】设计03计划使用的组件如下：银行卡片区域：<view
class=”cardBox”>；银行卡片：自定义银行卡组件<bankcard>；添加按钮：Vant
Weapp组件库的按钮组件<van-button>。04视图设计【首页】设计cont.03<bankcard
bgColor="orange
"cardName="建设银行"cardNum="622234211234021
"></bankcard>04视图设计【银行卡信息录入页】设计0404视图设计【银行卡信息录入页】设计04计划使用的组件如下：整体容器与各区域：<view>；主副标题：<view>；文本输入框：Vant
Weapp组件库的文本输入组件<van-field>；按钮：Vant
Weapp组件库的按钮组件<van-button>。04视图设计【银行卡信息录入页】设计04关键代码如下：<!--3表单区域--><view
class="formBox"><!--3-1银行名称输入框--><van-field
label="银行名称"placeholder="请输入或选择银行名称"required
right-icon="search"/><!--3-2银行卡号输入框-->
<van-field
type="number"
label="银行卡号"placeholder="请扫描识别银行卡号"border="{{
false}}"
required
right-icon="photo-o"/></view>04视图设计【银行名称索引页】设计0504视图设计【银行名称索引页】设计05使用其中的自定义索引列表页面即可，会用到组件如下：<van-index-bar>:Vant
Weapp组件库的索引栏组件；<van-index-anchor>:Vant
Weapp组件库的索引分组头部；<van-cell>：Vant
Weapp组件库的单元格组件。04视图设计05【银行名称索引页】设计关键代码如下：<van-index-bar
index-list="{{
indexList
}}"><view><van-index-anchor
index="G"
/><van-cell
title="光大银行"/><van-cell
cardList
[{bgColor:
"tomato",cardName:"光大银行",cardNum:
"622212345678123"6.
},7.
{bgColor:
"rebeccapurple",cardName:"中信银行",cardNum:
"622254321234321"11.
function
()
{//获取本地缓存let
cardList
cardList7.
})8.
class="cardBox"><!--循环渲染每一张卡片-->
<bankcard
wx:for="{{cardList}}
cardNum,Array[]
cardList)用于获取卡号cardNum在数组
cardList中的下标，如果是-1表示卡号不存在，否则就返回正确的数组下标。function
getCardIndex(cardNum,
cardList)
{//数组下标记录标识let
index
-1//遍历数组for
(let
0;
<
i++)
{//如果发现一致的卡号if
(cardList[i].cardNum
==
cardNum)
{//记录当前数组下标index
i//停止循环break12.
}13.
}//返回查询结果（-1表示不存在）return
index16.
<bankcard
wx:for="{{cardList}}"
wx:key="cardNum"
deleteCard()//如果没点击确认按钮则不做任何操作if
cardList
index
cardLis12.12.12.12.12.12.
1)12.
//更新页面显示12.
cardList12.
})12.
cardList)12.
}12.
})12.
},deleteCard:
function
(e)
{//获取银行卡号let
cardNum
lastNum
res
=>
name="description"
bindtap="copyCardNum"
/>05逻辑实现【首页】逻辑013）复制银行卡号至剪贴板cont.
/***监听器*/observers:
{"cardNum":
function
(cardNum)
cardNum11.
})12.
}13.
},14.
…4.
/***组件的方法列表*/methods:
{copyCardNum()
})12.
}13.
plain
type="info"
size="large"
function
()
"../add/add",5.
})6.
cardNameList
[3.
{id:
"B",list:
[{code:
"bj",
name:"北京银行"},7.
]8.
},9.
…,10.
{id:
"Z",list:
[{code:
"zx",
name:"中信银行"},14.
]15.
}16.
tool
require("../../utils/tool")3.4.
6./***页面的初始数据*/data:
{//首字母索引indexList:
["A",
…,
"Z"],//银行名称数组cardNameList:
wx:for="{{cardNameList}}"
wx:key="id"><!--2-1索引分组头部--><van-index-anchor
/><!--2-2索引单项--><van-cell
wx:for-item="card"
wx:key="code"
title="{{}}"
<van-cell
wx:for-item="card"
wx:key="code"
title="{{}}"
data-name="{{}}"
bindtap="chooseCardName"
function
(e)
{//获取银行名称let
name
"../add/add?name="+name,7.
})8.
<van-field
label="银行名称"placeholder="请输入或选择银行名称"required
"../list/list",5.
})6.
到页面上。onload:
function
(options)
{//临时测试是否拿到了参数//
name
name9.
})10.
<van-field
label="银行名称"value="{{cardName}}"placeholder="请输入或选择银行名称"required
right-icon="search"
<van-field
type="number"
label="银行卡号"placeholder="请扫描识别银行卡号"border="{{false}}"required
right-icon="photo-o"
"wx79ac3de8be320b71",//服务商OCR的Service
IDapi:
"OcrAllInOne",//服务商OCR的API
Namedata:{//用CDN方法标记要上传并转换成HTTP
URL的文件img_url:
new
"filePath",filePath:
3,//识别类型为2银行卡
ocr_type:
success:
fail:
res
=>
<van-field
type="number"
label="银行卡号"value="{{cardNum}}"placeholder="请扫描识别银行卡号"border="{{
false}}"required
right-icon="photo-o"
/***页面的初始数据*/data:
{cardName:"",//银行名称cardNum:""//卡号9.
},10.
…11.
<van-field
label="银行名称"value="{{cardName}}"placeholder="请输入或选择银行名称"requiredright-icon="search"
bind:click-icon="chooseCardName"
bind:change="nameChange"/><!--3-2银行卡号输入框-->
<van-field
type="number"
label="银行卡号"value="{{cardNum}}"
placeholder="请扫描识别银行
0/150
联系客服
本站为文档C2C交易模式，即用户上传的文档直接被用户下载，本站只是中间服务平台，本站所有文档下载所得的收益归上传人(含作者)所有。人人文库仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对上载内容本身不做任何修改或编辑。若文档所含内容侵犯了您的版权或隐私，请立即通知人人文库网，我们立即给予删除！