微信小程序之图书管理系统（wepy版）

2016年小程序的推出，刷爆了朋友圈。作为一名好奇的程序猿，当然是要学习一下。于是就在2个月前在小黄象发了个demo 图书管理系统（社区API版）.个人在写这个demo的时候发现小程序有一些不方便的地方：
不能使用promise（后来发现手动引用第三方promise库还是可以的）
不能使用promise意味着一定要使用回调这种写法，当回调的层次深了后，代码的可读性将大幅下降，日后维护也麻烦。
开发模式不利于代码的重复利用
 后来发现Gcaufy大神有开发了一个wepy框架，能解决小程序的一些问题。以下摘自于wepy的介绍.
主要解决的问题
开发模式转换
支持组件化开发
支持加载外部NPM包
单文件模式，使得目录结构更加清晰
默认使用babel编译，支持ES6/7的一些新特性
针对原生API进行优化
（更详细的内容请点击这里）
 在学习了一波wepy后，于是有了今天的微信小程序之图书管理系统（wepy版），数据的存储还是使用社区的API，大家可以直接把源码下载下来运行。本demo在外观和功能上与图书管理系统（社区API版）没有多大的区别，更多的是一种组件化的开发思路（本文不对样式进行介绍）。好了，开始进入正题。

完成效果图


index页面分析index页面其实很简单，就包含两个组件，分别是searchbar 和 booklist。我们只需通过css控制这两个组件的布局就可以。剩下的就是searchbar 和 booklist的开发。

