2016年小程序的推出,刷爆了朋友圈。作为一名好奇的程序猿,当然是要学习一下。于是就在2个月前在小黄象发了个demo
图书管理系统(社区API版)
.个人在写这个demo的时候发现小程序有一些不方便的地方:
主要解决的问题
完成效果图
index页面分析 index页面其实很简单,就包含两个组件,分别是searchbar 和 booklist。我们只需通过css控制这两个组件的布局就可以。剩下的就是searchbar 和 booklist的开发。
searchbar组件 searchbar组件的功能也很单纯,只是需要告诉父组件用户输入了什么信息。看一下代码
以下是book detail的页面结构,非常的简单。
book info 组件 其实book info组件的功能也很单纯。把“内容推荐”,“作者简介”和“目录”信息显示出来就可以。看以下页面结构:
- 不能使用promise(后来发现手动引用第三方promise库还是可以的)
不能使用promise意味着一定要使用回调这种写法,当回调的层次深了后,代码的可读性将大幅下降,日后维护也麻烦。 - 开发模式不利于代码的重复利用
主要解决的问题
- 开发模式转换
- 支持组件化开发
- 支持加载外部NPM包
- 单文件模式,使得目录结构更加清晰
- 默认使用babel编译,支持ES6/7的一些新特性
- 针对原生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>
- // 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),
- });
- },
- };
- // 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: {},
- };
- <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的页面结构,非常的简单。
- <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 组件 其实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>
- // 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