微信小程序之试手豆瓣图书API,微信小程序开发之带搜索记录的搜索框

Wechat小程序支付07-列表页面怎么做

2018/08/10 · 底蕴技艺 · 小程序

原作出处: 叶小钗   

接上文: Wechat小程序支付06-三个业务页面包车型地铁姣好

github地址:

作者们首页成效为主形成,作者相比了下实际专业中的必要,达成度有十分之九之上,若是再花意气风发二日时间,便能跟以前职业做的几近了,前几日我们三番一次达成一个页面列表,便甘休这一次的就学,后边几天要出差,所以总括性的稿子本周不见得能出来,独自等待上周吗。

这里考虑demo复杂度,列表页作用完结度也独有完成主功用模块,与真诚专门的工作完毕度相比较三分一左右吗,于是大家开头钟爱的代码,首先是将大家的页面样式达成:

<view class="page-wrapper "> <view class="bus-list js_bus_list "> <view data-supplierid="100020" data-key="" class="bus-list-item "> <view class="bus-time"> 08:25</view> <view class="tobooking"> 预约 </view> <view class="detail"> <view class="detail1"> <view class="start"> <text class="icon-circle s-icon1"></text>斯特拉斯堡市南城小车客运站</view> <view class="end"> <text class="icon-circle s-icon2"></text>连州</view> </view> <view class="tags"> <view> <text class="price">¥135</text> </view> <view> <text class="countleft">10张</text> </view> <view> <text class="b-tags js_tags"></text> </view> </view> </view> </view> </view> <view class="bus-list js_bus_list "> <view data-supplierid="100020" data-key="" class="bus-list-item "> <view class="bus-time"> 08:25</view> <view class="tobooking"> 预定 </view> <view class="detail"> <view class="detail1"> <view class="start"> <text class="icon-circle s-icon1"></text>巴尔的摩市南城小车客运站</view> <view class="end"> <text class="icon-circle s-icon2"></text>连州</view> </view> <view class="tags"> <view> <text class="price">¥135</text> </view> <view> <text class="countleft">10张</text> </view> <view> <text class="b-tags js_tags"></text> </view> </view> </view> </view> </view> <view class="bus-list js_bus_list "> <view data-supplierid="100020" data-key="" class="bus-list-item "> <view class="bus-time"> 08:25</view> <view class="tobooking"> 预约 </view> <view class="detail"> <view class="detail1"> <view class="start"> <text class="icon-circle s-icon1"></text>广州市南城汽车旅客运输站</view> <view class="end"> <text class="icon-circle s-icon2"></text>连州</view> </view> <view class="tags"> <view> <text class="price">¥135</text> </view> <view> <text class="countleft">10张</text> </view> <view> <text class="b-tags js_tags"></text> </view> </view> </view> </view> </view> <include src="../mod/calendar.wxml" /> <include src="../../utils/abstract-page.wxml" /> </view>

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
<view class="page-wrapper ">
  <view class="bus-list js_bus_list ">
    <view data-supplierid="100020" data-key="" class="bus-list-item  ">
      <view class="bus-time"> 08:25</view>
      <view class="tobooking"> 预订 </view>
      <view class="detail">
        <view class="detail1">
          <view class="start">
            <text class="icon-circle s-icon1"></text>东莞市南城汽车客运站</view>
          <view class="end">
            <text class="icon-circle s-icon2"></text>连州</view>
        </view>
        <view class="tags">
          <view>
            <text class="price">¥135</text>
          </view>
          <view>
            <text class="countleft">10张</text>
          </view>
          <view>
            <text class="b-tags js_tags"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
 
  <view class="bus-list js_bus_list ">
    <view data-supplierid="100020" data-key="" class="bus-list-item  ">
      <view class="bus-time"> 08:25</view>
      <view class="tobooking"> 预订 </view>
      <view class="detail">
        <view class="detail1">
          <view class="start">
            <text class="icon-circle s-icon1"></text>东莞市南城汽车客运站</view>
          <view class="end">
            <text class="icon-circle s-icon2"></text>连州</view>
        </view>
        <view class="tags">
          <view>
            <text class="price">¥135</text>
          </view>
          <view>
            <text class="countleft">10张</text>
          </view>
          <view>
            <text class="b-tags js_tags"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
  <view class="bus-list js_bus_list ">
    <view data-supplierid="100020" data-key="" class="bus-list-item  ">
      <view class="bus-time"> 08:25</view>
      <view class="tobooking"> 预订 </view>
      <view class="detail">
        <view class="detail1">
          <view class="start">
            <text class="icon-circle s-icon1"></text>东莞市南城汽车客运站</view>
          <view class="end">
            <text class="icon-circle s-icon2"></text>连州</view>
        </view>
        <view class="tags">
          <view>
            <text class="price">¥135</text>
          </view>
          <view>
            <text class="countleft">10张</text>
          </view>
          <view>
            <text class="b-tags js_tags"></text>
          </view>
        </view>
      </view>
    </view>
  </view>
 
  <include src="../mod/calendar.wxml" />
  <include src="../../utils/abstract-page.wxml" />
 
</view>

CSS

.page-wrapper { margin: 0; font-size: 28rpx; line-height: 1.5; color: #333; background-color: #efefef; overflow-x: hidden; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: transparent; min-height:2000rpx; } .bus-list .bus-list-item { position: relative; height: 160rpx; background-color: #fff; margin: 16rpx 0; border: 2rpx solid #e5e5e5; border-width: 2rpx 0; } .bus-list .bus-list-item::before,.bus-list .bus-list-item::after { position: absolute; left: 122rpx; content: ''; width: 24rpx; height: 12rpx; background-color: #efefef; border: 2rpx solid #e5e5e5; } .bus-list .bus-list-item::before { border-radius: 0 0 60rpx 60rpx; border-top: none; top: -2rpx; } .bus-list .bus-list-item::after { border-radius: 60rpx 60rpx 0 0; border-bottom: none; bottom: -2rpx; } .bus-list .bus-list-item .bus-time { position: absolute; left: 0; width: 134rpx; height: 100rpx; line-height: 100rpx; margin: 30rpx 0; color: #00b358; text-align: center; font-size: 40rpx; font-family: Arial; border-right: 2rpx dashed #e5e5e5; } .bus-list .bus-list-item .tobooking { background-color: #00B358; position: absolute; right: 0; width: 120rpx; height: 160rpx; line-height: 160rpx; text-align: center; color: #fff; font-size: 30rpx; } .bus-list .bus-list-item.disabled .tobooking { background-color: #c5c5c5; } .bus-list .bus-list-item .detail { height: 80rpx; padding: 36rpx 0; margin: 0 140rpx 0 144rpx; } .bus-list .bus-list-item .detail .sub-list{ height: 52rpx; } .bus-list .bus-list-item .start, .bus-list .bus-list-item .end { color: #333333; font-size: 26rpx; } .bus-list .bus-list-item .price { font-family: Arial; color: #fd8f01; font-size: 32rpx; font-weight: 600; } .bus-list .bus-list-item.disabled .ticket { display: none; } .bus-list .bus-list-item .ticket { color: #fd8f01; font-size: 24rpx; border: 2rpx solid #fd8f01; padding: 2rpx 8rpx; border-radius: 10rpx; font-family: Arial; } .bus-list .bus-list-item.disabled .ticket { color: #c5c5c5; } .bus-list .bus-list-item .s-icon1 { margin: 0 10rpx; border-color: #00B358; } .bus-list .bus-list-item .s-icon2 { margin: 0 10rpx; border-color: #f06463; } .bus-list .bus-list-item .tags { width: 160rpx; text-align: right; position: absolute; right: 0; margin-right: 138rpx; margin-top: 34rpx; top: 0; }

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
.page-wrapper {
    margin: 0;
    font-size: 28rpx;
    line-height: 1.5;
    color: #333;
    background-color: #efefef;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-tap-highlight-color: transparent;
    min-height:2000rpx;
}
 
.bus-list .bus-list-item {
position: relative;
height: 160rpx;
background-color: #fff;
margin: 16rpx 0;
border: 2rpx solid #e5e5e5;
border-width: 2rpx 0;
}
 
.bus-list .bus-list-item::before,.bus-list .bus-list-item::after {
position: absolute;
left: 122rpx;
content: '';
width: 24rpx;
height: 12rpx;
background-color: #efefef;
border: 2rpx solid #e5e5e5;
}
 
.bus-list .bus-list-item::before {
  border-radius: 0 0 60rpx 60rpx;
    border-top: none;
  top: -2rpx;
}
 
.bus-list .bus-list-item::after {
  border-radius: 60rpx 60rpx 0 0;
    border-bottom: none;
  bottom: -2rpx;
}
 
.bus-list .bus-list-item .bus-time {
position: absolute;
left: 0;
width: 134rpx;
height: 100rpx;
line-height: 100rpx;
margin: 30rpx 0;
color: #00b358;
text-align: center;
font-size: 40rpx;
font-family: Arial;
border-right: 2rpx dashed #e5e5e5;
}
 
.bus-list .bus-list-item .tobooking {
background-color: #00B358;
position: absolute;
right: 0;
width: 120rpx;
height: 160rpx;
line-height: 160rpx;
text-align: center;
color: #fff;
font-size: 30rpx;
}
 
.bus-list .bus-list-item.disabled .tobooking {
  background-color: #c5c5c5;
}
 
.bus-list .bus-list-item .detail {
height: 80rpx;
padding: 36rpx 0;
margin: 0 140rpx 0 144rpx;
}
 
.bus-list .bus-list-item .detail  .sub-list{
    height: 52rpx;
}
 
 
.bus-list .bus-list-item .start, .bus-list .bus-list-item .end {
color: #333333;
font-size: 26rpx;
}
 
.bus-list .bus-list-item .price {
font-family: Arial;
color: #fd8f01;
font-size: 32rpx;
font-weight: 600;
}
 
.bus-list .bus-list-item.disabled .ticket {
display: none;
}
 
.bus-list .bus-list-item .ticket {
  color: #fd8f01;
  font-size: 24rpx;
  border: 2rpx solid #fd8f01;
  padding: 2rpx 8rpx;
  border-radius: 10rpx;
  font-family: Arial;
}
 
.bus-list .bus-list-item.disabled .ticket {
  color: #c5c5c5;
}
 
.bus-list .bus-list-item .s-icon1 {
  margin: 0 10rpx;
  border-color: #00B358;
}
 
.bus-list .bus-list-item .s-icon2 {
  margin: 0 10rpx;
  border-color: #f06463;
}
 
.bus-list .bus-list-item .tags {
    width: 160rpx;
    text-align: right;
    position: absolute;
    right: 0;
    margin-right: 138rpx;
    margin-top: 34rpx;
    top: 0;
}

轻易实现了页面主体构造:

图片 1

然后这里必要诉求数据,所以我们去设置三个乞请实体:

class ListModel extends DemoModel { constructor() { super(); this.url = '/schedule/list'; } } module.exports = { cityModel: new CityModel, city2Model: new City2Model, listModel: new ListModel }

1
2
3
4
5
6
7
8
9
10
11
12
13
class ListModel extends DemoModel {
  constructor() {
    super();
    this.url = '/schedule/list';
  }
}
 
module.exports = {
  cityModel: new CityModel,
  city2Model: new City2Model,
  listModel: new ListModel
 
}

领头恳求参数:

onLoad: function (data) { let scope = this; if(!data || !data.sid || !data.aid || !data.date卡塔尔 { this.showToast('参数错误'卡塔尔国; return } this.index = 0; let listModel = models.listModel; listModel.setParam({ startcityid: data.sid, arrivalcityid: data.aid, startdatetime: data.date / 1000, page: this.index + 1 }State of Qatar; this.showLoading(State of Qatar; listModel.execute(function(data卡塔尔(قطر‎ { scope.hideLoading(卡塔尔; scope._appendList(data.schedules); }); }

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
onLoad: function (data) {
    let scope = this;
 
    if(!data || !data.sid || !data.aid || !data.date) {
      this.showToast('参数错误');
      return
    }
 
    this.index = 0;
    let listModel = models.listModel;
 
    listModel.setParam({
      startcityid: data.sid,
      arrivalcityid: data.aid,
      startdatetime: data.date / 1000,
      page: this.index + 1
    });
 
    this.showLoading();
    listModel.execute(function(data) {
      scope.hideLoading();
      scope._appendList(data.schedules);
 
    });
 
  }

接下去的办事就是渲染页面就可以,假若不考虑细节,只是做demo,真的很随便呢:)

//获取公共ui操作类实例 const _page = require('../../utils/abstract-page.js'State of Qatar; let modCalendar = require('../mod/calendar.js'卡塔尔; const models = require('../../data/demo-model.js'卡塔尔 const util = require('../../utils/util.js'卡塔尔 //获取使用实例 const app = getApp()Page(_page.initPage({ data: { listData: [] }, // methods: uiUtil.getPageMethods(), methods: { }, goIndex: function () { wx.navigateTo({ url: '../index/index' }) }, onShow: function () { global.sss = this; let scope = this; }, _appendList: function (data) { for(let i = 0, len = data.length; i < len; i++) { data[i].dateStr = util.dateUtil.format(new Date(data[i].datetime * 1000), 'H:F' ) } this.setData({ listData: this.data.listData.concat(data) }); }, onLoad: function (data) { let scope = this; if(!data || !data.sid || !data.aid || !data.date卡塔尔国 { this.showToast('参数错误'State of Qatar; return } this.index = 0; let listModel = models.listModel; listModel.setParam({ startcityid: data.sid, arrivalcityid: data.aid, startdatetime: data.date / 1000, page: this.index + 1 }State of Qatar; this.showLoading(卡塔尔(قطر‎; listModel.execute(function(data卡塔尔国 { scope.hideLoading(State of Qatar; scope._appendList(data.schedules); }); } }, { modCalendar: modCalendar }))

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
//获取公共ui操作类实例
const _page = require('../../utils/abstract-page.js');
let modCalendar = require('../mod/calendar.js');
const models = require('../../data/demo-model.js')
const util = require('../../utils/util.js')
 
//获取应用实例
const app = getApp()
 
Page(_page.initPage({
  data: {
    listData: []
  },
  // methods: uiUtil.getPageMethods(),
  methods: {
  },
 
  goIndex: function () {
 
    wx.navigateTo({
      url: '../index/index'
    })
  },
  onShow: function () {
    global.sss = this;
    let scope = this;
  },
 
  _appendList: function (data) {
 
    for(let i = 0, len = data.length; i < len; i++) {
      data[i].dateStr = util.dateUtil.format(new Date(data[i].datetime * 1000), 'H:F' )
    }
 
    this.setData({
      listData: this.data.listData.concat(data)
    });
  },
 
  onLoad: function (data) {
    let scope = this;
 
    if(!data || !data.sid || !data.aid || !data.date) {
      this.showToast('参数错误');
      return
    }
 
    this.index = 0;
    let listModel = models.listModel;
 
    listModel.setParam({
      startcityid: data.sid,
      arrivalcityid: data.aid,
      startdatetime: data.date / 1000,
      page: this.index + 1
    });
 
    this.showLoading();
    listModel.execute(function(data) {
      scope.hideLoading();
      scope._appendList(data.schedules);
 
    });
 
  }
}, {
  modCalendar: modCalendar
}))

<view class="page-wrapper "> <view class="calendar-bar-wrapper js_calendar_wrapper"> <view class="bus-tabs calendar-bar"> <view class="tabs-item js_pre_day">前一天</view> <view class="tabs-item js_show_calendar" style="-webkit-flex: 2; flex: 2;">2018-8-6 周一(明天)</view> <view class="tabs-item js_next_day">后一天</view> </view> </view> <view class="bus-list js_bus_list "> <block wx:for="{{listData}}" wx:key="k"> <view class="bus-list-item "> <view class="bus-time">{{item.dateStr}}</view> <view class="tobooking"> 预订 </view> <view class="detail"> <view class="detail1"> <view class="start"> <text class="icon-circle s-icon1"></text>{{item.startstationname}}</view> <view class="end"> <text class="icon-circle s-icon2"></text>{{item.arrivalstationname}}</view> </view> <view class="tags"> <view> <text class="price">¥{{item.price / 100}}</text> </view> <view> <text class="countleft">{{item.cansellcountamount}}张</text> </view> <view> <text class="b-tags js_tags"></text> </view> </view> </view> </view> </block> </view> <include src="../mod/calendar.wxml" /> <include src="../../utils/abstract-page.wxml" /> <view class="bus-list js_bus_list " ontap="goIndex"> 去首页 </view> </view>

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
<view class="page-wrapper ">
  <view class="calendar-bar-wrapper js_calendar_wrapper">
    <view class="bus-tabs calendar-bar">
      <view class="tabs-item js_pre_day">前一天</view>
      <view class="tabs-item js_show_calendar" style="-webkit-flex: 2; flex: 2;">2018-8-6 周一(明天)</view>
      <view class="tabs-item js_next_day">后一天</view>
    </view>
  </view>
  <view class="bus-list js_bus_list ">
 
    <block wx:for="{{listData}}" wx:key="k">
      <view class="bus-list-item  ">
        <view class="bus-time">{{item.dateStr}}</view>
        <view class="tobooking"> 预订 </view>
        <view class="detail">
          <view class="detail1">
            <view class="start">
              <text class="icon-circle s-icon1"></text>{{item.startstationname}}</view>
            <view class="end">
              <text class="icon-circle s-icon2"></text>{{item.arrivalstationname}}</view>
          </view>
          <view class="tags">
            <view>
              <text class="price">¥{{item.price / 100}}</text>
            </view>
            <view>
              <text class="countleft">{{item.cansellcountamount}}张</text>
            </view>
            <view>
              <text class="b-tags js_tags"></text>
            </view>
          </view>
        </view>
      </view>
 
    </block>
 
  </view>
 
  <include src="../mod/calendar.wxml" />
  <include src="../../utils/abstract-page.wxml" />
 
 
  <view class="bus-list js_bus_list " ontap="goIndex">
    去首页
  </view>
</view>

图片 2

最终,我们完备一下那边日期相关操作,便临时收场此次学习:

图片 3

图片 4

列表页的风流罗曼蒂克部分总括

咱俩做小程序相关学习有快两周了,达成了壹个简约的demo,项目依然有自然复杂度,感到上大概比较相符做小程序精通的,不过也许有大器晚成对主题素材,譬如写到前边其实愈来愈多是业务的事物了,业务会波及好些个细节体验,须要耗费时间费事,举例明天的列表业务,明显就偷懒了,代码品质也没怎么关心,事实上海大学家能够考虑一些难点,这里还差超多功用:

① 滚动加载

② 列表各类状态

③ ……

骨子里,列表页是常用的生龙活虎种业务页面,即便各个列表页的筛选规范不相像,可是主体职能无非都是:

① 列表渲染

② 滚动加载

③ 条件筛选、重新渲染

因此说咱俩实际上能够将其做成叁个页面基类,跟abstract-page叁个情趣,这里留待我们下一次来管理呢,借此我们Wechat小程序的求学课程就此停止,我背后几天总括下日前所学收拾几个博客出来,支持各位越来越好的垂询。

1 赞 收藏 评论

图片 5

兑现效果与利益:点击寻觅框,有追寻记录时以下拉菜单展现,点击下拉子菜单,将数据赋值到寻找框,点击找出Logo找出,帮忙清空历史记录,可手动输入和清空查询关键字,

[教程]Wechat小程序之试手豆瓣图书API,有demo有精气神儿2014-10-13转发我:oopsguy

 

这段日子Wechat小程序被炒得相当的热门,本身也抱着试意气风发试的神态下载了Wechatweb开采者工具,开荒工具相当短小,效能相对相当少,本性化设置也不曾。通晓完开采工具之后,顺便看了一晃小程序的官方开拓文书档案,大约明白了小程序的支付流程和有些常用的API。领悟了小程序之后,自个儿就有了想要做四个小demo的激动,纵然本人对小程序尚未曾做过不菲施行,只是在合法例子上当机不断,然而依旧想做出点小东西。既然要做八个demo,自然须求到数量,自身有又不想单独搭建服务端,所以在英特网查找能够用来提供测量试验数据的不收费api,最终自个儿选用了豆瓣图书。豆瓣图书提供的api成效少之又少,加上不开放appkey申请,所以不可能操成效户数量。只可以做点简单的图书查询和书本详细消息显示,那一个demo唯有三个页面,特别之大致。豆类图书APIdemo中用到的豆类图书api唯有三个,一个是书籍搜索,另三个是获得图书详细情形。搜索图书GET

UI:图片 6

参数意义备注

 

q查询关键字q和tag必传其生龙活虎

wxml:

tag查询的tagq和tag必传其风度翩翩

<!--查询历史记录数据-->
<view class="ddclass" style="margin-left: 50rpx;z-index:80" hidden="{{!StorageFlag}}" style="z-index:100">
  <view wx:for="{{sercherStorage}}" wx:key="item.id">
    <view class="liclass" style="color:#ec9e14;border-bottom:0;" id="{{item.id}}" bindtap="tapSercherStorage">
      <text style="width:100rpx">{{item.name}}</text>
    </view>
  </view>
  <view wx:if="{{sercherStorage.length!==0}}" style="text-align:center;" bindtap="clearSearchStorage">
    <text style="text-align:center;color:red;font-size:28rpx">清空历史记录</text>
  </view>
</view>

start取结果的offset默以为0

 

count取结果的条数默感觉20,最大为100

wxss:

返回status=200{ "start": 0, "count": 10, "total": 30, "books" : [Book, ...] }

/*二级菜单外界容器样式*/
   .ddclass {
 position: absolute;
 width: 100%;
 margin-top: 10px;
 left: 0;
 
}

拿到图书详细的情况GET

 
/*二级菜单普通样式*/
 
 .liclass {
 font-size: 14px;
 line-height: 34px;
 color: #575757;
 height: 34px;
 display: block;
 padding-left: 18px;
 background-color: #fff;
 border-bottom: 1px solid #dbdbdb;
}
 
/*二级菜单高亮样式*/
 
 li.highlight {
 background-color: #f4f4f4;
 color: #48c23d;
}

参数意义

 

:id图书id

js:

以下是切实图书的详细的情况新闻,部分demo中用不到的音讯省略{ "id":"1003078", "title":"小王子", "alt":"", "image":"", "author":[ "圣Eck苏佩里" ], "publisher":"中中原人民共和国友谊出版公司", "pubdate":"二零零一-9-1", "rating":{"max":10,"numRaters":9438,"average":"9.1","min":0}, "author_intro":"圣Eck苏佩里(1902-1945)1901年,玛雅·戴斯特莱姆......", "catalog":"序言:法国玫瑰n小王子n圣Eck苏佩里年表n" }

data:{

德姆o编写创造项目项目取名叫DouBanBookApp,项目标布局小程序暗许的构造同样DouBanBookApp pages index 首页 index.js index.wxml index.wxss detail 详细的情况页 detail.js detail.wxml detail.wxss requests api.js API地址 request.js 网络央求utils util.js 工具 app.js app.json app.wxss

sercherStorage: [],  

行使的主调色参照他事他说加以考察了豆瓣app的光后,采取了偏米黄。首页首页最上端显示寻觅输入框,客户输入图书名称,点击寻觅开关,呈现图书列表。图书或许会不知凡几,无法眨眼间间全套展示,必要用到分页,app上最广泛的列表分页正是上拉加载格局,依据小程序提供的零器件中,找到了一个相比较相符场景的scroll-view组件,这些组件有多个下拉到底层自动触发的bindscrolltolower事件。先制作出分界面包车型客车静态效果,之后再整合API,由于本人对分界面设计不灵活,所以不管弄了四个粗糙的布局,看得过去就行了,嘿嘿~~index.wxml<view > <input type="text" placeholder="输入书名寻找"></input><icon type="search" size="20"/></view><scroll-view scroll-y="true" style="width:100%;position:relative;top:40px;height:200px"> <view style="text-align:center;padding-top:50rpx;"> <icon type="cancel" color="red" size="40" /> <view><text>未有找到有关书籍</text></view> </view> <view style="text-align:center;padding-top:50rpx;"> <icon type="search" size="60" /> <view><text>豆瓣图书</text></view> </view> <view > <text>图书 10本图书</text> </view> <view > <view > <view > <view > <image src="images/demo.png"></image> </view> <view > <view >图书标图</view> <text >9.0/oopsguy/2014-07-08</text> </view> </view> </view> </view> <view > <icon type="waiting" size="30" color="reed" /> </view></scroll-view>index.wxsspage { background: #F2F1EE; } /seach/ .search-container { position: fixed; top: 0; right: 0; left: 0; background-color: #42BD56; color: #FFF; height: 40px; padding: 0 10rpx; z-index: 100; } .search-container input { background: #FFF; color: #AAA; margin-top: 5px; padding: 5px 10rpx; height: 20px; border-radius: 8rpx; } .search-container icon { position: absolute; top: 10px; right: 20rpx; } /header/ .header { padding: 20rpx 30rpx; } .header text { color: #A6A6A6; } /common list/ .list-item { position: relative; overflow: hidden } /index list/ .index-list-item { background: #FFF; padding: 15rpx 30rpx; overflow: hidden; } .index-list-item::active { background: #EEE; } .index-list-item .cover { float: left; width: 120rpx; height: 160rpx; overflow: hidden } .index-list-item .cover image.cover-img { width: 120rpx; height: 160rpx; } .index-list-item .content { margin-left: 140rpx; } .index-list-item .title { display: inline-block; height: 90rpx; padding-top: 20rpx; overflow: hidden; } .index-list-item .desc { display: block; font-size: 30rpx; padding-top: 10rpx; color: #AAA; white-space:nowrap; overflow: hidden; text-overflow: ellipsis; } .refresh-footer { text-align: center; padding: 10rpx 0; }

inputValue: "",             //搜索框输入的值  

书本详细页面图书详细页面正是体现具体的书籍音信,通用首页穿过了的书本id来收获图书新闻之后在体现出来,获取的历程中或许有延迟,须求二个加载效果来连接detail.wxml<view> <view > <image src="images/demo.png"></image> </view> <view > <view > <text >图书标题</text> <text >小编:小编名称</text> <text >出版社:xxx书局</text> <text >出版日期:2009-05-07</text> </view> <view > <text >0</text> <text >0</text> </view> </view> <view > <view ><text>简单介绍</text></view> <text > 那是书籍简单介绍 </text> </view> <view > <view ><text>小编</text></view> <text > 那是笔者简单介绍 </text> </view></view><loading> 加载中...</loading>detail.wxsspage { background: #EEE; } .cover-container { background: #42BD56; text-align: center; padding: 50rpx 0; } .cover-container image { display: inline-block; width: 300rpx; height: 400rpx; } .book-meta { position: relative; padding: 20rpx; overflow: hidden; } .book-meta .range { position: absolute; top: 30rpx; right: 20rpx; width: 180rpx; background: #FFF; padding: 20rpx 10rpx; text-align: center; box-shadow: 2px 2px 10px #CCC; } .book-meta .meta-info { margin-right: 200rpx; } .meta-info text { display: block } .book-title { font-weight: bold; font-size: 50rpx; } .other-meta { padding-top: 10rpx; color: #888; font-size: 30rpx; } .range text { display: block; } .range .score { font-size: 50rpx; font-weight: bold; } .range .starts { font-size: 40rpx; } .range .viewers { font-size: 30rpx; } .book-intro { padding: 20rpx; font-size: 40rpx; } .book-intro .intro-header { color: #888 } .book-intro .intro-content { font-size: 35rpx; line-height: 45rpx; }

StorageFlag: false,         //突显寻找记录标识位

搞好了首页和详细页的静态页面,接下去便是经过网络央浼api来获取数据,并呈现到页面上来。网络诉求和数据管理为了越来越好的军事拘系api,作者把api特地放置了二个单身的api.js文件中api.jsconst API_BASE = ""; module.exports = { API_BOOK_SEARCH: API_BASE + "/search", API_BOOK_DETAIL: API_BASE + "/:id" }

}

些微平常选取的工具函数放到了util.js中util.jsfunction isFunction { return typeof obj === 'function'; } module.exports = { isFunction: isFunction }

 

Wechat小程序提供了一个用来网络央求的api:wx.request,具体的参数跟jquery的ajax方法许多,为了有助于调用,作者把互联网哀告放到了request.js中request.jsvar api = require('./api.js'State of Qatar; var utils = require('../utils/util.js'State of Qatar; /** * 网路央求 / function request(url, data, successCb, errorCb, completeCb) { wx.request({ url: url, method: 'GET', data: data, success: function { utils.isFunction(successCb) && successCb; }, error: function() { utils.isFunction && errorCb(); }, complete: function() { utils.isFunction(completeCb) && completeCb; } /* * 寻觅图书 / function requestSearchBook(data, successCb, errorCb, completeCb) { request(api.API_BOOK_SEARCH, data, successCb, errorCb, completeCb); } /* * 获取图书详细新闻 */ function requestBookDokDetail(id, data, successCb, errorCb, completeCb) { request(api.API_BOOK_DETAIL.replace(':id', id), data, successCb, errorCb, completeCb); } module.exports = { requestSearchBook: requestSearchBook, requestBookDokDetail: requestBookDokDetail }

  //获取输入框的输入新闻
  bindInput: function (e) {
    this.setData({
      inputValue: e.detail.value
    })
  },

首页有图书寻找和列表显示,上拉加载的职能。Wechat小程序中未有了DOM操作的概念,一切的分界面元素的转移都要透过数量变化来改造,所以必要在js中的Page中的data中申明超级大多据分子。顾客在输入数据时,输入框的input绑定了searchInput伊芙nt事件,就回捕获到输入的多少,把输入的多寡更新的data中的searchKey中。searchInput伊芙nt: function { this.setData( { searchKey: e.detail.value }State of Qatar; }

 //清楚输入框数据
  clearInput:function(){
    this.setData({
      inputValue: ""
    })
  },
  //清楚缓存历史并关闭历史寻觅框
  clearSearchStorage: function () {
    wx.removeStorageSync('searchData')
    this.setData({ sercherStorage: [],
      StorageFlag: false,  })
  },
  //点击缓存搜索列表
  tapSercherStorage:function(e)
{
    var that = this;
    var index = parseInt(e.currentTarget.id);
    for (var j = 0; j < that.data.sercherStorage.length; j++) {
      if (j == index) {
        //将所选的索求历史加到搜素框
        this.setData({
          inputValue: that.data.sercherStorage[j].name,
          StorageFlag: false,   
        })
      }}
    if (this.data.inputValue != '') {
    //央求搜索记录
    }

当点击找出开关是,触发tap事件,其绑定了searchClickEvent

},  
//展开历史记录列表
  openLocationsercher:function(e)
  {
    this.setData({
      sercherStorage: wx.getStorageSync('searchData') || [],   //调用API从本地缓存中获取数据
      StorageFlag: true,
      listFlag: true,
    })
  },
//加多物色记录并寻觅
  setSearchStorage: function () {
    //let data;
    var that=this;
  //let localStorageValue = [];
    if (this.data.inputValue != '') {
      //将寻找记录更新到缓存
      var searchData = that.data.sercherStorage;
      searchData.push({
        id: searchData.length,
        name: that.data.inputValue})
      wx.setStorageSync('searchData', searchData);
      that.setData({ StorageFlag: false,})
      
      //央求寻觅
      /*wx.request({
        url: '',
        data: {SercherValue:that.data.inputValue,
            SercherTypeNum:that.data.SercherTypeNum,
            typeItem:that.data.typeItem },
        header: {},
        method: '',
        dataType: '',
        success: function(res) {},
        fail: function(res) {},
        complete: function(res) {},
      })*/
      //wx.navigateTo({
      //  url: '../result/result'
     // })
      // console.log('登时就要跳转了!'卡塔尔(قطر‎
    } else {
      console.log('空白的你搜个jb'卡塔尔国
    }
    // this.onLoad();
  },

searchClickEvent: function { if( !this.data.searchKey ) return; this.setData( { pageIndex: 0, pageData: [] }); requestData.call; }

 

requestData中封装了要求图书列表的形式/** * 央求图书音信 */ function requestData() { var _this = this; var q = this.data.searchKey; var start = this.data.pageIndex; this.setData( { loadingMore: true, isInit: false }卡塔尔(قطر‎; updateRefreshBall.call; requests.requestSearchBook( { q: q, start: start }, => { if( data.total == 0 卡塔尔国 { //未有记录 _this.setData( { totalRecord: 0 }); } else { _this.setData( { pageData: _this.data.pageData.concat( data.books ), pageIndex: start + 1, totalRecord: data.total }); } }, () => { _this.setData( { totalRecord: 0 }); }, () => { _this.setData( { loadingMore: false }); }); }

上拉加载的效果是三个小球不停的转变颜色,需求三个颜色列表//刷新动态球颜色 var iconColor = [ '#353535', '#888888' ];

然后用二个计时器来动态改动小球图标的颜料/** * 刷新上拉加载效果变色球 */ function updateRefreshBall() { var cIndex = 0; var _this = this; var timer = setInterval( function() { if( !_this.data[ 'loadingMore' ] ) { clearInterval; } if( cIndex >= iconColor.length ) cIndex = 0; _this.setData( { footerIconColor: iconColor[ cIndex++ ] }); }, 100 ); }

详尽页面的来得要求到首页点击了切实图书的id,所以须求首页传值过来,这里运用了小程序的wx.navigateTo方法,给其钦赐的url参数前边带以询问字符串格式情势的参数,被跳转的页面就能够在onLoad方法中拿到值。//跳转到详细页面 toDetailPage: function { var bid = e.currentTarget.dataset.bid; //图书id [data-bid] wx.navigateTo( { url: '../detail/detail?id=' + bid }); }

detail.js中经受参数onLoad: function { this.setData({ id: option.id }卡塔尔; }

事实上小程序的页面制作跟平时的html和css差不离,只是页面中不能够用守旧的html标签,而是改用了小程序提供的自定义标签,小程序对css的协理也是有限量,注意如何写法不包容也大概懂了。操作页面变化是通过数量变化来展现出来的,那点有一些像react和vue。以上的demo用到的知识点并十分的少,主如果页面包车型大巴数据绑定、事件绑定、模版知识和网络供给等休戚相关api。细心看看文书档案也基本上能够做出一个小例子。qi

末段效果图完整来说,德姆o相当的轻松,只有三个页面,分界面也是丑丑的T_T,算是自个儿入门小程序的第风度翩翩课吧。[图片上传中。。。]安顿三番两遍会有越来越多小例子正在编写中的Demo,不久将不负职务,敬请期望[图片上传中。。。]Hello小程序将与你共同成长。Wechat号:130870319 QQ群:40726600

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:微信小程序之试手豆瓣图书API,微信小程序开发之带搜索记录的搜索框

相关阅读