微信小程序中实现车牌输入功能

目录
  • 前言
  • 背景
  • 大猜想
  • 找规律
  • 结构和样式
  • 组件实现
    • 参数
    • 键盘类型的判断
    • 获取输入内容
    • 组件传参
    • 组件使用
    • 测试
    • 解决键盘类型判断的bug
  • 结束语
    • 组件的代码
    • 使用页面代码

前言

哈哈哈,上新文章啦。好久没有更新啦,今天乘着休息来总结下之前用的到自定义键盘来输入车辆号牌微信组件。下面是效果图,请欣赏:

背景

近期做了一个和车有关的项目,有车肯定就有车牌,我们都知道车牌是有一定规律的,如果简单的给个输入框的话。。。。。。这里省略一万字哈,从小我的编程老师告诉我不要相信任何用户输入的东西。嗯嗯!现在想想还真的是这样,总有一些别具一格的用户就喜欢反着来,也不知道是真不懂还是搞破坏哈。还有个老师告诉我永远要把用户当SB,虽然自己也是用户,感觉不好,但是话糙理不糙啊,因为你永远不知道使用你写的东西的是什么。。。。。(甚至是不是人)。在这样的背景下你说要让用户输入一个正确的车牌号,那可真是比登天还难啊,太南了,臣妾做不到啊。

大猜想

既然这样哈,我们自己也来当一回用户看看大概有什么情况发生哈,来咯,不要走开哦,下面就是发挥用户脑洞的时候了。

  • 我a.12345
  • 鄂a.ii111
  • Xa.6666666
  • za.哈哈哈哈哈
  • 。。。。。。

哇哦,估计写一天都写不完呢,后面看大家的啦,这里有一个前提就是咱不考虑以英文开头的车牌,如果需要考虑大家可以举一反三啦。

找规律

其实没啥规律可找的,直接上百度一搜就知道车牌的规则。前面是省份简称,第二位是字母,后面是字母和数字的混合,这里有几个特殊的就是教练车、港澳车进大陆、领事馆的车。另外字母和字母o和数字1和0不好辨认,所以字母i和字母o去掉了,最后规律就有了。

结构和样式

知道规律后就可以开始动手操作了,先看看设计图的键盘布局:

上面图片是省份简称键盘布局

上面图片是第二位字母键盘布局

上面图片是后面几位的键盘布局

下面就根据这几个布局来写结构了:

<view class="keyboard" wx:if="{{isShow}}">
    <view class="item">
        <view wx:for="{{dataArr1}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item">
        <view wx:for="{{dataArr2}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item">
        <view wx:for="{{dataArr3}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item" wx:if="{{dataArr4.length}}">
        <view wx:for="{{dataArr4}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="delbtn" bindtap="delKey" wx:if="{{keyType == 'carlicense'}}"><image src="./icon_del.png"></image></view>
</view>
<view class="mask" bindtap="hideKeyBoard" wx:if="{{isShow}}"></view>

分别把数据放入四个数组中,由于第二位少了一些,所以干脆少一行,还有删除的按钮,以及最后的遮罩层,用于点击其他地方关闭键盘

接下来先加几个测试的数据把基本的颜色写好:

data: {
  dataArr1:["京","沪","粤","津","冀","晋","辽","蒙","黑","吉"],
  dataArr2:["苏","浙","皖","闽","赣","鲁","豫","鄂","湘"],
  dataArr3:["川","贵","云","渝","桂","琼","藏","陕"],
  dataArr4:["甘","青","宁","新","台"]
}

这里以输入省份的为例

接下来就是把我们的样式添加上去就可以看到效果了:

.keyboard {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999;
    width: 100%;
    background: #d1d6d9;
    padding: 20rpx 10rpx 0;
    padding-bottom:calc(30px + env(safe-area-inset-bottom)/2);
    box-sizing: border-box;
}

.keyboard .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
}

.keyboard .item view {
    width: 9%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin-right: 10rpx;
    background: #ffffff;
    border-radius: 10rpx;
    font-size: 28rpx;
}

