微信小程序之小豆瓣图书实例


Posted in Javascript onNovember 30, 2016

最近微信小程序被炒得很火热,本人也抱着试一试的态度下载了微信web开发者工具,开发工具比较简洁,功能相对比较少,个性化设置也没有。了解完开发工具之后,顺便看了一下小程序的官方开发文档,大概了解了小程序的开发流程和一些常用的API。

了解了小程序之后,自己就有了想要做一个小demo的冲动,虽然自己对小程序还没有做过很多实践,只是在官方例子上徘徊,但是还是想做出点小东西。既然要做一个demo,自然需要到数据,自己有又不想独自搭建服务端,所以在网上搜索可以用来提供测试数据的免费api,最后我选择了豆瓣图书。豆瓣图书提供的api功能比较少,加上不开放appkey申请,所以无法操作用户数据。只能做点简单的图书查询和图书详细信息展示,这个demo只有两个页面,非常之简单。

豆瓣图书API

demo中用到的豆瓣图书api只有两个,一个是图书搜索,另一个是获取图书详情。

搜索图书

GET https://api.douban.com/v2/book/search

参数 意义 备注
q 查询关键字 q和tag必传其一
tag 查询的tag q和tag必传其一
start 取结果的offset 默认为0
count 取结果的条数 默认为20,最大为100

返回status=200

{
 "start": 0,
 "count": 10,
 "total": 30,
 "books" : [Book, ...]
}

获取图书详情

GET https://api.douban.com/v2/book/:id

参数 意义
:id 图书id

以下是具体图书的详情信息,部分demo中用不到的信息省略

{
  "id":"1003078",
  "title":"小王子",
  "alt":"https:\/\/book.douban.com\/subject\/1003078\/",
  "image":"https://img3.doubanio.com\/mpic\/s1001902.jpg",
  "author":[
    "(法)圣埃克苏佩里"
    ],
  "publisher":"中国友谊出版公司",
  "pubdate":"2000-9-1",
  "rating":{"max":10,"numRaters":9438,"average":"9.1","min":0},
  "author_intro":"圣埃克苏佩里(1900-1944)1900年,玛雅·戴斯特莱姆......",
  "catalog":"序言:法兰西玫瑰\n小王子\n圣埃克苏佩里年表\n"
}

Demo编写

创建项目

项目取名为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

应用的主调色参考了豆瓣app的色调,采用了偏绿色。

首页

首页顶部展示搜索输入框,用户输入图书名称,点击搜索按钮,展示图书列表。图书可能会很多,不能一下子全部展示,需要用到分页,app上最常见的列表分页就是上拉加载模式,根据小程序提供的组件中,找到了一个比较符合场景的scroll-view组件,这个组件有一个上拉到底部自动触发的bindscrolltolower事件。

先制作出界面的静态效果,之后再整合API,由于本人对界面设计不敏感,所以随便弄了一个粗糙的布局,看得过去就行了,嘿嘿~~

index.wxml

<view class="search-container">
 <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 class="header">
   <text>图书 10本图书</text>
  </view>

  <view class="common-list">

  <view class="list-item">
   <view class="index-list-item">
    <view class="cover">
     <image class="cover-img" src="images/demo.png"></image>
    </view>
    <view class="content">
     <view class="title">图书标图</view>
     <text class="desc">9.0/oopsguy/2016-07-08</text>
    </view>
   </view>
  </view>

  </view>

  <view class="refresh-footer">
   <icon type="waiting" size="30" color="reed" />
  </view>

</scroll-view>

index.wxss

page {
 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;
}

图书详细页面

图书详细页面就是展示具体的图书信息,通用首页穿过了的图书id来获取图书信息之后在展示出来,获取的过程中可能有延迟,需要一个加载效果来过渡。

detail.wxml

<view>
  <view class="cover-container">
    <image src="images/demo.png"></image>
  </view>

  <view class="book-meta">
    <view class="meta-info">
      <text class="book-title">图书标题</text>
      <text class="other-meta">作者:作者名称</text>
      <text class="other-meta">出版社:xxx出版社</text>
      <text class="other-meta">出版日期:2010-05-07</text>
    </view>
    <view class="range">
      <text class="score">0</text>
      <text class="viewers">0</text>
    </view>
  </view>

  <view class="book-intro">
    <view class="intro-header"><text>简介</text></view>
    <text class="intro-content">
      这是图书简介
    </text>
  </view>

  <view class="book-intro">
    <view class="intro-header"><text>作者</text></view>
    <text class="intro-content">
      这是作者简介
    </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中封装了请求图书列表的方法

