Null's Blog

微信小程序笔记1--每日看腿

talk is cheap

TorridArtWX(主程序)
TorridArtApi(服务端)
图片侵删

预览

效果

功能

1.列表

了解css3的同学,简直就没有难度.
1.结构简单, 需要一个scroll-view作为滚动视图,使用这个是为了它自带的下拉刷新与上拉更多,小程序在这里封装的很简单,直接绑定相应的事件即可实现一个基本的列表功能.
2.scroll-view下使用一个大的view来作为列表,使用css3中的flex实现两列布局.
3.最内层vciew包裹image使用小程序提供的for循环功能渲染并绑定给image绑定相应的点击事件.

1
2
3
4
5
6
7
8
9
10
<!--index.wxml-->
<view class="container">
<scroll-view class="container_wrap" scroll-y="true" bindscrolltoupper="upper" bindscrolltolower="lower">
<view class="listview">
<view class="thumbnail" wx:for="{{collections}}">
<image mode="scaleToFill" src="{{collections[index].thumbnail}}" bindtap="previewImage"></image>
</view>
</view>
</scroll-view>
</view>

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
/**index.wxss**/
.container_wrap{
height: 100%;
background:#0b0c07;
}
.container_wrap .listview{
display: flex;
flex-direction: row;
flex-wrap:wrap;
width: 100%;
height: 200%;
justify-content: space-around;
box-sizing: border-box;
background:#0b0c07;
}
.thumbnail {
width: 330rpx;
height: 400rpx;
margin: 5rpx 0;
}
.thumbnail image{
width: 100%;
height: 100%;
border-radius: 2%;
}

2.下拉刷新上拉更多

1.为scroll-view 绑定bindscrolltoupper事件,实现下拉刷行功能,页码参数使用1,默认第1页
2.为scroll-view 绑定bindscrolltolower事件,实现上拉更多功能,在当前页面上加1实现加载下一页的功能.
3.最终的加载下一页数据方法getCollections加个判断,非第一页则使用之前的值concat新的值(默认一页12个),结果通过setData保存,setData触发页面重绘,相对于重绘前则是增加了一页.
4.如果加载的是第1页(onLoad或刷新),则直接setData第1页的返回值.

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
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
collections : [],
pageIndex:1
},
onLoad: function () {
console.log('onLoad');
var self = this;
self.getCollections(1);
},
getCollections:function(pageIndex){
var self = this;
var page = pageIndex || 1;
console.log('load:http://localhost:3001/page/'+page);
wx.request({
url: 'http://localhost:3001/page/'+page,
header: {
'Content-Type': 'application/json'
},
success: function(result) {
//console.log(result.data.collections);
if(page === 1){
self.setData({
pageIndex:page,
collections:result.data.collections
});
}else{
self.setData({
pageIndex:page,
collections:self.data.collections.concat(result.data.collections)
});
}
}
});
},
upper: function(){
var self = this;
console.log('pullDownRefresh');
self.getCollections(1);
},
lower:function(){
var self = this;
var page = self.data.pageIndex + 1;
console.log('loadpage:'+page);
self.getCollections(page);
},
previewImage:function(e){
var self = this;
var current = e.target.dataset.src;
var urls = [];
for(var i=0;i<self.data.collections.length;i++){
urls.push(self.data.collections[i].preview);
}
console.log(urls)
wx.previewImage({
current: current,
urls: urls
});
}
})

3.看大图

image上绑定bindtap事件,目前调试工具并不支持,本人也没有内测资格,但API应该是这个

1
2
3
4
5
6
7
8
9
10
11
12
13
previewImage:function(e){
var self = this;
var current = e.target.dataset.src;
var urls = [];
for(var i=0;i<self.data.collections.length;i++){
urls.push(self.data.collections[i].preview);
}
console.log(urls)
wx.previewImage({
current: current,
urls: urls
});
}

与RN比较

1.整体上比RN简单,也许是内测的原因,并没有引入redux这种所谓的数据流(或许根本就不需要?)
2.对wxss(样式)持中立态度,简单,并与css样式表相差不大.
3.应用场景个人仁者见仁吧.

参考资料

官方文档