.keyboard .item view:last-child {
    margin-right: 0;
}

.keyboard .delbtn {
    position: fixed;
    right: 10rpx;
    bottom: calc(40px + env(safe-area-inset-bottom)/2);
    height: 70rpx;
    width: 18%;
    z-index: 999999;
    background: #adb3bd;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboard .delbtn image{
    width: 60rpx;
    height: 60rpx;
}

.mask{
    position: fixed;
    left: 0;
    top: 113rpx;
    bottom: 0;
    right: 0;
    z-index: 99998;
}

这里样式就不多说了,大家可以按照自己的喜好来就行

现在已经可以看到效果了,如图:

组件实现

组件的实现其实很简单,主要需要知道微信组件的用法就ok。

参数

实现之前来看看需要什么参数,由于是键盘肯定是需要显示和隐藏的,所以需要一个显示和隐藏的参数这里就命名为isShow。再看我们的样式如果是输入第二位或者后面的呢是不是之前定义的几个数组数据就得改变,问题来了什么时候改变呢?是不是应该在点击输入的地方就打开这个时候就知道了是输入省份还是输入第二位还是后面的,所以这里需要有一个参数来表示当前是需要显示什么类型的键盘暂命名为keyType。到这里参数有了,再来看看是否需要设置默认值是啥,对于isShow来说开始肯定是false即为不显示的,至于keyType默认那个都行,这里默认值设为省份的。这里的参数其实就是需要调用组件时传递过来的参数,所以这两个参数就是设为组件的属性。

有了上面的分析,组件的大概就出来了,代码如下:

Component({
    properties: {
        keyType:{
            type:String,
            value:'province'
        },
        isShow:{
            type:Boolean,
            value:false
        }
    },
    data: {
        dataArr1:["京","沪","粤","津","冀","晋","辽","蒙","黑","吉"],
        dataArr2:["苏","浙","皖","闽","赣","鲁","豫","鄂","湘"],
        dataArr3:["川","贵","云","渝","桂","琼","藏","陕"],
        dataArr4:["甘","青","宁","新","台"]
    }
})

键盘类型的判断

ok,上面已经把键盘所需参数考虑好了,接下来就是需要根据传入的keyType来切换不同的键盘数组的值了。其实就是在组件方法里面写一个方法来切换就行了,实现如下:

Component({
    properties: {
        keyType:{
            type:String,
            value:'province'
        },
        isShow:{
            type:Boolean,
            value:false
        }
    },
    data: {
        dataArr1:[],
        dataArr2:[],
        dataArr3:[],
        dataArr4:[]
    },
    methods: {
        changeType(){
            if(this.data.keyType == 'letter'){
                this.setData({
                    dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
                    dataArr2:["A","S","D","F","G","H","J","K","L"],
                    dataArr3:["Z","X","C","V","B"],
                    dataArr4:[]
                })
            }else if(this.data.keyType == 'province'){
                this.setData({
                    dataArr1:["京","沪","粤","津","冀","晋","辽","蒙","黑","吉"],
                    dataArr2:["苏","浙","皖","闽","赣","鲁","豫","鄂","湘"],
                    dataArr3:["川","贵","云","渝","桂","琼","藏","陕"],
                    dataArr4:["甘","青","宁","新","台"]
                })
            }else if(this.data.keyType == 'carlicense'){
                this.setData({
                    dataArr1:["1","2","3","4","5","6","7","8","9","0"],
                    dataArr2:["A","B","C","D","E","F","G","H","J","K"],
                    dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
                    dataArr4:["W","X","Y","Z","港","澳","学","领"]
                })
            }
        }
    }
})

切的方法有了,现在就是在初始化的时候调用这个方法就行了,修改代码如下:

