值得记录的 (三) - 小程序开发中遇到的一些要点

近两周真实上手了小程序,值得记录的第三篇。记录在项目开发的过程中的一些注意点。

函数防抖

使用函数节流实现防止用户多次快速点击后触发事件。

1
2
3
4
5
6
7
8
9
10
// 多次点击节流防抖
function debounce(func, wait = 500) {
let timeout;
return function (event) {
clearTimeout(timeout);
timeout = setTimeout(() => {
func.call(this, event)
}, wait);
};
}


短信验证码

WXML

三元运算符用来给获取验证码之后的倒计时添加选择器,方便修改它的字体颜色样式(#AAA 呈现一种不可点击的样式)。


JS

验证码倒计时模块

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
var util = require('../../../utils/util.js');
var debounce = util.debounce; // 多次点击节流防抖 从 util.js 引入

Page({

data: {
// 手机验证码
phone_number: '', // 手机号
phone_code_text: '获取验证码', // 按钮提示信息
phone_code: '', // 验证码
status: true,
},


// 手机输入
bindnumbervalue(event){
this.setData({
phone_number: event.detail.value
})
},

// 验证码功能
bindcodevalue(event){
this.setData({
phone_code: event.detail.value
})
},

// 点击获取验证码
verification: debounce(function(e){
// 只限判断手机长度
if((this.data.phone_number).length !== 11){
wx.showToast({
title: '请输入正确的手机号',
icon: 'none'
})
return
}

// 按钮是否可点击状态
if (this.data.status === false) {
console.log('请稍后重新获取验证码')
wx.showToast({
title: '请稍后重新获取验证码',
icon: 'none'
})
return
}
var _this = this
wx.showLoading({
title: '加载中',
})
wx.login({
success: function (res) {
let code = res.code
let phone = _this.data.phone_number
// 调用api接口, 传递 code 与 phone 参数, 返回 code 0 成功
req.Ajax('/api', 'post', { code, phone }, true).then(res => {
wx.hideLoading()
if(res.code == 0){
wx.showToast({
title: '发送验证码成功',
icon: 'none'
})
// 发送验证码 修改获取验证码按钮显示
var code_number = 60 // 定义 60 秒的倒计时
var code_value = setInterval(function () {
_this.setData({
phone_code_text: '重新获取' + (--code_number) + ' s',
status: false
})
if (code_number == 0) {
clearInterval(code_value)
_this.setData({
phone_code_text: '获取验证码',
status: true,
})
}
}, 1000)
} else {
wx.showToast({
title: res.msg,
icon: 'none'
})
}
})
}
})
}),

})


wx-if

wx-if 结合 new Date() 实现条件渲染

双 11 活动信息弹窗广告倒计时 background,通过 wx-if 结合 new Date() 实现格式化实现最后三天自行判断。省去了双 11 期间重新修改代码上传版本的不必要操作。并且在活动最后一天自动消失,之后再删除冗余代码重新迭代版本即可。

1
2
3
4
5
6
7
8
9
10
11
onLoad: function () {
var timeDay = new Date().getDate();
var timeMonth = new Date().getMonth()
var timeYear = new Date().getFullYear();

this.setData({
timeDay: timeDay,
timeMonth: timeMonth + 1,
timeYear: timeYear,
});
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!-- 活动时间 -->
<view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 9}}" class="newBg" hidden="{{hiddenName}}">
<image src='https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-3.png'></image>
<view class="close" catchtap='closeBg'>关闭 {{sec}}</view>
</view>

<view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 10}}" class="newBg" hidden="{{hiddenName}}">
<image src='https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-2.png'></image>
<view class="close" catchtap='closeBg'>关闭 {{sec}}</view>
</view>

<view wx-if="{{timeYear === 2018 && timeMonth === 11 && timeDay === 11}}">
<image src='https://xxx-xxxxxx.cos.ap-chengdu.myqcloud.com/11bg-1.png'></image>
<view class="close" catchtap='closeBg'>关闭 {{sec}}</view>
</view>


物流信息模块

一个关于小程序会员中心礼品邮寄查询的物流信息模块,不包含 ajax 请求数据的部分,只含有 WXMLWXSS 部分。

WXML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<view class="status">
<image class="bg" src="/pages/img/msg_logstics_bg_img.png"></image>
<view class="status_info">{{stauts}}</view>
<view class="status_time">{{updata}}</view>
</view>

