关于移动应用开发:YonBuilder移动开发平台-AVM框架-封装身份证号码虚拟输入键盘组件

6次阅读

共计 5786 个字符，预计需要花费 15 分钟才能阅读完成。

AVM（Application-View-Model）前端组件化开发模式基于规范 Web Components 组件化思维，提供蕴含虚构 DOM 和 Runtime 的编程框架 avm.js 以及多端对立编译工具，齐全兼容 Web Components 规范，同时兼容 Vue 和 React 语法糖编写代码，编译工具将 Vue 和 React 相干语法糖编译转换为 avm.js 代码。

基于规范 Web Components 组件化思维，兼容 Vue / React 语法个性，通过一次编码，别离编译为 App、小程序代码，实现多端开发。

组件性能介绍
身份证号码虚构输出键盘，可用以身份证号码输出时应用，可对输出的身份证号码进行验证，反对 15 位和 18 位。

示例展现

组件开发

组件文件
id-card-keyboard.stml

<template>
    <view class="id-card-keyboard_container">
        <view class="id-card-keyboard_box">
            <view class="id-card-keyboard_box-header">
                <text class="id-card-keyboard_box-header-label">{idCard}</text>
                <text class="id-card-keyboard_box-header-button" @click="finish"> 实现 </text>
            </view>
            <safe-area>            
                <view class="id-card-keyboard_box-item-container">
                    <view class="id-card-keyboard_box-item" v-for="item in numbers">
                        <view class="id-card-keyboard_box-item-label" v-if="item.type=='number'"data-key={item.key} @click="getNumber">
                            <text style="font-size:28px;">{item.key}</text>
                        </view>
                        <view class="id-card-keyboard_box-item-label" v-else-if="item.type=='ico'"@click="delNumber">
                            <image class="id-card-keyboard_box-item-ico" src={item.key} mode="widthFix"></image>
                        </view>                        
                    </view>                
                </view>    
            </safe-area>                
        </view>
    </view>