Component({
    properties: {
        keyType:{
            type:String,
            value:'province'
        },
        isShow:{
            type:Boolean,
            value:false
        }
    },
    data: {
        dataArr1:[],
        dataArr2:[],
        dataArr3:[],
        dataArr4:[]
    },
    attached(){
        this.changeType()
    },
    methods: {
        changeType(){
            if(this.data.keyType == 'letter'){
                this.setData({
                    dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
                    dataArr2:["A","S","D","F","G","H","J","K","L"],
                    dataArr3:["Z","X","C","V","B"],
                    dataArr4:[]
                })
            }else if(this.data.keyType == 'province'){
                this.setData({
                    dataArr1:["京","沪","粤","津","冀","晋","辽","蒙","黑","吉"],
                    dataArr2:["苏","浙","皖","闽","赣","鲁","豫","鄂","湘"],
                    dataArr3:["川","贵","云","渝","桂","琼","藏","陕"],
                    dataArr4:["甘","青","宁","新","台"]
                })
            }else if(this.data.keyType == 'carlicense'){
                this.setData({
                    dataArr1:["1","2","3","4","5","6","7","8","9","0"],
                    dataArr2:["A","B","C","D","E","F","G","H","J","K"],
                    dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
                    dataArr4:["W","X","Y","Z","港","澳","学","领"]
                })
            }
        }
    }
})

到这里组件的基本功能已经完成了,但是当我们点击键盘上的内容的时候,你会发现没有反应,嗯嗯。。。。。这里好像漏了一个东西,既然是键盘肯定是需要得到输入结果的啦。

获取输入内容

要获取键盘输入的内容就需要给键盘的每个按键新增事件来获取输入内容,将之前的结构中新增事件,具体可参见文章第一段代码,具体的实现代码如下:

methods: {
  inputKey(e){
    console.log(e.currentTarget.dataset.value)
  },
  delKey(e){
    console.log(e.currentTarget.dataset.value)
  },
  hideKeyBoard(){
    this.setData({
        isShow:false
    })
  }
}

这里将删除和关闭键盘的时间也添加上了,通过以上两个方法就能获取输入的值了。这时当我们点击某个字符时就会看到控制面板里打印出刚刚选择的值了。

可是我需要不是打印出值啊,是需要将值显示在页面上才行,这里就需要将组建获取到的值传递给调用改组件的页面了,如何传递给调用该组件的页面呢?

组件传参

这里咱们就可以去微信小程序的官方文档看看了,毕竟官方文档是个好东西嘛,找到下图所示的地方:

我们这里用到的就是组件通信的第二点事件,可以传递任意数据的,那么根据官方文档的介绍我相信大家一看就知道怎么使用了,代码如下:

methods: {
  inputKey(e){
    this.triggerEvent('inputword', {type:'input',value:e.currentTarget.dataset.value})
  },
  delKey(e){
    this.triggerEvent('inputword', {type:'del'})
  },
  hideKeyBoard(){
    this.setData({
        isShow:false
    })
    this.triggerEvent('inputword', {type:'blur'})
  }
}

这里呢是将所以的操作都通过一个事件来传递数据,通过增加一个type来区分到底是输入、删除还是关闭键盘。

组件使用

嗯嗯,不容易啊,终于到了使用组件的时候了,这里根据微信组件的用法如下操作:

在页面配置文件中引入组件地址
在页面中添加组件的标签
在添加的标签上面添加需要传递的参数和事件
相关代码如下:

{
  "navigationBarTitleText": "新增车辆",
  "usingComponents": {
    "keyboard":"../../components/keyboard/index"
  }
}

在需要用到改组件的页面的配置文件中加入上面带代码

<view class="bind-car">
    <view class="car-province {{focusProvince?'active':''}}">
        <view bindtap="chooseProvinceCn">{{provinceCn}}</view>
        <view bindtap="chooseProvinceCode">{{provinceCode}}</view>
    </view>
    <view class="car-number {{focusCode?'active':''}}" bindtap="chooseCarCode">{{carCode}}</view>
</view>
<keyboard bindinputword="inputWord" keyType="{{setKeyType}}" isShow="{{showKeyBoard}}"></keyboard>

在使用到的页面中加入上面最后一行的代码,并添加上相信的参数和事件

