在OpenHarmony上开发的第一个应用-WIFI(下） 原创

本文主要讲解WiFi应用中的键盘/输入法（以下称为键盘）开发

效果图

小写	大写	符号

UI排版

简要分析一下键盘的布局
首先键盘分为上下两部分。上面部分为功能区，第一个功能用于切换符号键盘，第二个功能用于关闭键盘；下面部分为键盘内容区，也就是字符输入区域，输入区域同时参杂一些特殊按键。
代码截图分析：

字母/字符区键盘详细代码

<!--        键盘显示-->
<div class="key-letter keyboard-key">
    <div style="padding:0 20px;">
        <button class="btn btn-key" @touchend="{{keyDown($item)}}" for="{{letterKeys[0]}}">{{$item}}</button>
    </div>
    <div style="padding: 0 40px;">
        <button class="btn btn-key" @touchend="{{keyDown($item)}}" for="{{letterKeys[1]}}">{{$item}}</button>
    </div>
<!--            含特殊按键的第三列-->
    <div>
        <button @touchend="upKey" if="{{!isShowSymbol}}"  class="btn btn-key btn-key-tools {{isUp?'letter-up':''}}">{{isUp?"A":"a"}}</button>
        <button @touchend="showLetter" else class="btn btn-key btn-key-tools" style="font-size: 28px;padding: 26px 18px;" >Aa</button>
        <button @touchend="{{keyDown($item)}}" class="btn btn-key" for="{{letterKeys[2]}}">{{$item}}</button>
        <button @touchend="deleteOne" class="btn btn-key btn-key-tools">Х</button>
    </div>
</div>

为了处理特殊的功能按键，我们把字母区域分为了三行，前两行无特殊按键只用button按钮循环letterKeys二维数组中对应的值就行
第三行需要处理特殊按键。除特殊按钮单独绑定事件外，每个按钮绑定相同keyDwon事件，以此响应按键按下后的操作。

JS代码

    props:["value"],
    data: {
        numbers:"1234567890",
        letters:["qwertyuiop","asdfghjkl","zxcvbnm"],
        symbols:["#$%^&*_+<>","-/：；（）—@“”","…～、？！.，。"],
        isUp:false,
        isShowSymbol:false,
    },

props为父组件传递的参数，其中value为传递的默认值
data中定义

1. number-数字键盘字符串
2. letters-字母键盘的3行字符串数组
3. symbols-字符键盘的3行字符串数组
4. isUp-是否为大写
5. isShowSymbol-是否显示字符
   看了这个定义大家肯定好奇大小写是怎么实现的，关键代码：computed

computed:{
    numberKeys(){
        return this.numbers.split('');
    },
    letterKeys(){
        let keys=[];
        //当为符号时返回符号按钮
        if(this.isShowSymbol){
            this.symbols.forEach(t=>{
                keys.push(t.split(''))
            })
            return keys;
        }
        this.letters.forEach(t=>{
            //大小写转换
            t=this.isUp?t.toUpperCase():t.toLowerCase();
            keys.push(t.split(''))
        })
        return keys;
    }
},

String.split(‘’)；函数将字符串返回为char数组，
String.toUpperCase()；函数将字符串转换为大写，
String.toLowerCase()；函数将字符串转换为小写
按钮通过事件改变isShowSymbol和isUp这两个值来进行键盘内容区的切换。
通过this.$emit(‘change’,this.value)；自定义一个change事件，并返回value值，在每次字符按下时触发，以此返回给父组件键盘输入值。