</template>
<script>
    import checkIdcard from './id-card-check.js'
    export default {
        name: 'id-card-keyboard',
        data() {
            return{numbers:[{type:'number',key:'1'},{type:'number',key:'2'},{type:'number',key:'3'},{type:'number',key:'4'},{type:'number',key:'5'},{type:'number',key:'6'},{type:'number',key:'7'}
                ,{type:'number',key:'8'},{type:'number',key:'9'},{type:'number',key:'X'},{type:'number',key:'0'},{type:'ico',key:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAAC/UlEQVRo3u2aO2gUURSGv1k1PlFXUHwUQZEYlUACPiM2KbQSKxEkBEtbHyDxAWqjoK2gqIjYWJpC0gQLQUWjoBJUtBOMiWJMwJiYiGtxdtlzx1lndr07w4X7wcBm59xzcv655752wOPxeDwej8dJggxjtwGHgHagsQ7+fwHvgJvA1QzzrAv7gUKK12NgQdZJ22J3yuKVruf1SCbtEu4Cbqm/nyEl9hKYBGZYivMbyCMP66j6/gxwNuWcrXEMs0fcSynuKRXzY9Yi1EoHpnivUoydRyaUAvApayFqYQtSUiXxPgPLUoyfA0aKsYeyFqNaOjHFewisSNCuHRm7ZiaM0wQcB1ZH3JsNfMXBHniAv5cSSQgo95gBYH6M/XJggso9bI7y54yAzZjijZB8xg+AMZKNlw3Aa2U7HGHjnIAbgO8qqTFgY5U+9mI+gNsRNguBF5jirYuwc0rAFsozXqkEV9boaxvmg3iAjGcArcCguvcIWFLBj1MCvlVJvQHm/qe/9cC48nkf2E55zCsAH2J8OCPgVsyyW2PJbwuVt2fjwNqY9s4IeBpzuWKTDmSM0+L1A6sStK2rgDmLvvLq86Dl/7MfGVs1ozi8NYuik3Lv+GbR7yxErKgSfkL8AYQzJbwolNxFCz4D4KnyOQQcDsXpjfHhjIAAR7AnYiNSuiVf75FZGWSXM63u3fiHH6cEBBFNi3i3Bh9NmLuRAWBeyKYNmMKcuKLK2TkBAS5hininyvYDqu0UsuuIohX4qWz7ImycFBDkwFSL2F1F21KbaWBzjG34rDGMswICXA4ldyVhuz2I4M0J7XcBJ4GdEfecFhDgPKaIPSnHD4AvOHqgWiI8Jl5LMXYD8oOV0wKCrNe0iCdSitulYjpZwppwOfcCO5BeEiDLEBtXDlgMHMRc6ly3nVAWr3acQw4eNMPFRG3tzQuIgPpthB/I4cNoBjlb5wLpvpUwAWyqRyK23gSolj7kxGYpUgUB0gNtXpPFGD3APuS3E4/H4/F4PB6Pxwp/AGH7f53PGS6/AAAAAElFTkSuQmCC'}],
                numberIndex:0,
                resultNumber:[],
                idCard:''
            }
        },
        methods: {getNumber(e){// console.log(JSON.stringify(e));
                if(this.data.numberIndex<18){this.data.resultNumber[this.data.numberIndex] = e.currentTarget.dataset.key;// 兼容 IOS 和安卓
                    this.data.numberIndex += 1;                
                    this.data.idCard = this.data.resultNumber.join('');
                }
                
            },
            delNumber(e){
                this.data.numberIndex -= 1;    
                if(this.data.numberIndex>=0){this.data.resultNumber.splice(this.data.numberIndex,1);    
                    this.data.idCard = this.data.resultNumber.join('');                
                }
            },
            finish(){if(!checkIdcard(this.data.idCard)){
                    api.confirm({
                        title: '提醒',
                        msg: '您输出的身份证号码不合乎规定，是否持续应用？',
                        buttons: ['确定', '勾销']
                    }, (ret, err)=> {
                        var index = ret.buttonIndex;
                        if(index==1){this.fire('setNumber',this.data.idCard);
                        }                
                    });
                }
                else{this.fire('setNumber',this.data.idCard);
                }                    
            }
        }
    }
</script>
<style>
    .id-card-keyboard_container {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: rgba(0,0,0,0);
    }
    .id-card-keyboard_box{
        align-items: center;
        position: absolute;
        bottom: 0;
        width: 100%;
        background-color: #f0f0f0;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }
    .id-card-keyboard_box-item-container{
        flex-flow:  row wrap;
        justify-content: space-around;
        align-items: center;
        padding: 10px;
        box-sizing: border-box;
    }
    .id-card-keyboard_box-item{
        flex-basis: 33%;
        box-sizing: border-box;
        padding: 5px;
    }
    .id-card-keyboard_box-item-label{
        display: flex;
        background-color: #ffffff;
        padding: 5px;
        border-radius: 5px;
        width: 100%;
        height: 48px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
    .id-card-keyboard_box-item-ico{width: 60px;}
    .id-card-keyboard_box-header{
        width: 100%;
        flex-flow: row nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px 0 15px;
    }
    .id-card-keyboard_box-header-label{font-size: 18px;}
    .id-card-keyboard_box-header-button{
        font-size: 18px;
        color: #327432;
    }
</style>

组件应用阐明

本组件是基于 AVM.js 开发的多端组件，通常同时适配 Android、iOS、小程序、H5 , 具体反对状况还要看每个组件的阐明文档。

首先须要登录开发平台，http://www.apicloud.com。通过管制平台右上方的模块 Store 进入，而后抉择 AVM 组件。

找到对应模块点击进入。

也可通过搜寻栏，通过组件名称关键字进行检索。

进入模块详情，点击立刻下载下载残缺的组件安装包。

组件压缩包的文件目录如下

也可通过查看模块文档来理解模块的具体参数，援用的原生模块，注意事项等。

具体在我的项目中的应用步骤是，第一步将压缩文件中的 easy-id-card-keyboard.stml 文件拷贝到我的项目的 components 目录，通过浏览 readme.md 文档和查看 demo 示例文件 demo-id-card-keyboard.stml 在须要开发的 stml 文件中，引入组件文件，实现页面的开发。

id-card-check.js 文件，可依据理论我的项目放到对应的文件夹中，我放在了 utils 这个文件夹中。本插件基于 ES6 语法封装的，分装了 checkIdcard 办法校验身份证号码的有效性。

身份证号码的验证应用了正则验证，验证不通过会进行提醒，可忽视验证提醒间接应用。

demo-id-card-keyboard.stml

<template>
    <view class="page">
        <safe-area></safe-area>
        <text class="number-box" @click="openNumberBoard"> 身份证号码:{idCard}</text>
        <id-card-keyboard
            onsetNumber="getNumber" 
            v-if="isShowNUmberBoard">
         </id-card-keyboard>
    </view>
</template>
<script>
    import '../../components/id-card-keyboard.stml'
    export default {
        name: 'demo-id-card-keyboard',
        apiready(){//like created},
        data() {
            return{
                isShowNUmberBoard:false,
                idCard:''        
            }
        },
        methods: {closeNumberBoard(e){this.data.isShowNUmberBoard = false;},
            openNumberBoard(e){this.data.isShowNUmberBoard = true;},
            getNumber(e){// console.log(JSON.stringify(e));
                this.data.idCard = e.detail;
                this.data.isShowNUmberBoard=false;
            }
        }
    }
</script>
<style>
    .page {
        height: 100%;
        background-color: #ffffff;
    }
    .number-box{font-size: 20px;}
</style>

如果在 AVM 组件库中，没有找到理论我的项目中须要的组件，能够本人尝试封装组件。

这是组件化开发的在线文档地址

正文完