下一步就是在页面的js中来处理相应的参数和事件,具体代码如下:

Page({
  data: {
    focusProvince:false,
    focusCode:false,
    setKeyType:'province',
    showKeyBoard:false,
    keyIndex:0,
    provinceCn:'',
    provinceCode:'',
    carCode:''
  },
  inputWord(e){
    if(e.detail.type == 'input'){
      if(this.data.keyIndex == 0){
        this.setData({
          provinceCn:e.detail.value
        })
      }else if(this.data.keyIndex == 1){
        this.setData({
          provinceCode:e.detail.value
        })
      }else if(this.data.keyIndex == 2){
        if(this.data.carCode.length < 6){
          this.setData({
            carCode:this.data.carCode + e.detail.value
          })
        }
      }
    }else if(e.detail.type == 'del'){
      if(this.data.carCode){
        this.setData({
          carCode:this.data.carCode.substr(0, this.data.carCode.length - 1)
        })
      }
    }else if(e.detail.type == 'blur'){
      this.setData({
        focusCode:false,
        focusProvince:false
      })
    }
  },
  chooseProvinceCn(){
    this.setData({
      setKeyType:'province',
      showKeyBoard:true,
      keyIndex:0,
      focusProvince:true,
      focusCode:false
    })
  },
  chooseProvinceCode(){
    this.setData({
      setKeyType:'letter',
      showKeyBoard:true,
      keyIndex:1,
      focusProvince:true,
      focusCode:false
    })
  },
  chooseCarCode(){
    this.setData({
      setKeyType:'carlicense',
      showKeyBoard:true,
      keyIndex:2,
      focusCode:true,
      focusProvince:false
    })
  }
})

页面中的inputWord就是我们最终需要处理的事件,另外几个是输入后控制焦点并显示相应的红色方框的开关

测试

这一步就是程序小哥哥小姐姐比较害怕的,测试的小哥哥小姐姐就那咋自己写的代码不停的乱搞一通,哈哈哈,最后骨头里挑刺。这里呢当我们分别选择不同输入的type时会发现键盘的内容没有改变,嗯嗯,原来还是写了个bug给自己啊。

解决键盘类型判断的bug

通过上面自己简单的测试后发现有个bug需要去修复,其实这个问题的点在于每次去显示键盘时传递给组件的keyType有缓存导致的,所以需要再组件中属性声明的地方来个监听变化咯,说干就干,改好了马上下班,代码如下:

Component({
  properties: {
    keyType:{
      type:String,
      value:'letter',
      observer:function(newVal,oldVal){
          this.changeType()
      }
    },
    isShow:{
      type:Boolean,
      value:false
    }
  }
})

在属性中新增observer的监听函数,当有变化的时候就去调用判断类型的函数就可以了。这样就可以愉快的使用。最后打卡,背包走人咯。。。。等等后面还有呢

结束语

目前这个组件也只是为了完成需求而写的,可能实际使用过程中还是会有很多问题的,欢迎大家提出哦。最后放上每个文件完整的代码哦

组件的代码

WXML

<view class="keyboard" wx:if="{{isShow}}">
    <view class="item">
        <view wx:for="{{dataArr1}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item">
        <view wx:for="{{dataArr2}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item">
        <view wx:for="{{dataArr3}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="item" wx:if="{{dataArr4.length}}">
        <view wx:for="{{dataArr4}}" wx:key="unique" bindtap="inputKey" data-value="{{item}}">{{item}}</view>
    </view>
    <view class="delbtn" bindtap="delKey" wx:if="{{keyType == 'carlicense'}}"><image src="./icon_del.png"></image></view>
</view>
<view class="mask" bindtap="hideKeyBoard" wx:if="{{isShow}}"></view>

WXSS

.keyboard {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999;
    width: 100%;
    background: #d1d6d9;
    padding: 20rpx 10rpx 0;
    padding-bottom:calc(30px + env(safe-area-inset-bottom)/2);
    box-sizing: border-box;
}