/**
 * 请求图书信息
 */
function requestData() {
 var _this = this;
 var q = this.data.searchKey;
 var start = this.data.pageIndex;

 this.setData( { loadingMore: true, isInit: false });
 updateRefreshBall.call( this );

 requests.requestSearchBook( { q: q, start: start }, ( data ) => {
  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( timer );
  }
  if( cIndex >= iconColor.length )
   cIndex = 0;
  _this.setData( { footerIconColor: iconColor[ cIndex++ ] });
 }, 100 );
}

详细页面的显示需要到首页点击了具体图书的id,所以需要首页传值过来,这里用到了小程序土工的wx.navigateTo方法,给其指定的url参数后面带以查询字符串格式形式的参数,被跳转的页面就会在onLoad方法中得到值。

//跳转到详细页面
toDetailPage: function( e ) {
  var bid = e.currentTarget.dataset.bid; //图书id [data-bid]
  wx.navigateTo( {
   url: '../detail/detail?id=' + bid
  });
}

detail.js中接受参数

onLoad: function( option ) {
  this.setData({
   id: option.id
  });
}

其实小程序的页面制作跟平时的html和css差不多,只是页面中不能用传统的html标签,而是改用了小程序提供的自定义标签,小程序对css的支持也有限制,注意哪些写法不兼容也差不多懂了。操作页面变化是通过数据变化来表现出来的,这点有点像react和vue。以上的demo用到的知识点并不多,主要是页面的数据绑定、事件绑定、模版知识和网络请求等相关api。仔细看看文档也差不多可以做出一个小例子。

最终效果图

总体来说,Demo很简单,只有两个页面,界面也是丑丑的T_T,算是我入门小程序的第一课吧。

示例代码

微信小程序之小豆瓣图书实例

微信小程序之小豆瓣图书实例

微信小程序之小豆瓣图书实例

源码地址:demo下载

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript html 静态页面传参数
Apr 10 Javascript
jquery 表单进行客户端验证demo
Aug 24 Javascript
Node.js实现批量去除BOM文件头
Dec 20 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
javascript常用函数(2)
Nov 05 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
Mac中安装nvm的教程分享
Dec 11 Javascript
详解微信小程序自定义组件的实现及数据交互
Jul 22 Javascript
vue实现循环滚动列表
Jun 30 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
Sep 16 Javascript
vue实现简单的登录弹出框
Oct 26 Javascript
javascript实现滚轮轮播图片
Dec 13 Javascript
微信小程序之ES6与事项助手的功能实现
Nov 30 #Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
Nov 30 #Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
Nov 30 #Javascript
BootStrap实现响应式布局导航栏折叠隐藏效果(在小屏幕、手机屏幕浏览时自动折叠隐藏)
Nov 30 #Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 #Javascript
jquery.Callbacks的实现详解
Nov 30 #Javascript
javascript中活灵活现的Array对象详解
Nov 30 #Javascript
You might like
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
Thinkphp的volist标签嵌套循环使用教程
2014/07/08 PHP
PHP命名空间(namespace)的动态访问及使用技巧
2014/08/18 PHP
利用PHPExcel读取Excel的数据和导出数据到Excel
2017/05/12 PHP
php+laravel依赖注入知识点总结
2019/11/04 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
javascript里的条件判断
2007/02/27 Javascript
javascript  Error 对象 错误处理
2008/05/18 Javascript
JavaScript入门之事件、cookie、定时等
2011/10/21 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
js函数定时器实现定时读取系统实时连接数
2014/04/30 Javascript
JS显示下拉列表框内全部元素的方法
2015/03/31 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
JS实现按钮颜色切换效果
2020/09/05 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
elementui实现预览图片组件二次封装
2020/12/29 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python基于mysql实现的简单队列以及跨进程锁实例详解
2014/07/07 Python
python获取代理IP的实例分享
2018/05/07 Python
python如何发送带有附件、正文为HTML的邮件
2021/02/27 Python
css图标制作教程制作云图标
2014/01/19 HTML / CSS
高清屏中使用Canvas绘图出现模糊的问题及解决方法
2019/06/03 HTML / CSS
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
服装公司总经理岗位职责
2013/11/30 职场文书
财务学生的职业生涯发展
2014/02/11 职场文书
化妆品促销方案
2014/02/24 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
超市周年庆活动方案
2014/08/16 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书
详解Redis瘦身指南
2021/05/26 Redis
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS