图书详细页面就是展示具体的图书信息，通用首页穿过了的图书id来获取图书信息之后在展示出来，获取的过程中可能有延迟，需要一个加载效果来过渡。
detail.wxml
<view> <view> <image src="https://www.jb51.net/images/demo.png"></image> </view> <view> <view> <text>图书标题</text> <text>作者：作者名称</text> <text>出版社：xxx出版社</text> <text>出版日期：2010-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.wxss
page { 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; }
做好了首页和详细页的静态页面，接下来就是通过网络请求api来获取数据，并显示到页面上来。
网络请求和数据处理
为了更好的管理api，我把api专门放到了一个单独的api.js文件中
api.js
const API_BASE = "https://api.douban.com/v2/book"; module.exports = { API_BOOK_SEARCH: API_BASE + "/search", API_BOOK_DETAIL: API_BASE + "/:id" }
有些经常用到的工具函数放到了util.js中
util.js
function isFunction( obj ) { return typeof obj === 'function'; } module.exports = { isFunction: isFunction }
微信小程序提供了一个用于网络请求的api：wx.request(OBJECT)，具体的参数跟jquery的ajax方法差不多，为了方便调用，我把网络请求放到了request.js中
request.js
var api = require('./api.js'); var utils = require('../utils/util.js'); /** * 网路请求 */ function request(url, data, successCb, errorCb, completeCb) { wx.request({ url: url, method: 'GET', data: data, success: function(res) { utils.isFunction(successCb) && successCb(res.data); }, error: function() { utils.isFunction(errorCb) && 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 }
首页有图书搜索和列表展示，上拉加载的效果。微信小程序中没有了DOM操作的概念，一切的界面元素的改变都要通过数据变化来改变，所以需要在js中的Page中的data中声明很多数据成员。
用户在输入数据时，输入框的input绑定了searchInputEvent事件，就回捕获到输入的数据，把输入的数据更新的data中的searchKey中。
searchInputEvent: function( e ) { this.setData( { searchKey: e.detail.value }); }
当点击搜索按钮是，触发tap事件，其绑定了searchClickEvent
searchClickEvent: function( e ) { if( !this.data.searchKey ) return; this.setData( { pageIndex: 0, pageData: [] }); requestData.call( this ); }
requestData中封装了请求图书列表的方法