.keyboard .item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
}

.keyboard .item view {
    width: 9%;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    margin-right: 10rpx;
    background: #ffffff;
    border-radius: 10rpx;
    font-size: 28rpx;
}

.keyboard .item view:last-child {
    margin-right: 0;
}

.keyboard .delbtn {
    position: fixed;
    right: 10rpx;
    bottom: calc(40px + env(safe-area-inset-bottom)/2);
    height: 70rpx;
    width: 18%;
    z-index: 999999;
    background: #adb3bd;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.keyboard .delbtn image{
    width: 60rpx;
    height: 60rpx;
}
.mask{
    position: fixed;
    left: 0;
    top: 113rpx;
    bottom: 0;
    right: 0;
    z-index: 99998;
}

JS

Component({
    properties: {
        keyType:{
            type:String,
            value:'letter',
            observer:function(newVal,oldVal){
                this.changeType()
            }
        },
        isShow:{
            type:Boolean,
            value:false
        }
    },
    data: {
        dataArr1:[],
        dataArr2:[],
        dataArr3:[],
        dataArr4:[]
    },
    attached(){
        this.changeType()
    },
    methods: {
        changeType(){
            if(this.data.keyType == 'letter'){
                this.setData({
                    dataArr1:["Q","W","E","R","T","Y","U","P","N","M"],
                    dataArr2:["A","S","D","F","G","H","J","K","L"],
                    dataArr3:["Z","X","C","V","B"],
                    dataArr4:[]
                })
            }else if(this.data.keyType == 'province'){
                this.setData({
                    dataArr1:["京","沪","粤","津","冀","晋","辽","蒙","黑","吉"],
                    dataArr2:["苏","浙","皖","闽","赣","鲁","豫","鄂","湘"],
                    dataArr3:["川","贵","云","渝","桂","琼","藏","陕"],
                    dataArr4:["甘","青","宁","新","台"]
                })
            }else if(this.data.keyType == 'carlicense'){
                this.setData({
                    dataArr1:["1","2","3","4","5","6","7","8","9","0"],
                    dataArr2:["A","B","C","D","E","F","G","H","J","K"],
                    dataArr3:["L","M","N","P","Q","R","S","T","U","V"],
                    dataArr4:["W","X","Y","Z","港","澳","学","领"]
                })
            }
        },
        inputKey(e){
            this.triggerEvent('inputword', {type:'input',value:e.currentTarget.dataset.value})
        },
        delKey(e){
            this.triggerEvent('inputword', {type:'del'})
        },
        hideKeyBoard(){
            this.setData({
                isShow:false
            })
            this.triggerEvent('inputword', {type:'blur'})
        }
    }
})

使用页面代码

JSON

{
  "navigationBarTitleText": "新增车辆",
  "usingComponents": {
    "keyboard":"../../components/keyboard/index"
  }
}

WXML

<view class="bind-car">
    <view class="car-province {{focusProvince?'active':''}}">
        <view bindtap="chooseProvinceCn">{{provinceCn}}</view>
        <view bindtap="chooseProvinceCode">{{provinceCode}}</view>
    </view>
    <view class="car-number {{focusCode?'active':''}}" bindtap="chooseCarCode">{{carCode}}</view>
</view>
<keyboard bindinputword="inputWord" keyType="{{setKeyType}}" isShow="{{showKeyBoard}}"></keyboard>

WXSS

.bind-car {
    display: flex;
    align-items: center;
    background: #FFFFFF;
    padding: 25rpx 30rpx;
}

.bind-car .car-province {
    margin-right: 30rpx;
    width: 170rpx;
    height: 88rpx;
    border: 1rpx solid #999999;
    border-radius: 4rpx;
    display: flex;
}

.bind-car .car-province view {
    width: 86rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
}

.bind-car .car-province view:first-child {
    position: relative;
}

.bind-car .car-province view:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 1rpx;
    height: 40rpx;
    background: #999999;
    margin-top: -20rpx;
}

.bind-car .car-province.active {
    border-color: #FF5152;
}

