YonBuilder移动开发平台 AVM框架 封装虚拟数字键盘组件

news2025/3/1 10:35:07

AVM（Application-View-Model）前端组件化开发模式基于标准Web Components组件化思想，提供包含虚拟DOM和Runtime的编程框架avm.js以及多端统一编译工具，完全兼容Web Components标准，同时兼容Vue和React语法糖编写代码，编译工具将Vue和React相关语法糖编译转换为avm.js代码。

基于标准 Web Components 组件化思想，兼容 Vue / React 语法特性，通过一次编码，分别编译为 App、小程序代码，实现多端开发。

组件功能介绍
虚拟数字键盘，支持数字随机，支持自定义输出数字内容的长度，自定义是否支持双向绑定，支持二次输入操作。可以为密码、验证码输入时使用。

示例展示
在这里插入图片描述
在这里插入图片描述

组件开发
组件文件
number-keyboard.stml


<template>

<view class="number-keyboard_container">

 <view class="number-keyboard_box">

  <view class="number-keyboard_box-item-container">

   <view class="number-keyboard_box-item" v-for="item in numbers">

    <view class="number-keyboard_box-item-label" data-key={item} @click="getNumber">

     <text style="font-size:28px;">{item}</text>

    </view>    

   </view>

   <view class="number-keyboard_box-item">    

    <view class="number-keyboard_box-item-label" @click="closeBoard">

     <image class="number-keyboard_box-item-ico" src={closeBase64} mode="widthFix"></image>

    </view>

   </view>

   <view class="number-keyboard_box-item">

    <view class="number-keyboard_box-item-label" data-key='0' @click="getNumber">

     <text style="font-size:28px;">0</text>

    </view>    

   </view>

   <view class="number-keyboard_box-item">  

    <view class="number-keyboard_box-item-label" @click="delNumber">

     <image class="number-keyboard_box-item-ico" src={backBase64} mode="widthFix"></image>

    </view>  

   </view>    

  </view>

 </view>

</view>

</template>

<script>

