小程序开发随笔
【突破一】bindinput和bindblur的选择
配图：
登陆界面一
问题呈现：假如用户名是“字母+数字”组合模式。现在开始描述这个问题是如何存在的啦！！！ 我们在手机键盘输入“a3，虽然在视觉上a3已经被填入到①位置处，但是不点击②的话，使用bindinput事件是获取不到a3的值的。如果需要获取到a3,就需要在输入完a3的时候再点一下②。不过平时有些使用者是不会去注意到要点一下②的。所以在点击“立即登录”的时候会报用户名不能为空。那么如何解决这个问题呢？
因为考虑到输入用户名之后接着会输入密码，验证码，所以使用bindblur即可以解决获取不到“字母+数字”组合的用户名的问题。
不过，如果用户名是“纯数字"。使用bindblur也会出现问题！现在就开始描述这个问题是如何存在的啦！！假如用户名是“13”，结果被输入"133"，然后输入密码和验证码！点击登陆，弹出了”用户名不正确“，然后将“133”改为“13”后再点击登陆，然后发现总是提示“用户名不正确”。这是为什么呢？后来我使用console.log()将其打印出来，发现用户名并没有被改成“13”，还是“133"这是为什么呢？原来一个文本输入框的blur要生效，必须要让这个文本输入框的focus先失效，要然后这个文本输入框的focus失效的话，就必须要有另有一个文本输入框来获取focus。到这里为什么会出现这个问题就非常清楚了。因为更改了文本输入框，接下来的动作不是作用在下一个文本输入框，而是作用在button按钮（即“立即登陆”按钮），所以focus还没失效，所以文本值”133“并未改为“13”。那么这个时候就只能用bindinput来随时获取文本的值的改变了。
综合起来，如果两个问题都不会出现，就必须同时写上，然后绑定同一个函数。
以下是我的代码：
<input placeholder="请输入用户名" bindblur="userNameInput" bindinput="userNameInput" />
【突破二】如何让密码输入框的手机键盘模式都是纯数字模式？
问题呈现：
<input type="number" placeholder="请输入密码" />
小程序里组件input的type类型有四种：
text文本输入键盘（type不指定任何类型时，就默认为text）
number数字输入键盘
idcard身份证输入键盘
digit带小数点的数字键盘
这里，如果type="number",虽然手机键盘是纯数字键盘。但是输入的密码确实明文的。现在要实现“手机键盘是纯数字且密码输入后是加密的”该如何实现呢？
其实这样写就够了：
<input password type="number" placeholder="请输入密码" maxlength="6" />
【突破三】下拉刷新上拉加载更多的误区
配图：
上拉加载更多
下拉刷新
目前微信小程序官网api提供了组件scroll-view，该组件有bindscrolltoupper滚动到顶部/左边，会触发 scrolltoupper 事件，和bindscrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件，bindscroll还有滚动时候触发。显然不适合需求呀！好了那我们就要另辟蹊径了。
现在直接用另外一套api:
onPullDownRefresh下拉刷新
onReachBottom上拉加载更多
onPageScroll滚动条滚动
【突破四】使用swiper组件如何控制好各种尺寸的图片的显示？
通常swiper是内套swiper-item来使用的，以下是我的代码：
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item}}" data-index="{{index}}" bindload="imageLoadSwitch" style="width:{{imageLoadSwitch[index].width}}px;height:{{imageLoadSwitch[index].height}}px;"/> </swiper-item> </block> </swiper>
规则：等待图片显示出来，我们再通过bindload来重新适配图片大小。
以下是我的个人代码：
//图片等比例显示(轮播) imageLoadSwitch: function(e) { let that = this; let $width = e.detail.width, //获取图片真实宽度 $height = e.detail.height, //获取图片真实高度 ratio = $width / $height; //将图片的datadata-index作为image对象的key,然后存储图片的宽高值 let image = this.data.imageLoadSwitch; image[e.target.dataset.index] = { width: wx.getSystemInfoSync ().windowWidth * 3 / 4 * ratio, height: wx.getSystemInfoSync().windowWidth * 3 / 4, } this.setData({ imageLoadSwitch: image }) }
分析：
-
图片在swiper-item加载完毕之后我们就可以获取图片的真正宽高，算出宽高比例大小ratio
2. 然后通过系统提供的api wx.getSystemInfo ().windowWidth获取屏幕宽度 :
let $width=wx.getSystemInfoSync().windowWidth
以宽高比例 4:3算出高度:
let $height=wx.getSystemInfoSync ().windowWidth * 3 / 4
3. 根据比例算出图片在手机屏幕上的显示的宽高是多少:
注意：
当缩放后的宽度 超过屏幕宽度,则将图片以屏幕的宽度为准，等比例缩放
let imgWidth=$width let imgHiehgt=$width* 3 / 4
当缩放后的宽度 超过屏幕高度,则将图片以屏幕的高度为准，等比例缩放
let imgWidth=$height * 3 / 4
let imgHiehgt=$height
【突破五】如何设置多项选择器框的大小
采用：transform:scale(0.65);
【突破六】微信小程序点击移除添加class
先上几张图：
实现思路：通过下标来匹配选中的是哪一家银行
wxml代码
<view class="sel-accttype-list-body-item {{index==accttypeTarget?'accttypeHover':''}}" data-index="{{index}}"bindtap='accttypeClickFun' wx:for="{{accttype}}" wx:for-item="item" > <image src="{{item.icon}}"></image> <text>{{item.text}}</text> </view>
js代码
函数：
【突破七】微信小程序如何使用文字图标
个人以前需要什么类型的图标都会去阿里巴巴矢量图库（Iconfont-阿里巴巴矢量图标库）下载.png图片直接放在项目。如果在小程序需要这个图标，但是要以样式的形式来显示出来。可以使用以下方法：
第一步：登录
Iconfont-阿里巴巴矢量图标库www.iconfont.cn
第二步：假如你要微信图标，那就搜索微信图标
第三步：加入购物车
第四步：打开购物车
第五步：解压并打开iconfont.css文件
第六步：将iconfont.css里面的样式全部拷贝到自己的wxss样式文件里面
第七步：在wxml标签里面，用 class引用
【突破八】wx.navigateTo wx.redirectTo wx.switchTab跳转页面传递参数
-
传递单个参数或者多个参数，可以直接接在地址后面，例如：
wx.navigateTo({ url: '../payMessage/payMessage?orderid=' + res.data.msg + "&acctno=" + that.data.acctno + "&moblie=" + that.data.moblie, })
2.传递json对象的时候必须在传递端，格式化为JSON.stringify格式（对象、数组转换成字符串），在接收端用JSON.parse（转JSON对象），例如：
转字符串
转JSON对象