.bind-car .car-province.active view:first-child::after {
    background: #E83333;
}

.car-number {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    border: 1rpx solid #999999;
    border-radius: 4rpx;
    font-size: 34rpx;
    font-weight: 500;
    color: #333333;
    text-align: center;
}

.car-number.active {
    border-color: #E83333;
}

JS

Page({
    data: {
        focusProvince:false,
        focusCode:false,
        setKeyType:'province',
        showKeyBoard:false,
        keyIndex:0,
        provinceCn:'',
        provinceCode:'',
        carCode:''
    },
    inputWord(e){
        if(e.detail.type == 'input'){
            if(this.data.keyIndex == 0){
                this.setData({
                    provinceCn:e.detail.value
                })
            }else if(this.data.keyIndex == 1){
                this.setData({
                    provinceCode:e.detail.value
                })
            }else if(this.data.keyIndex == 2){
                if(this.data.carCode.length < 6){
                    this.setData({
                        carCode:this.data.carCode + e.detail.value
                    })
                }
            }
        }else if(e.detail.type == 'del'){
            if(this.data.carCode){
                this.setData({
                    carCode:this.data.carCode.substr(0, this.data.carCode.length - 1)
                })
            }
        }else if(e.detail.type == 'blur'){
            this.setData({
                focusCode:false,
                focusProvince:false
            })
        }
    },
    chooseProvinceCn(){
        this.setData({
            setKeyType:'province',
            showKeyBoard:true,
            keyIndex:0,
            focusProvince:true,
            focusCode:false
        })
    },
    chooseProvinceCode(){
        this.setData({
            setKeyType:'letter',
            showKeyBoard:true,
            keyIndex:1,
            focusProvince:true,
            focusCode:false
        })
    },
    chooseCarCode(){
        this.setData({
            setKeyType:'carlicense',
            showKeyBoard:true,
            keyIndex:2,
            focusCode:true,
            focusProvince:false
        })
    }
})

