微信小程序之图书管理系统（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
• 
  

当用户在输入的时候会触发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获取从父组件传递过来的数据
• props = {
• // 接收父组件传递的books数组
•   books: {},
• };
  

然后，我们回到index页面，把两个组件引用进来就可以了，index页面完成！

•    
•          //searchbar组件
•    
•    
•          //booklist组件
•    
• 
  

book detail页面 接着我们再看看book detail 页面的结构。其实也是由3部分组成。最上方是booklist 组件，中间是book info组件，最下面是btn wrapper，如下图。大家可以发现，这个页面也是有book list的，那我们是否需要把代码copy过来的。No！我们只需要引用过来就好了，这个是组件化开发的好处之一，重用性高。

以下是book detail的页面结构，非常的简单。

•    
•         
•    
•    
•         
•    
•    
•          借阅
•          预约
•          录入
•    
• 
  

现在我们还差一个book info组件，now，一起来把它撸出来。
book info 组件 其实book info组件的功能也很单纯。把“内容推荐”，“作者简介”和“目录”信息显示出来就可以。看以下页面结构：

• // book info组件
•    
•         
•             内容推荐
•             {{books.summary}}
•         
•         
•         
•             作者简介
•             {{books.author_intro}}
•         
•         
•         
•             目录
•             {{books.catalog}}
•         
•    
• 
  

这里使用到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