小程序开发随笔

红太狼 2022-05-13 11:22 502阅读 0赞

【突破一】bindinput和bindblur的选择

配图：

![v2-d9d65f6a43a1b79068aba61f7bb9f03a_b.jpg][]

登陆界面一

问题呈现：假如用户名是“字母+数字”组合模式。现在开始描述这个问题是如何存在的啦！！！ 我们在手机键盘输入“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的type类型有四种：

text文本输入键盘（type不指定任何类型时，就默认为text）

number数字输入键盘

idcard身份证输入键盘

digit带小数点的数字键盘

这里，如果type="number",虽然手机键盘是纯数字键盘。但是输入的密码确实明文的。现在要实现“手机键盘是纯数字且密码输入后是加密的”该如何实现呢？

其实这样写就够了：

![v2-7e43d4b3bfcb516e099b41855670f3ff_b.jpg][]

【突破三】下拉刷新上拉加载更多的误区

配图：

![v2-7749fb30d83ea951d01197044da9b1ba_b.jpg][]

上拉加载更多

![v2-3127a562dba07e32c805ed0910d39a1b_b.jpg][]

下拉刷新

目前微信小程序官网api提供了组件scroll-view，该组件有bindscrolltoupper滚动到顶部/左边，会触发 scrolltoupper 事件，和bindscrolltolowerEventHandle滚动到底部/右边，会触发 scrolltolower 事件，bindscroll还有滚动时候触发。显然不适合需求呀！好了那我们就要另辟蹊径了。

现在直接用另外一套api:

onPullDownRefresh下拉刷新

onReachBottom上拉加载更多

onPageScroll滚动条滚动

【突破四】使用swiper组件如何控制好各种尺寸的图片的显示？

通常swiper是内套swiper-item来使用的，以下是我的代码：

规则：等待图片显示出来，我们再通过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 \}) \}

分析：

1.  图片在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);

![v2-41b79e73ac3a21f6552f4889aa2f3513_b.jpg][]

【突破六】微信小程序点击移除添加class

先上几张图：

![v2-69f338fcdbfd87248c93e1491174ea7e_b.jpg][]

![v2-59991d008685a25b73696b1f791c8476_b.jpg][]

实现思路：通过下标来匹配选中的是哪一家银行

wxml代码

js代码

![v2-4dbc5ac5eac51335b4a43da4194624fc_b.jpg][]

函数：

![v2-0cbb07a8836e369505d71ab38fdebf28_b.jpg][]

【突破七】微信小程序如何使用文字图标

个人以前需要什么类型的图标都会去阿里巴巴矢量图库（[Iconfont-阿里巴巴矢量图标库][Iconfont-]）下载.png图片直接放在项目。如果在小程序需要这个图标，但是要以样式的形式来显示出来。可以使用以下方法：

第一步：登录

Iconfont-阿里巴巴矢量图标库www.iconfont.cn

第二步：假如你要微信图标，那就搜索微信图标

![v2-e4aa4f988bee387885715041380ab052_b.jpg][]

第三步：加入购物车

![v2-1568dbeb6d70f19014af924301074ae9_b.jpg][]

第四步：打开购物车

![v2-bc68a98501ec1b8a73a9b893959baea3_b.jpg][]

![v2-9a0e6367f25e1bc3895cf7ee20f6cbb6_b.jpg][]

第五步：解压并打开iconfont.css文件

![v2-1e77c7ec71c7d4e3dc1e9cc034aebf02_b.jpg][]

第六步：将iconfont.css里面的样式全部拷贝到自己的wxss样式文件里面

![v2-61222770744cec7f14a13424f7d0f6a7_b.jpg][]

第七步：在wxml标签里面，用 class引用

![v2-8aaeadddba8f2ab69fa32e297f672ccc_b.jpg][]

![v2-06cd90afe22985c2c9980598c1114298_b.jpg][]

【突破八】[wx.navigateTo][] [wx.redirectTo][] [wx.switchTab][]跳转页面传递参数