export default {

 name: 'number-keyboard',

 props:{

  limitLengh:Number,

  recnetNumber:Array,

  isRandom:Boolean,

  isModel:Boolean

 },

 installed(){

  if(this.props.isRandom){

   this.data.numbers.sort(this.randomsort);

  }

  if(this.props.isModel){

   this.data.resultNumber=this.props.recnetNumber;

   this.data.numberIndex = this.props.recnetNumber.length;

  }  

 },

 data() {

  return{

   numbers:['1','2','3','4','5','6','7','8','9'],

   resultNumber:[],

   numberIndex:0,

   closeBase64:'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAAAtCAYAAAA5reyyAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAC4jAAAuIwF4pT92AAADLElEQVRo3u2Zz0tVQRTHP/lMreiXEEREPKIg29gmSJIQWgYVoQhtSqJalv0D0SKQdq0KClpXUNaupE0JZoZWZhL9cNNvkS5mlpbaYs7tnZ7vao83b+67Mh+43PO+9zh35jhnftwBj8fj8Xg8Hg+wHfgAzJTo1QWsjztIc9FfAkGa7+q22eBFlgM4AVQAAXBDKlxm+R35Mi3tPACsAqaA8pjrFMkoJmh9cVckB31St1GbhdruHdNyr3ARkTwJ6zRdUClZuOjKm4GDYt8CnojdBGzF9Ijz0rB1wFF53o8ZBgDqgd1iXwbeY/75J4AVwAvgujzfBuwT+x7Q6aCN1ggwaTKgtCYyA/gppfcovUq0BqU9Vr5tSm8QrUppPcq3VekXlD4gWmCzwS4G+F8R9o8cvjq9JpU9EeGTq6yvyv5S7Ma5SOFHwHFgMXBX6aeBWsy6MQzQIHAMqMSkZcg1YFj8BkWbAJoxaf/UQTucEDA7hV1zmEwKn1F6YlPYNR9dvsxFCm8AGjFj1wxmUVsG3ASGxKcZ2Ai8Ba6KtgnYL3Y78Fr5poEx4AowjlmitGCGiTqXAbRNwOwUbiT3luqI8hkWbURpLcq3RekjSk+LVh3xjrPq7xKbwt//Q/8s908Rz7WtfX7LfUou5+1zkcIPgJ1i6xTuVz7NwFoygQToAHaJ/TzLdw0mqKH/N2AHZm0YBrKCTNonhoD4Z+EoEpvCCxqXs3AKuAM8E30PUEPusSsfyoBXwG35XQ0cwszI94GHDtpojYC5Z2G9F+6mOB9Ja5V+UemJTeFxZY8pe9jiO3RZer8dFLtxLlK4E/M5qpx/e+ZJ4Bzws8DyqzD76ZAhzIy8FHjpoH1WCfCzcEGk5D5ZUCnFIaxTqqBSsrCdwkvkngYuUVqHSmn5XYrHDX/pIP5jy/mu3riDNBfVmLVX3EGKut5gzmGsYftcOKQOWEn+i+Qp4B3RJ2erMWe7+ZLC7J27yHyAsEKxAlgINZiPBDNZ+nLMGUehy54FTSVmSxaVgvVxVzAp9DI7eHvjrlSSWIY52wiD1xp3hZLIFkzw2uOuSJKpw/RGj8fj8XgWHn8A4dKLb2WSDzAAAAAASUVORK5CYII=',

   backBase64:'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'

  }

 },

 methods: {

  randomsort(a,b){

   return Math.random()>0.5 ? -1 : 1;//用Math.random()函数生成0~1之间的随机数与0.5比较，返回-1或1

  },

  closeBoard(e){

   this.fire('close','');

  },

  getNumber(e){

   if(this.props.isModel){

    if(this.data.numberIndex<this.props.limitLengh){

     this.data.resultNumber[this.data.numberIndex] = e.currentTarget.dataset.key;//兼容IOS和安卓

     this.data.numberIndex += 1;

     this.fire('setNumber',this.data.resultNumber);

    }

   }

   else{

    this.fire('setNumber',[e.currentTarget.dataset.key]);

   }

   

  },

  delNumber(e){

   if(this.props.isModel){

    this.data.numberIndex -= 1;

    if(this.data.numberIndex>=0){

     this.data.resultNumber.splice(this.data.numberIndex,1);

     this.fire('setNumber',this.data.resultNumber);

    }

   }

   else{

    this.fire('delNumber','');

   }      

  }

 }

}

</script>

<style>

.number-keyboard_container {

 position: absolute;

 height: 100%;

 width: 100%;

 background-color: rgba(0,0,0,0);

}

.number-keyboard_box{

 align-items: center;

 position: absolute;

 bottom: 0;

 width: 100%;

 background-color: #cccccc;

}

.number-keyboard_box-item-container{

 flex-flow:  row wrap;

 justify-content: space-around;

 align-items: center;

 padding: 10px;

}

.number-keyboard_box-item{

 flex-basis: 33%;

    box-sizing: border-box;

 padding: 5px;

}

.number-keyboard_box-item-label{

 display: flex;

 background-color: #ffffff;

 padding: 5px;

 border-radius: 5px;

 width: 100%;

 height: 48px;

 align-items: center;

 justify-content: center;

}

.number-keyboard_box-item-ico{

 width: 60px;

}

</style>

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

首先需要登录开发平台，。 通过控制平台右上方的模块Store进入，然后选择AVM组件。
在这里插入图片描述
在这里插入图片描述
找到对应模块进入
在这里插入图片描述
也可通过搜索栏，通过组件名称关键字进行检索。
在这里插入图片描述
进入模块详情，点击立即下载下载完整的组件安装包。
在这里插入图片描述
组件压缩包的文件目录如下
在这里插入图片描述
也可通过查看模块文档 来了解模块的具体参数，引用的原生模块，注意事项等。
在这里插入图片描述
具体在项目中的使用步骤是，第一步将压缩文件中的number-keyboard.stml文件拷贝到项目的components目录，通过阅读readme.md 文档和查看demo示例文件 demo-number-keyboard.stml在需要开发的stml文件中，引入组件文件，完成页面的开发。

