精华内容
下载资源
问答
  • 微信小程序调起键盘性能优化

    千次阅读 2018-07-22 07:15:32
    小程序中,我们经常有调起键盘的操作场景,但是在不同的场景下解决方案不尽相同,还是需要具体问题具体分析。 需求分析 最近在项目中有一个需求,是从列表页点击评论按钮进入详情页时,在加载完页面后自动调起键盘...

    在小程序中,我们经常有调起键盘的操作场景,但是在不同的场景下解决方案不尽相同,还是需要具体问题具体分析。

    需求分析

    最近在项目中有一个需求,是从列表页点击评论按钮进入详情页时,在加载完页面后自动调起键盘进入评论状态。从需求来看,我们应该在onReady函数中调起键盘,因为onReady函数是在页面初次渲染完成时被调用。但是在实践中我们发现,对于一些配置不好的手机,其加载页面速度较慢,在onReady函数调用时页面并没有渲染完毕,就会导致placeholder和input组件位置错乱的现象。其本质原因是,onReady生命周期函数并不能在调用时承若已经将页面渲染完成了。(尽管文档中描述是已经完成了。)

    之前的操作是在onReady生命周期函数中调起键盘。

    this.setData({ focus: true })
    复制代码

    发现这个问题后做了相应的延迟处理

    setTimeout(() => {
      this.setData({ focus: true })
    }, 300)
    复制代码

    但这是治标不治本的方法,手机性能好的用户会无谓的等待300毫秒,而手机性能很差的用户等待300毫秒也不一定就能解决这个问题。

    解决思路

    那么既然小程序并没有提供给我们一个理想的渲染结束后的回调函数,那么我们就换个思路:使用短轮询来处理,当页面渲染完成后才调起键盘的操作。

    既然要使用短轮询,那么我们去轮询什么呢?什么标志代表着页面渲染完成了呢?在这里,我是使用wx.createSelectorQuery()方法,它会返回一个SelectorQuery对象实例,在这个实例上调用select方法选择我想要去轮询的节点,在回调函数中判断参数是否为null。如果返回了监控的节点信息,那么说明已经渲染完成。这时就可以进行键盘调起操作了。

    let timer = setInterval(() => {
      wx.createSelectorQuery().select('#comment-section').boundingClientRect(rect => {
        if (rect !== null && timer !== null) {
          clearInterval(timer)
          timer = null
          this.setData({ focus: true })
        }
      }).exec()
    }, 50)
    复制代码

    在此之上,如果我们只粗暴的让focustrue并不是个明智的做法。

    在调起键盘时默认页面会上推,如果在评论很少的情况下这样的体验并不好。所以需要判断一个高度,超过这个值就上推,没超过就不上推。这个值视实际情况而定。 上推的操作是由input组件的adjust-position属性决定,为true则上推,否则则不上推。这时回调返回的参数中的节点信息就可以派上用场了。

    // 在this.setData({ focus: true })前对节点高度进行判断
    if (rect.height < 500) this.setData({ push: false })
    else this.setData({ push: true })
    复制代码

    onBlur函数问题

    在实际的操作中,我们发现在键盘被调起后会有概又自动收回。经过排查发现时onBlur函数的问题,在onBlur函数中,我们手动的设置focusfalse,但其实并不需要这一步操作,反而带来了副作用。在我们去除了这部分代码后,键盘自动收起的问题得到了解决。

    封装起来

    虽然我们完成了这次任务的需求,但是显而易见的,这样的任务在未来肯定还会再次出现。所以机智的我们应该赶快把整套流程封装起来,以便下次直接调用。

    那么这时我们使用的方式就是这样的:

    const Util = require("xxx") // 引入封装的库
    
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
      Util.onTotalReady('#comment-section', 50, rect => {
        if (rect.bottom < 500) this.setData({ push: false })
        else this.setData({ push: true }}
        this.setData({ focus: true })
      })
    }
    复制代码

    小结

    在解决键盘调起的这个过程中我们可以看出微信小程序开发流程的简陋,这个问题的出现本质上是小程序提供给我们的生命周期函数的不够准确。否则在页面渲染完成的情况下我怎么会拿不到节点信息呢?像react中的componentWillMount生命周期函数中就不会出现这样的问题,所以希望小程序能再变强大一些,也让我们少写一点这种hack代码。

    转载于:https://juejin.im/post/5b542e796fb9a04fe01811a5

    展开全文
  • 小程序自己定义键盘

    千次阅读 2019-04-02 07:52:07
    自定义键盘功能 这个键盘的样式可以自己随便定义,功能只能...写这个键盘的原因就是在支付宝小程序里调用键盘会出现很多问题。而且不好控制。自己写键盘不仅避免了很多坑,而且样式可以随便自己定义,方便。 实现...

    自定义键盘功能

    这个键盘的样式可以自己随便定义,功能只能实现简单的数字字母或指定汉字的输入。不能输入拼音拼出汉字。

    适用场景

    这个键盘的适用场景就是一些特定的需要输入指定字母或汉字的地方,比如输入用户手机号,再比如输入各个省的车牌号首位,再比如输入飞机航班号。写这个键盘的原因就是在支付宝小程序里调用键盘会出现很多问题。而且不好控制。自己写键盘不仅避免了很多坑,而且样式可以随便自己定义,方便。

    实现原理

    实现原理其实非常简单,首先创建一个组件,这个组件里放的就是键盘的样式和一些回调方法。之后在你要用到输入的地方写一个假键盘, 注意不是写一个输入框(Not input),就是写一个view,来实时显示用户输入的数据。

    在组件里编写一个数组,数组里存放键盘要输入的字,之后吧数组的内容遍历到键盘上,每一个按键加一个点击事件,点击的时候吧点击的内容传给调用他的父元素,父元素接受回调实时同步到自己写的假input上整个功能就实现了。其实很简单。

    基本功能算是实现了,如果想要优化的话,可以继续增加功能,比如长按粘贴,长按清楚建清空,根据安卓和IOS给与不同样式等等。

    代码分享

    GitHub地址: keyboard

    一些基本的开关,回调会在GitHub上写清楚,这只是一个思路,没有局限性的,你可以在这基础上写出很多花样。

    代码(需要代码请去github地址):

    html:

    <view a:if="{{isShow}}" class="vehicle-panel" style="height:488rpx;bottom:{{bottom}}">
      <!--数字键盘  -->
      <view class="number-panel-box" a:if="{{keyBoardType == 2}}">
        <view class="number-panel-row">
          <view class='number-panel-row-key vehicle-hover' onTap='vehicleTap' a:for="{{keyPhone}}" data-value="{{item}}" key="{{item}}">
            {{item}}
          </view>
          <view onLongTap="longPressDelete" onTap='vehicleTap' class='number-panel-row-button vehicle-hover' data-value="delete">
            <image src='../../image/airport-card/delete.png' class='vehicle-en-button-delete' mode='aspectFit'>删除</image>
          </view>
        </view>
      </view>
      <!--英文键盘  -->
      <block class="letter-panel-box" a:if="{{keyBoardType == 1}}">
        <view class="vehicle-panel-row">
          <view class='vehicle-panel-row-button vehicle-panel-row-button-number vehicle-hover'
            onTap='vehicleTap' a:for="{{keyNumber}}" data-value="{{item}}" key="{{item}}">
            {{item}}
          </view>
        </view>
        <view class="vehicle-panel-row">
          <view class='vehicle-panel-row-button vehicle-hover'
            a:for="{{keyEnInput1}}" onTap='vehicleTap' data-value="{{item}}" key="{{item}}">
            {{item}}
          </view>
        </view>
        <view class="vehicle-panel-row">
          <view class='vehicle-panel-row-button vehicle-hover'
            a:for="{{keyEnInput2}}" onTap='vehicleTap' data-value="{{item}}" key="{{item}}">
            {{item}}
          </view>
          <view onLongTap="longPressDelete" class='vehicle-panel-row-button vehicle-panel-row-button-img vehicle-hover'>
            <image src='../../image/airport-card/delete.png' class='vehicle-en-button-delete' onTap='vehicleTap' data-value="delete" mode='aspectFit'>删除</image>
          </view>
        </view>
        <view class="vehicle-panel-row-last">
          <view class='vehicle-panel-row-button vehicle-panel-row-button-last vehicle-hover'
             onTap='vehicleTap' a:for="{{keyEnInput3}}" data-value="{{item}}" key="{{item}}">
             {{item}}
          </view>
          <view class='vehicle-panel-row-button vehicle-panel-ok' onTap='vehicleTap' data-value="ok">
            确认</view>
        </view>
      </block>
    </view>
    <!--适配iPhoneX的底条-->
    <view class="adaptive" a:if="{{isAdaptive}}"></view>
    
    复制代码

    js:

    Component({
      mixins: [],
      data: {
        keyNumber: [1,2,3,4,5,6,7,8,9,0],
        keyEnInput1: ['Q','W','E','R','T','Y','U','I','O','P'],
        keyEnInput2: ['A','S','D','F','G','H','J','K','L'],
        keyEnInput3: ['Z','X','C','V','B','N','M'],
        keyPhone: [1,2,3,4,5,6,7,8,9,"+",0],
        bottom:'0'
      },
      props: {
        isShow: false,
        keyBoardType: 1,//键盘样式 “1” 为数字英文键盘 “2” 为数字键盘
        backgroundColor:"#fff",
        onInputChange:(val)=>{},
        onIputdelete:()=>{},
        onInputOk:()=>{},
        isAdaptive:false,
        onLongPressDelete:()=>{}
      },
      didMount() {
        if(this.props.isAdaptive){
          this.setData({
            bottom:'60rpx'
          })
        }else{
          this.setData({
            bottom:'0'
          })
        }
      },
      methods: {
        vehicleTap: function (event) {
          // console.log(event,'....')
          let val = event.target.dataset.value;
          switch (val){
            case 'delete':
              this.props.onIputdelete(val);
              this.props.onInputChange(val);
            break;
            case 'ok':
              this.props.onInputOk(val);
            break;
            default:
              this.props.onInputChange(val);
          }
        },
        longPressDelete(){
          //长按清除
          this.props.onLongPressDelete()
        },
      }
    });
    复制代码

    css:

    /* 数字键盘样式 */
    .number-panel-box {
      display: flex;
      width: 750rpx;
    }
    .number-panel-row {
      display: flex;
      background: rgba(210,213,219,0.90);
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      padding: 7rpx;
      padding-bottom: 0;
    }
    .number-panel-row-key {
      background-color: #fff;
      margin: 7rpx;
      padding: 5rpx;
      width: 220rpx;
      height: 94rpx;
      text-align: center;
      line-height: 94rpx;
      border-radius: 10rpx;
      box-shadow: 0 1px 0 0 rgba(0,0,0,0.35);
      font-size: 50rpx;
    }
    .number-panel-row-button {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(210,213,219,0.90);
      width: 220rpx;
      height: 94rpx;
      border-radius: 10rpx;
      margin: 7rpx;
      padding: 5rpx;
    }
    .number-panel-img image {
      width: 70rpx;
      height: 105rpx;
    }
    /* 字母键盘样式 */
    .vehicle-panel {
      width: 100%;
      position: fixed;
      left: 0;
      z-index: 1000;
      background: #D2D5DB;
      overflow: hidden;
      box-sizing: border-box;
    }
    .letter-panel-box {
      display:flex;
      flex-direction:column;
      justify-content:center;
    }
    .vehicle-panel-row {
      display: flex;
      justify-content: space-between;
      padding-top: 10rpx;
      align-items: center;
    }
    .vehicle-panel-row-last{
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 35rpx;
      padding-top: 10rpx;
    }
    .vehicle-panel-row-button {
      background-color: #fff;
      margin: 5rpx;
      padding: 5rpx;
      width: 63rpx;
      height: 84rpx;
      text-align: center;
      line-height: 86rpx;
      font-size: 46rpx;
      background: #FFFFFF;
      box-shadow: 0 2rpx 0 0 rgba(0,0,0,0.35);
      border-radius: 10rpx;
    }
    .vehicle-panel-row-button-last {
      width: 85rpx;
      height: 84rpx;
      line-height: 86rpx;
    }
    .vehicle-hover:active {
      background-color: #ccc;
    }
    .vehicle-panel-row-button-img {
      display: flex;
      justify-content: center;
      align-items: center;
      background: rgba(171,179,189,0.50);
    }
    .vehicle-en-button-delete {
      width: 46rpx;
      height: 34rpx;
    }
    .vehicle-panel-row-button-img:active{
      background-color: #fff;
    }
    .vehicle-panel-ok {
      background-color: #4287FF;
      width: 180rpx;
      height: 84rpx;
      font-family: 'PingFangSC-Medium';
      font-size: 32rpx;
      color: #fff;
    }
    .vehicle-panel-ok:active{
      background-color: #4B71E6;
    }
    .adaptive{
      width: 750rpx;
      height: 60rpx;
      background: #D2D5DB;
      position: absolute;
      z-index: 999;
      left: 0;
      bottom: 0
    }
    复制代码

    转载于:https://juejin.im/post/5ca31443e51d4532037e636e

    展开全文
  • 微信小程序input为数字键盘

    万次阅读 2018-10-17 10:50:39
    微信小程序input为数字键盘 微信小程序的 input 有个属性叫 type,这个 type 有几个可选值: text:不必解释 number:数字键盘(无小数点) idcard:数字键盘(无小数点、有个 X 键) digit:数字键盘(有小数点) ...

    微信小程序input为数字键盘

    微信小程序的 input 有个属性叫 type,这个 type 有几个可选值:

    • text:不必解释
    • number:数字键盘(无小数点)
    • idcard:数字键盘(无小数点、有个 X 键)
    • digit:数字键盘(有小数点)
      注意:number 是无小数点的,digit 是有小数点的
    展开全文
  • 支付宝小程序键盘兼容问题

    千次阅读 2018-12-11 17:01:41
    问题描述:如果有按钮btn需要固定在底部,并且用的css为position: fixed;,就会造成键盘时按钮被顶在键盘上方,苹果系统不会有这种情况发生 解决方法:把按钮btn样式改为position: absolute;...

    问题描述:如果有按钮btn需要固定在底部,并且用的css为position: fixed;,就会造成键盘弹起时按钮被顶在键盘上方,苹果系统不会有这种情况发生

    解决方法:把按钮btn样式改为position: absolute;

    展开全文
  • 小程序拉起软键盘

    千次阅读 2018-12-03 20:37:50
    使用cursor-spacing=“180” 一版老版本微信不兼容rpx 所以还是直接使用数字 代表着 焦点距离键盘的高度 如果使用的是fix定位 只需要知道光标距离底部的高度即可。 ...
  • 微信小程序--处理键盘收起

    千次阅读 2020-11-24 13:40:13
    弹出的键盘, 点击键盘上的收起键盘的按钮, 无回. 安卓: 键盘上自带收起键盘 iOS: 安装第三方键盘可以尝试 描述: 通常, 我们判断键盘收起, 是判断input或者 textarea 的失去焦点, 作为收起键盘的依据. 但是, 当我们...
  • 微信小程序车牌键盘

    千次阅读 2018-07-23 10:28:24
    公司要做一个停车场微信小程序,支持临时车预支付以及支付记录查询等功能,其中涉及车牌输入的功能,为了提升用户体验,避免繁琐的输入,决定自己写一个键盘。 效果图如下 省份简写键盘如下: 省份简写键盘 英文...
  • 标签:type解决dig小数点小程序哈哈注意numberber ...当type为number时,在小程序里调取的数字键盘是没有小数点的;应该改为:digit(哈哈,我自己开发的时候也没有注意这个); 下面简单记录一下 numb...
  • 微信小程序 自定义控件 数字键盘

    千次阅读 2020-07-28 10:07:07
    个人外包项目,微信小程序自定义数字键盘!能用,还没详细优化! 数字键盘应用场景 甲方:XX在线吗?你这个数字填写的部分应用的场景能不能不用input,弹出手机键盘很烦啊~挡住下面元素了,用户体验感很不好~ 乙方...
  • 微信小程序使用键盘搜索功能

    千次阅读 2019-03-26 20:55:45
    实现微信小程序键盘搜索功能时候,需要有三个关键属性: 1、name=‘search’;//search内容随便写 2、bindconfirm='shop_search_function';//这个变量是js函数 3、confirm-type='search' ;//设置右下角文字 完整...
  • 微信小程序-点击按钮弹出软键盘

    万次阅读 2019-06-25 14:54:08
    1.实现目标: 即点击右下角的按钮,弹出...当input组件获取到焦点时才会弹出软键盘,所以foucs可以设置为true或者auto,如果设置为false则不会弹出软键盘。 3.代码实现: wxml: <!-- 自定义标题栏 ...
  • 小程序 input自动聚焦唤起键盘 <input type="text" focus='true' bindconfirm="onConfirm" confirm-type="search" /> 1. focus='true' 获取焦点 2. bindconfirm="onConfirm" 获取键盘事件 3. confirm-type=...
  •  IOS系统 一些APP或者微信小程序在收到短信验证码的时候会在键盘上自动保存验证码信息,当用户点击的时候,会自动赋值到当前所点击的输入框中 2、案例: 2、实现:  TIPS:这个功能是由系统(IOS 12)支持而...
  • 1.失败案例图: 描述:弹出框输入完以后点击确定这个时候用户体验不太好,如果把弹出那个框上移一些是不是会更好一些,那么我们的目的就是上移达到下面的效果 2.成功案例图: 这样是不是更加完美,其实改起来...
  • 小程序input自动聚焦拉起键盘

    千次阅读 2019-08-26 08:19:51
    自动聚焦,拉起键盘;不过官方的提示即将废弃,所以能不用还是不要用 2,focus 接受boolean值;默认为false;只需设置为true即可 获取焦点(推荐使用) 3,如果想改变键盘右下角文字 confirm-type;值为search...
  • 在微信小程序中使用input框选择日历时在手机上回自主的弹出软键盘 解决办法就是: 将input框设置为禁止点击状态disabled=‘disabled’。 提示如果设置为只读会不作用 ...
  • 微信小程序-API框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。说明:wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
  • 假设页面内有A,B,C,D四个输入框, 此时用到的是A输入框, 设置了自动弹出键盘的属性:auto-focus='true' 或者 focus='true', 其他输入框都设置为false, 此时进入页面自动弹出了软键盘, 但却无法自动聚焦, 如将其余...
  • 小程序input取值  一般情况下,输入框可以直接通过value来取值和更改 &lt;input class='leftMove' value='{{name}}' placeholder='请输入您的姓名'&gt;&lt;/input&gt; 小程序input修改值 ...
  • 在前段时间做的微信小程序中(页面中下面是有默认的tabbar),对于键盘引发的问题,总是会出现下面的图1 跟 图2 的情况。图1即多上弹大约一个键盘的高度(或者更小一点),图2则没有中间的空白区域,但是button...
  • type 的合法值 text - 文本输入键盘 number - 数字输入键盘 idcard - 身份证输入键盘 digit - 带小数点的数字键盘 confirm-type 设置键盘右下角按钮的文字,仅在type...微信小程序 - 设置input只能输入数字:https:/
  • 问题描述:input输入在iOS的微信中调键盘之后,输入完成收起软键盘的时候页面下方(原来软键盘的位置)有空白,这将导致下方fixed定位按钮失效等问题,解决方案:通过给input添加失去焦点事件,触发该事件的时候...
  • 从今天开始带领大家实现一款云开发版的点餐小程序 技术选型 1,前端 微信小程序原生框架 css JavaScript 2,管理后台 云开发Cms内容管理系统 web网页 3,数据后台 小程序云开发 云函数 云数据库 云存储 效果...
  • input控件除了获取和显示用户输入的语句,很重要的一个功能是聚焦和键盘使用,下面就相关属性做详细地介绍:cursor-spacing: 类型:Number指定光标与键盘的距离,单位 px 。取 input 距离底部的距离和 cursor-...
  • Nodejs定时发消息小程序,解决robotjs不支持输入汉字问题+node监听鼠标键盘事件!吹啊!吹啊!我骄傲的放纵··· 写了一上午长篇大论,中午出去吃个饭回了都没了,桑心,蛋疼,心烦, 说了多少遍叫我月城少主!月城...
  • 前面给大家讲过一个借助小程序云开发实现微信支付的,但是那个操作稍微有点繁琐,并且还会经常出现问题,今天就给大家讲一个简单的,并且借助官方支付api实现小程序支付功能。 传送门 借助小程序云开发实现小程序...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 54,087
精华内容 21,634
关键字:

小程序调起键盘