🐰微信小程序
Swiper组件
文档=>swiper组件
1、swiper-item 只能放在swiper组件中,宽高自动100%。
2、组件的属性 文档写的很清晰，本次主要使用
- previous-margin 前边距
- next-margin 后边距
- current 当前滑块的index
- interval 自动切换时间间隔
- bindchange current改变时触发change事件
3、凡是用css写的组件什么的，在样式上都可以进行覆盖
这是本次的一个经验收获与积累。
在实现轮播图样式时，样式上一直存在问题 没有完全还原设计稿。结果发现是由于 实际宽度超出容器宽度，
最后解决方法，通过仔细计算，直接控制组件以及子组件的宽度，之前都是使用width：100%。终于没问题了！
事件对象
文档=>事件
在组件中绑定一个事件处理函数，参数常用event/e
当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。
e.currentTarget 事件绑定的当前组件
e.target 触发事件的源组件
e.currentTarget.dataset 类型Object，当前组件上由data-开头的自定义属性组成的集合
e.detail 自定义事件所携带的数据。
TODO: 对于e的使用，还不够熟悉，在微信开发工具中，可以通过打断点 来查看与之对应的参数的详细信息。
模板消息
文档=>模板消息
发送模板消息sendTemplateMessage
access_token 接口调用凭证
formid 所需发送的模板消息的id
1
2
3
| 注意：
1、由于 formId只能由用户触发表单提交操作产生
2、在开发者工具中测试，得到的formId值为the formId is a mock one.在真机测试可以得到。
|
page 点击模板消息后的跳转页面，仅限本小程序内的页面
data 模板内容
🐲CSS相关
banner轮播图
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| <view class="wrap" wx:if="{{dataObj.is_show_banner_img === '1'}}">
<swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{autoplay}}"
previous-margin="19rpx" next-margin="19rpx" current="{{currentSwiper}}" bindchange="swiperChange">
<block wx:for="{{bannerList}}" wx:key="{{index}}">
<swiper-item>
<image src="{{item.banner_img_url}}" @tap="linkTo({{item.banner_img_jump_link}})"/>
</swiper-item>
</block>
</swiper>
<view class="dots">
<block wx:for="{{bannerList}}" wx:key="{{index}}">
<view class="dot {{index == currentSwiper ? ' active' : ''}}"></view>
</block>
</view>
</view>
|
之前版本banner是单独一张图片，本次改为轮播图。
相对而言，在小程序中实现轮播图不算困难，因为官方提供了swiper组件.
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
| .wrap{
background: #fff;
width: 100%;
swiper {
width: 750rpx;
height: 300rpx;
padding-top: 20rpx;
}
swiper swiper-item {
width: 696rpx !important;
margin-left: 16rpx !important;
}
swiper image {
width: 680rpx;
height: 300rpx;
border-radius: 10rpx;
}
.dots{
display: flex;
flex-direction: row;
justify-content: center;
padding-top: 16rpx;
padding-bottom: 12rpx;
}
/*未选中时的小圆点样式 */
.dot{
width: 16rpx;
margin-right: 16rpx;
border:4px solid #CCCCCC;
border-radius: 50rpx;
}
/*选中以后的小圆点样式 */
.active{
width:16px;
border:4px solid rgba(49,212,218,1);
}
}
|
因为UI的是设计图中面板指示点 和 默认提供的不同，所以 自己对指示点进行重新加工实现。
🐍Tips
1、变量或方法的命名尽量不要根据位置，颜色，而是根据用途和命名,除非是大家都了解的东西，比如header, footer
2、尽量使用数据each,map,fiter,reduce等方法简化代码
3、返回是true/false的变量或者方法使用is开头，如isEmpty
4、使用if(array.length)代替if(array.length > 0)
5、每个页面组件尽量有一个initData的方法做统一的数据预载
Last
1、一定要细心！细心！细心！
2、保持学习状态，要学的还有很多很多！！！
3、转眼四个月，请你继续加油鸭~