1.  传递单个参数或者多个参数，可以直接接在地址后面，例如：

wx.navigateTo(\{ url: '../payMessage/payMessage?orderid=' + res.data.msg + "&acctno=" + that.data.acctno + "&moblie=" + that.data.moblie, \})

2.传递json对象的时候必须在传递端，格式化为JSON.stringify格式（对象、数组转换成字符串），在接收端用JSON.parse（转JSON对象），例如：

![v2-8f3093a07023c6738de5360cde59701c_b.jpg][]

转字符串

![v2-2e72cda7d1aa9c3a3b96063fae8e1c7e_b.jpg][]

转JSON对象

[v2-d9d65f6a43a1b79068aba61f7bb9f03a_b.jpg]: /images/20220513/0fc503659828428fa8d54096b1614fdd.png
[v2-7e43d4b3bfcb516e099b41855670f3ff_b.jpg]: /images/20220513/f93fc3a6705042fc9e7e1b669d09fb74.png
[v2-7749fb30d83ea951d01197044da9b1ba_b.jpg]: /images/20220513/3451d67b50f14cebab163ea56d436d9b.png
[v2-3127a562dba07e32c805ed0910d39a1b_b.jpg]: /images/20220513/f7ece5c140aa47ea987fac3a92c48b95.png
[v2-41b79e73ac3a21f6552f4889aa2f3513_b.jpg]: /images/20220513/50618643c5e14dfcb69ff2e233c106e6.png
[v2-69f338fcdbfd87248c93e1491174ea7e_b.jpg]: /images/20220513/4d35ceb7892946a899604ead59f8b02d.png
[v2-59991d008685a25b73696b1f791c8476_b.jpg]: /images/20220513/d4bc00ed5f5847979a901af6b0dce237.png
[v2-4dbc5ac5eac51335b4a43da4194624fc_b.jpg]: /images/20220513/9a87319970f34b83bc92f8cf2025163d.png
[v2-0cbb07a8836e369505d71ab38fdebf28_b.jpg]: /images/20220513/42264e9180e04699b88da11b24f52adf.png
[Iconfont-]: http://www.iconfont.cn/
[v2-e4aa4f988bee387885715041380ab052_b.jpg]: /images/20220513/851c486d82504f9399881da868fa1555.png
[v2-1568dbeb6d70f19014af924301074ae9_b.jpg]: /images/20220513/48892cc2c15a4e5cafdd64898cd5857e.png
[v2-bc68a98501ec1b8a73a9b893959baea3_b.jpg]: /images/20220513/a88ca009ec654a95957321678a31d784.png
[v2-9a0e6367f25e1bc3895cf7ee20f6cbb6_b.jpg]: /images/20220513/860ad2ecd396403e9cbb14b9ed454448.png
[v2-1e77c7ec71c7d4e3dc1e9cc034aebf02_b.jpg]: /images/20220513/0b2b3a06f7414b798d13e29a4bab48e6.png
[v2-61222770744cec7f14a13424f7d0f6a7_b.jpg]: /images/20220513/31843e266afe40c9a5744c4355687ed7.png
[v2-8aaeadddba8f2ab69fa32e297f672ccc_b.jpg]: /images/20220513/4212b24f91924d518836649bfab1c1dc.png
[v2-06cd90afe22985c2c9980598c1114298_b.jpg]: /images/20220513/28d890610e5547aab4f7e93a985b6e11.png
[wx.navigateTo]: https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html#wxnavigatetoobject
[wx.redirectTo]: https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html#wxredirecttoobject
[wx.switchTab]: https://developers.weixin.qq.com/miniprogram/dev/api/ui-navigate.html#wxswitchtabobject
[v2-8f3093a07023c6738de5360cde59701c_b.jpg]: /images/20220513/00c68bdf0bf447289f58e20837a4a890.png
[v2-2e72cda7d1aa9c3a3b96063fae8e1c7e_b.jpg]: /images/20220513/f80dac213d0a4ec1a88da8b325d33889.png