关于随机数字键盘的原理是运用了数组的sort排序。

sort() 方法，有一个可选参数，必须是函数，供它调用。那么就是个回调函数咯！😁

回调函数的参数要有两个：第2个参数的元素肯定在第1个参数的元素前面!

这个方法的排序是看回调函数的返回值：

如果返回值大于 0，则位置互换。

如果返回值小于 0，则位置不变。

第一次比较：7>9，结果为 false，即 return -1，此时 a 会换到 b 前面，即 7 在 9 之前，所以位置互换。

demo-number-keyboard.stml

<template>

<view class="page">

 <safe-area></safe-area>

 <text class="number-box" @click="openNumberBoard">{isModel?'支持':'不支持'}双向绑定:{number}</text>

 <number-keyboard

  :limitLengh="limit"

  :recnetNumber="arrNumber"

  :isRandom="isRandom"

  :isModel="isModel"

  onclose="closeNumberBoard"

  onsetNumber="getNumber"

  ondelNumber="deleteNumber"

  v-if="isShowNUmberBoard">

  </number-keyboard>

</view>

</template>

<script>

import '../../components/number-keyboard.stml'

export default {

 name: 'demo-random-number-keyboard',

 apiready(){//like created

 },

 data() {

  return{

   isShowNUmberBoard:false,

   number:'',

   arrNumber:[],

   limit:6,

   isRandom:false,

   isModel:false  //是否支持双向绑定

  }

 },

 methods: {

  closeNumberBoard(e){

   this.data.isShowNUmberBoard = false;

  },

  openNumberBoard(e){

   this.data.isShowNUmberBoard = true;

  },

  getNumber(e){

   // console.log(JSON.stringify(e));

   this.data.arrNumber = e.detail;

   this.data.number = e.detail.join('');

  },

  deleteNumber(e){

   api.toast({

    msg:'点击回退、删除键'

   })

   //可根据需要处理显示的内容

   this.data.number='';

  }

 }

}

</script>

<style>

.page {

 height: 100%;

 background-color: #ffffff;

}

.number-box{

 font-size: 20px;

}

</style>

如果在AVM组件库中，没有找到实际项目中需要的组件，可以自己尝试封装组件。

​ ​这是组件化开发的在线文档地址​
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/117342.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Codeforces Round #697 (Div. 3) E. Advertising Agency

Codeforces Round #697 (Div. 3) E. Advertising Agency

翻译&#xff1a; 玛莎在一家广告公司工作。为了推广新品牌&#xff0c;她想和一些博主签约。玛莎总共有&#x1d45b;个不同的博主。编号为&#x1d456;的博主拥有&#x1d44e;&#x1d456;名粉丝。 由于玛莎的预算有限&#xff0c;她只能与&#x1d458;不同的博主签约。…
阅读更多...
LeetCode动态规划—跳跃游戏从跳到头到跳最少下跳到头（45、55）

LeetCode动态规划—跳跃游戏从跳到头到跳最少下跳到头（45、55）

跳跃游戏跳跃游戏跳跃游戏Ⅱ跳跃游戏 一个下标对应的值为3&#xff0c;那证明这个位置可以跳到前后3个位置的下标处。&#xff08;3均可达&#xff09; 如果依次遍历完这个数组&#xff0c;有下标在跳跃过程中最远位置仍然不可达&#xff0c;即证明无法到达最后一个位置。 可以…
阅读更多...
js实现九宫格抽奖功能

js实现九宫格抽奖功能

分享一下js的九宫格抽奖功能 首先是html部分&#xff1a; <div class"box"><div class"div2">短裙</div><div class"div3">口红</div><div class"div4">草莓</div><div class"div…
阅读更多...
【vue】控制台中如何移除数组arr中的值？如何给数组arr中放值？

【vue】控制台中如何移除数组arr中的值？如何给数组arr中放值？