searchbar组件searchbar组件的功能也很单纯，只是需要告诉父组件用户输入了什么信息。看一下代码
// searchbar.vue
<template>
<view class="search-bar">
<input placeholder="请输入书名" bindinput="inputChange" />
<button type="primary" bindtap="queryBooks">查詢</button>
</view>
</template>
<script>
import wepy from 'wepy';
export default class SearchBar extends wepy.component {
props = {};
data = {};
events = {
'index-broadcast': ($event, ...args) => {
console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`);
}
};
methods = {
inputChange(e) {
this.$emit('inputChange', e.detail.value);
},
};
}
</script>
当用户在输入的时候会触发inputChange事件，而inputChange会emit一个叫“inputChange”的事件。在父组件中(page也是组件，这里指index页面)，会监听inputChange事件，从而获取到从子组件传递出来的数据，继而过滤数据。
// index.vue
events = {
// 监听searchbar emit出来的事件，从而获得searchbar的输入
'inputChange': ($event, ...args) => {
this.searchFilter = args[0];
let filterBooks = [];
if (this.searchFilter.trim().length === 0) {
filterBooks = this.booksCopy;
} else {
this.books.forEach((book) => {
if (this.searchFilter.trim() &&
book.title.toUpperCase().indexOf(this.searchFilter.toUpperCase()) >= 0) {
filterBooks.push(book);
}
});
}
this.books = filterBooks;
this.$apply();
},
// 点击book list组件时候转跳到明细页面，book list组件把被点击的book传递出来
'goToDetailPage': ($event, ...args) => {
let book = args[0];
wx.navigateTo({
url: 'bookdetail?book=' + JSON.stringify(book),
});
},
};
booklist组件booklist组件接收一个book数组，然后for循环把book的概要信息显示出来.父组件（index）需要在onLoad的时候发起请求获取book信息，然后通过props把信息传递给booklist。index页面在发起请求的时候使用了wepy封装后的wx.request，返回promise。然后利用async/await可以让异步请求看起来像同步，是不是很爽！！
// index
async onShow() {
var op1 = {
url: Config.clubApi.list,
data: {
appkey: Config.appKey,
type: 'bookLibrary'
}
};
let res = await wx.request(op1);
let clubBooks = res.data.result;
let clubBooksArray = [];
if (clubBooks.length > 0) {
try{
clubBooks.forEach((clubBook) => {
clubBooksArray.push(clubBook.value);
});
this.books = clubBooksArray;
this.booksCopy = this.books;
}catch(err){
this.books=[];
this.booksCopy=[];
}
}
this.$apply();
}
//booklist组件 ，通过props获取从父组件传递过来的数据
<template>
<view class="book-content">
<view wx:for="{{books}}" wx:key="isbn13" id="{{item.isbn13}}" data-qty="{{item.qty}}" bindtap="goToDetailPage({{item}})">
<view class="book-list">
<view class="book-image">
<image src="{{item.image}}" mode="aspectFit"></image>
</view>
<view class="book-info">
<view class="book-info-style">
<view>书名:{{item.title}}</view>
<view>作者:{{item.author}}
</view>
<view>价格:{{item.price}}
</view>
<view>出版信息:{{item.publisher}}
</view>
<view>可借数量:{{item.qty}}
</view>
</view>
</view>
</view>
<view class="line"></view>
</view>
</view>
</template>
props = {
// 接收父组件传递的books数组
books: {},
};
然后，我们回到index页面，把两个组件引用进来就可以了，index页面完成！
<view class="main-wrapper">
<view class="search-bar-wrapper">
<component id="searchBar"></component> //searchbar组件
</view>
<view class="book-list-wrapper">
<component id="bookList" :books.sync="books"></component> //booklist组件
</view>
</view>
book detail页面接着我们再看看book detail 页面的结构。其实也是由3部分组成。最上方是booklist 组件，中间是book info组件，最下面是btn wrapper，如下图。大家可以发现，这个页面也是有book list的，那我们是否需要把代码copy过来的。No！我们只需要引用过来就好了，这个是组件化开发的好处之一，重用性高。

以下是book detail的页面结构，非常的简单。
<view class="main-wrapper">
<view class="book-list-wrapper">
<component id="bookList" :books.sync="book"></component>
</view>
<view class="book-detail-wrapper">
<component id="bookInfo" :books.sync="bookInfo" :height.sync="windowHeight"></component>
</view>
<view class="control-btn-wrapper">
<button type="primary" wx:if="{{bookInfo.qty > 0}}" bindtap="borrowBook"> 借阅 </button>
<button type="primary" wx:if="{{bookInfo.qty === 0}}"> 预约 </button>
<button type="primary" wx:if="{{showAddBook}}"> 录入 </button>
</view>
</view>
现在我们还差一个book info组件，now，一起来把它撸出来。
book info 组件其实book info组件的功能也很单纯。把“内容推荐”，“作者简介”和“目录”信息显示出来就可以。看以下页面结构：
// book info组件
<view class="book-info">
<scroll-view scroll-y="true" style="height:{{height}}px;" >
<view class="book-intro">
<text class="book-title">内容推荐</text>
<text class="book-msg">{{books.summary}}</text>
</view>
<view class="space-line-30"></view>
<view class="book-intro">
<text class="book-title">作者简介</text>
<text class="book-msg">{{books.author_intro}}</text>
</view>
<view class="space-line-30"></view>
<view class="book-intro">
<text class="book-title">目录</text>
<text class="book-msg">{{books.catalog}}</text>
</view>
</scroll-view>
</view>
这里使用到scroll view，小程序的scroll view是需要指定高度的，否则无法滚动。所以我们要动态计算中间那部分的高度。但是，组件本身是不知道它的容器的有多高的，所以需要父组件通过props告诉组件。
// book info 组件
props = {
books: {},//接收要显示的书本的信息
height:Number,//接收scroll view的高度
};
//book detail 组件
async onLoad(options) {
this.book = [];
this.book.push(JSON.parse(options.book));
this.bookInfo = JSON.parse(options.book);
if (this.windowHeight === 0) {
// 获取设备的高度，然后减去book list组件的高度，减去btn wrapper的高度再减去margin top 的高度
let res = await wx.getSystemInfo();
this.windowHeight = res.windowHeight - 66 - 136 - 10;
this.$apply();
}
}

原文链接：http://bbs.jointforce.com/topic/25380