到此这篇关于微信小程序中实现车牌输入功能的文章就介绍到这了,更多相关微信车牌输入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • 微信小程序使用车牌号输入法的示例代码

    在做小程序时,做了一个关于车的项目,然后需要添加车辆信息.添加车牌号,使用车牌键盘输入,当时我把这个需求给砍了,然后在添加车辆信息时,老大看到数据库里我乱填的车牌号,又让我把他加上了^o^ 1.效果图 2.相关代码使用组件形式实现键盘输入 组件代码index.wxml <view class="carPlate" wx:if="{{show}}"> <block wx:if="{{type==1}}"> <view

  • 微信小程序车牌号码模拟键盘输入功能的实现代码

    先来一波预览图. 预览图片一: 预览图二: 预览图三: 预览图四: 预览图五: 大概的效果就和原来图差不多. 思路解析:车牌号码由31位汉字,26位字母,10位数字组成的,开头第一位由省份简称的汉字,第二位字母根据省份下的城市或地区区分,最后的五位或者六位,是有字母和数字组成的,共有七位的车牌号码和八位的车牌号码,(注:其中的八位数的车牌号码为能源车的车牌号码.) 大概的逻辑思维,不包含代码获取值什么的或者验证其他的说明,详细看代码片段. 第一,原型的设计思路:先设计好模拟键盘的大概架构,样式.

  • 微信小程序中实现车牌输入功能

    目录 前言 背景 大猜想 找规律 结构和样式 组件实现 参数 键盘类型的判断 获取输入内容 组件传参 组件使用 测试 解决键盘类型判断的bug 结束语 组件的代码 使用页面代码 前言 哈哈哈,上新文章啦.好久没有更新啦,今天乘着休息来总结下之前用的到自定义键盘来输入车辆号牌微信组件.下面是效果图,请欣赏: 背景 近期做了一个和车有关的项目,有车肯定就有车牌,我们都知道车牌是有一定规律的,如果简单的给个输入框的话......这里省略一万字哈,从小我的编程老师告诉我不要相信任何用户输入的东西.嗯嗯!

  • 微信小程序中的列表切换功能实例代码详解

    感觉这列表切换有点类似于轮播图,而且感觉这代码直接可以拿来用,稍微改一改样式什么的就OK了,列表切换也是用到的地方也很多 wxml中的代码如下: <!-- 标签页面标题 --> <view class="tab"> <view class="tab-item {{tab==0?'active':''}}" bindtap="changeItem" data-item="0">音乐推荐<

  • 微信小程序中悬浮窗功能的实现代码

    问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

  • 微信小程序中添加客服按钮contact-button功能

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session-from=''>客服-联系我们</button> 2. 悬浮客服按钮添加,图片自定义 大家看地图的有个客服图片图片资源.大家去iconfont 网站去找一个就可以了 index.wxml <button class="kf_button" open-type=&q

  • 微信小程序中使用ECharts 异步加载数据实现图表功能

    具体代码如下所示: <view class="container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas> </view> import * as echarts from '../../ec-canvas/echarts'; var barec = n

  • 微信小程序中的上拉、下拉菜单功能

    问题描述 在使用小程序的时候基本的页面的一般都是很简洁的,所以会有一些菜单来做简单的诠释说明,或者是提供一些选项.这些菜单的弹出方式一般是向上和向下,那么如何来设置这些上下拉的菜单呢? 解决方案 上下拉菜单在微信小程序中起提示.选项的功能,当点击它时会弹出属于这个菜单的相应选项.使用vant组件库,将 dist 文件提前下载好然后保存到项目中.在小程序中调用组件库,并在正确引用就可以实现了菜单功能了. 一.下拉菜单 (1)在 json 中调用 van-tab 组件. "usingComponen

  • 微信小程序中的滑动页面隐藏和显示组件功能的实现代码

    用csdnAPP的用户都知道,在发布blink动态时,那个红色按钮会随着你滚动页面消失或者出现.往上滑动时,按钮消失.往下滑动时,按钮出现. 今天我们就模仿一下这个功能,只不过我们换中样式,让它逐渐滑出页面,或逐渐从页面之外滑到固定位置. 效果图: 滑动前: 滑动后: 此功能是往上滑动消失,往下滑动出现. 实现步骤: 编写页面代码与样式 编写逻辑代码 wxml: <view class="mask-con {{!hidden ? 'mask-con-show' : '' } } sendD

  • 微信小程序使用ucharts在小程序中加入横屏展示功能的全过程

    目录 前言 实现思路 实现步骤 1. 添加一个按钮用来开启横屏模式 2. 准备一个容器 总结 前言 由于手机屏幕宽度的限制,当数据量较大时,观看体验并不是很好,因此横屏展示的功能就显得必要了,还好ucharts官方提供了横屏展示的功能,可以免去自己手改的麻烦,不过在实现的时候还是需要注意一些地方. 本文只贴出了部分关键实现代码而非全部代码,仅提供思路和实现参考. 实现思路 开启横屏显示的配置如下: opts: { rotate: true, } 现在只需要在页面中提供一个按钮作为入口,动态改变o

  • 微信小程序实现即时通信聊天功能的实例代码

    项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html 二.nginx中配置反向代理加密websocket(wss) upstream websocket{ hash $remote_addr consistent; server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30

  • 微信小程序中正确使用地图的方法实例

    目录 前言 1. 准备 2. 实战 2.1 配置小程序权限 2.2 封装工具函数 2.2.1 全局函数与变量 2.2.2 工具函数 2.3 跳转选址页面前的处理 2.4 跳转后的处理 2.4.1 页面初始化 2.4.2 搜索功能实现 2.4.3 下滑到底获取更多 2.4.4 提交数据 2.4.5 切换城市 总结 前言 今天是我的小兄弟(微信小程序方面)在工作中遇到的一个场景--选择某个位置周围的学校,感觉很有用,就让他给大家分享一下. 这次想分享一下关于微信小程序中选择全国中的一个学校和地址的方

随机推荐