移除数组arr属性中的值&#xff1a;vm.arr.shift() 新增数组arr属性中的值&#xff1a;vm.arr.push(‘属性值’) 移除atguigu3样式后效果&#xff1a; 向数组arr中添加样式值后效果&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta…
阅读更多...
FlinkSql开窗实例：消费kafka写入文本

FlinkSql开窗实例：消费kafka写入文本

前言 以前写Flink从kafka入hdfs因为业务需求和老版本缘故都是自定义BucketSink入动态目录中&#xff0c;对于简单的需求可以直接用Flink SQL API进行输出。Flink版本1.13.1。 Flink官网示例 准备 本地下载个kafka&#xff08;单机即可&#xff09;&#xff0c;新建个桌面目…
阅读更多...
Unreal 读写自定义配置文件

Unreal 读写自定义配置文件

基础 首先需要自定义一个继承自UObject的类&#xff0c;UCLASS加上config标志 UCLASS(config MyClass) class UMyClass: public UObject将想要和配置文件交互的属性&#xff0c;UFUNCTION加上Config标志 UPROPERTY(Config, EditAnywhere) float TestP;之后只要配置文件内存…
阅读更多...
【日常系列】LeetCode《21·综合应用3》

【日常系列】LeetCode《21·综合应用3》

数据规模->时间复杂度 <10^4 &#x1f62e;(n^2) <10^7:o(nlogn) <10^8:o(n) 10^8<:o(logn),o(1) 内容 lc 217 &#xff1a;存在重复元素 https://leetcode.cn/problems/contains-duplicate/ 提示&#xff1a; 1 < nums.length < 10^5 -10^9 < nums[…
阅读更多...
Python基础教程(2)——列表、元组、字典、集合、斐波纳契数列、end 关键字、条件控制、循环语句

Python基础教程(2)——列表、元组、字典、集合、斐波纳契数列、end 关键字、条件控制、循环语句

1.列表 &#xff08;1&#xff09;删除列表的元素 list [Google, Runoob, 1997, 2000] print ("原始列表 : ", list) del list[2] print ("删除第三个元素 : ", list)&#xff08;2&#xff09;Python列表脚本操作符 &#xff08;3&#xff09;嵌套列表…
阅读更多...
Arco 属性

Arco 属性

文章目录Arco介绍1. 简介1.1 背景1.2 运行环境1.3 浏览器兼容性2. 设计价值观2.1 清晰2.2 一致2.3 韵律2.4 开放3. 设计原则3.1 及时反馈3.2 贴近现实3.3 系统一致性3.4 防止错误发生3.5 遵从习惯3.6 突出重点3.7 错误帮助3.8 人性化帮助4. 界面总体风格4.1 页面风格4.1.1 主色…
阅读更多...
知识答题小程序如何制作_分享微信答题抽奖小程序制作步骤

知识答题小程序如何制作_分享微信答题抽奖小程序制作步骤

知识答题小程序如何制作&#xff1f;现在越来越多的企业和组织逐步进行各种获奖知识问答小程序。那么&#xff0c;如何制作一个答题小程序呢&#xff1f;今天&#xff0c;我们一起来看看~需要的老板不要走开哦~既然点进来了&#xff0c;那就请各位老板耐心看到最后吧~怎么做一个…
阅读更多...
JDBC如何破坏双亲委派机制

JDBC如何破坏双亲委派机制

JDBC的注册会涉及到java spi机制&#xff0c;即Service Provideer Interface&#xff0c;主要应用于厂商自定义组件或插件中&#xff1b;简单说就是java来定义接口规则和方法&#xff0c;厂商实现具体逻辑&#xff0c;每家厂商根据自己产品实现的逻辑肯定不相同&#xff0c;但上…
阅读更多...
数据库查询语句-详细篇

数据库查询语句-详细篇

今天来梳理一下数据库的一些查询语句&#xff0c;做软件/移动端/电脑端&#xff0c;开发程序时必然离不开数据库的设计以及查询&#xff1b; 一&#xff1a;具体的代码如下展示&#xff1a; 1.查询数据库指定表的所有信息 select * from uploadimagecode;2.查询当前数据表部…
阅读更多...
说说PPT的“只读模式”和“限制编辑”有何区别

说说PPT的“只读模式”和“限制编辑”有何区别

对PPT的内容进行保护&#xff0c;使其不能随意编辑&#xff0c;防止意外更改&#xff0c;我们可以将PPT设置成无法编辑、无法改动的“保护模式”。 设置“保护模式”&#xff0c;一般我们都会想到【限制编辑】模式&#xff0c;但在设置的时候&#xff0c;会发现PPT里&#xff…
阅读更多...
毕业半年年终总结

毕业半年年终总结

毕业半年年终总结 如果说2021年主要的内容是求职和实习 那么2022年一年主要的内容便是毕业和工作 匆匆忙忙 本科毕业了 6月份的时候参加完毕业答辩&#xff0c;也就顺利的毕业了 实际上中途也有过一些插曲&#xff0c;比如毕业设计是制作某某管理系统&#xff0c;基本上所有…
阅读更多...
【Java编程进阶】流程控制结构详解

【Java编程进阶】流程控制结构详解

推荐学习专栏&#xff1a;Java 编程进阶之路【从入门到精通】 文章目录1. 流程控制结构2. 顺序结构3. 分支结构3.1 单分支3.2 双分支3.3 多分支 (if-else)3.4 嵌套 if3.5 多分支结构 (switch)4. 循环结构4.1 for 循环4.2 while 循环4.3 do...while循环5. 流程跳转5.1 break5.2 …
阅读更多...
【数据结构】优先级队列（堆）

【数据结构】优先级队列（堆）

成功就是失败到失败&#xff0c;也丝毫不减当初的热情 目录 1.理解优先级队列 2.优先级队列的底层 2.1 认识堆 2.1.1 堆的概念 2.2.2 堆的存储 2.2 堆的创建 2.2.1 向下调整算法 2.2.2 堆的创建 2.3 堆的插入 2.4 堆的删除 2.5 查看堆顶元素 2.6 堆的运用 3…
阅读更多...
windows 11 安装jdk1.8

windows 11 安装jdk1.8

1.先去JDK官网下载 JDK1.8官网 2.进入到官网之后 3. 点击上图windows选项       按照你的电脑是32位还是64位按需下载(我电脑是64位) 4. 点击下载之后就会跳转到Oracle账号登录界面&#xff08;没有Oracle账号的注册一下这边我就省略了注册了&#xff09; 5.把下载好的…
阅读更多...
商业智能BI财务分析，如何从财务指标定位到业务问题

商业智能BI财务分析，如何从财务指标定位到业务问题

商业智能BI开发人员都会思考如何从财务指标定位到业务问题&#xff0c;就是做了很多的商业智能BI开发&#xff0c;每次也都涉及到了财务分析&#xff0c;各种财务能力指标&#xff0c;各种可视化的分析图表。但是不知道这些财务指标到底能够反映出企业的什么问题&#xff0c;和…
阅读更多...
蓝桥杯Python练习题3-十六进制转八进制

蓝桥杯Python练习题3-十六进制转八进制

资源限制 内存限制&#xff1a;512.0MB C/C时间限制&#xff1a;1.0s Java时间限制&#xff1a;3.0s Python时间限制&#xff1a;5.0s 问题描述 给定n个十六进制正整数&#xff0c;输出它们对应的八进制数。 输入格式 输入的第一行为一个正整数n &#xff08;1<n<10&am…
阅读更多...
Weston 纹理倒置(render-gl)

Weston 纹理倒置(render-gl)

纹理倒置 背景 在 render-gl 接入 frame buffer object 实现 off-screen 渲染后,发现得到的渲染图发生了180的倒置. 查阅了有关资料后,在 eglspec.1.5 中的 2.2.2.1 Native Surface Coordinate Systems 找到了答案: The coordinate system for native windows and pixmaps …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023