<view class="log_simple">
<image class="icon" src="/pages/img/msg_logstics_icon_airplane.png"></image>
<view class="log_info">
<view class="log_company">物流公司:
<text>{{company}}</text>
</view>
<view class="log_number">物流单号:
<text>{{number}}</text>
</view>
</view>
</view>

<view class="detail">
<view class="detail_list" wx:for="{{list}}" wx:key="{{item}}">
<view class="icon_point {{item.id == 0 ? 'in': 'on' }}"></view>
<view class="info">
<view class="message {{item.id == 0 ? 'last_new':'on_the_way' }}">{{item.name}}</view>
<view class="time {{item.id == 0 ? 'last_new':'on_the_way' }}">{{item.date}}</view>
</view>
</view>
</view>


JS

由于接口问题,没有写 ajax,先自己在 JS 中的 data 造的假数据模拟 wx:for 模板渲染。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
Page({

/**
* 页面的初始数据
*/
data: {
stauts: "已签收",
updata: "10月31日签收",
company: '关都快递',
number: '75123123123',
list: [{
id: 0,
name: "皮卡丘 在 真新镇 进行 配送成功反馈审核通过 ,备注 道馆,反馈端:APP",
date: "2018-10-31 11:52:41"
}, {
id: 1,
name: "皮卡丘 在 真新镇 进行 配送成功反馈 ,备注 道馆,反馈端:APP",
date: "2018-10-29 14:03"
}, {
id: 2,
name: "小红龙 在 真新镇 进行 到站扫描",
date: "2018-10-28 14:03"
}, {
id: 3,
name: "胖丁 在 常磐市 进行 CP揽收 ,备注cp交接",
date: "2018-10-27 14:03"
}, {
id: 4,
name: "铁甲暴龙 在 常磐市 进行 分拨",
date: "2018-10-26 14:03"
}]
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
console.log(this.data.list)
},

})


WXSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
/* pages/member_logdetail/member_logodetail.wxss */
page {
background: #F3F3F3;
}

.status {
width: 698rpx;
height: 150rpx;
margin: auto;
margin-top: 14rpx;
}

.status .bg {
width: 100%;
height: 100%;
}

.status .status_info {
position: absolute;
top: 50rpx;
left: 55rpx;
color: #FFF;
font-size: 32rpx;
}

.status .status_time {
position: absolute;
top: 100rpx;
left: 55rpx;
color: #FFF;
font-size: 26rpx;
}


.log_simple {
background: #FFF;
box-shadow: 0 3rpx 15rpx 0 rgba(68,69,80,0.11);
border-radius: 10rpx;
width: 698rpx;
height: 150rpx;
margin: auto;
margin-top: 18rpx;
display: flex;

}

.log_simple .icon {
width: 80rpx;
height: 80rpx;
margin: 30rpx;
}

.log_simple .log_info {
margin-top: 30rpx;
}

.log_simple .log_info .log_company {
margin-bottom: 10rpx;
color: #ABABAB;
}

.log_simple .log_info .log_number {
color: #ABABAB;
}

.log_simple .log_info .log_company text,
.log_simple .log_info .log_number text{
color: #333;
}

.detail {
width: 698rpx;
background: #FFF;
margin: 0 auto;
margin-top: 20rpx;
box-shadow: 0 3rpx 15rpx 0 rgba(68,69,80,0.11);
border-radius: 10rpx;
}

.detail_list {
display: flex;
}

.detail_list:last-child {
padding-bottom: 30rpx;
}

.detail_list .info .message {
width: 553rpx;
margin-top: 45rpx;
margin-left: 20rpx;
font-size: 26rpx;
}

.detail_list .info .time {
width: 553rpx;
margin-top: 30rpx;
margin-left: 20rpx;
font-size: 24rpx;
}

.icon_point {
width: 22rpx;
height: 22rpx;
background: #019CFF;
border-radius: 50%;
display: flex;
position: relative;
top: 50rpx;
margin:0rpx 20rpx 0rpx 40rpx;
}

.on {
background: #CCC;
}

.last_new {
color: #61A3FE;
}

.on_the_way {
color: #888;
}

.in{
border: 1rpx solid #A0D2FF;
animation: my_animation 2s infinite;
}
@keyframes my_animation{
100% {
transform: scale(2);
background-color: #A0D2FF;
}
}
本文结束  感谢您的阅读
0%