本文发表至今已有一段时间,错别字多、文笔混乱、内容过于陈旧。本人建议读者不必细究,大概浏览即可,最新的开发指南还是以官方文档为准,该博文的示例代码经过了重构,已经与官方文档同步,可能与文中的代码片段有较大差异,请以 Github 仓库上的代码为准。

最近微信小程序被炒得很火热,本人也抱着试一试的态度下载了微信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

  1. {
  2. "start": 0,
  3. "count": 10,
  4. "total": 30,
  5. "books" : [Book, ...]
  6. }

获取图书详情

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

参数 意义
:id 图书id

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

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

Demo编写

创建项目

项目取名为DouBanBookApp,项目的结构小程序默认的结构一样

  1. DouBanBookApp
  2. pages
  3. index 首页
  4. index.js
  5. index.wxml
  6. index.wxss
  7. detail 详情页
  8. detail.js
  9. detail.wxml
  10. detail.wxss
  11. requests
  12. api.js API地址
  13. request.js 网络请求
  14. utils
  15. util.js 工具
  16. app.js
  17. app.json
  18. app.wxss

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

首页

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

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

index.wxml

  1. <view class="search-container">
  2. <input type="text" placeholder="输入书名搜索"></input><icon type="search" size="20"/>
  3. </view>
  4. <scroll-view scroll-y="true" style="width:100%;position:relative;top:40px;height:200px">
  5. <view style="text-align:center;padding-top:50rpx;">
  6. <icon type="cancel" color="red" size="40" />
  7. <view><text>没有找到相关图书</text></view>
  8. </view>
  9. <view style="text-align:center;padding-top:50rpx;">
  10. <icon type="search" size="60" />
  11. <view><text>豆瓣图书</text></view>
  12. </view>
  13. <view class="header">
  14. <text>图书 10本图书</text>
  15. </view>
  16. <view class="common-list">
  17. <view class="list-item">
  18. <view class="index-list-item">
  19. <view class="cover">
  20. <image class="cover-img" src="images/demo.png"></image>
  21. </view>
  22. <view class="content">
  23. <view class="title">图书标图</view>
  24. <text class="desc">9.0/oopsguy/2016-07-08</text>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. <view class="refresh-footer">
  30. <icon type="waiting" size="30" color="reed" />
  31. </view>
  32. </scroll-view>

index.wxss

  1. page {
  2. background: #F2F1EE;
  3. }
  4. /*seach*/
  5. .search-container {
  6. position: fixed;
  7. top: 0;
  8. right: 0;
  9. left: 0;
  10. background-color: #42BD56;
  11. color: #FFF;
  12. height: 40px;
  13. padding: 0 10rpx;
  14. z-index: 100;
  15. }
  16. .search-container input {
  17. background: #FFF;
  18. color: #AAA;
  19. margin-top: 5px;
  20. padding: 5px 10rpx;
  21. height: 20px;
  22. border-radius: 8rpx;
  23. }
  24. .search-container icon {
  25. position: absolute;
  26. top: 10px;
  27. right: 20rpx;
  28. }
  29. /*header*/
  30. .header {
  31. padding: 20rpx 30rpx;
  32. }
  33. .header text {
  34. color: #A6A6A6;
  35. }
  36. /*common list*/
  37. .list-item {
  38. position: relative;
  39. overflow: hidden
  40. }
  41. /*index list*/
  42. .index-list-item {
  43. background: #FFF;
  44. padding: 15rpx 30rpx;
  45. overflow: hidden;
  46. }
  47. .index-list-item::active {
  48. background: #EEE;
  49. }
  50. .index-list-item .cover {
  51. float: left;
  52. width: 120rpx;
  53. height: 160rpx;
  54. overflow: hidden
  55. }
  56. .index-list-item .cover image.cover-img {
  57. width: 120rpx;
  58. height: 160rpx;
  59. }
  60. .index-list-item .content {
  61. margin-left: 140rpx;
  62. }
  63. .index-list-item .title {
  64. display: inline-block;
  65. height: 90rpx;
  66. padding-top: 20rpx;
  67. overflow: hidden;
  68. }
  69. .index-list-item .desc {
  70. display: block;
  71. font-size: 30rpx;
  72. padding-top: 10rpx;
  73. color: #AAA;
  74. white-space:nowrap;
  75. overflow: hidden;
  76. text-overflow: ellipsis;
  77. }
  78. .refresh-footer {
  79. text-align: center;
  80. padding: 10rpx 0;
  81. }

图书详细页面

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

detail.wxml

  1. <view>
  2. <view class="cover-container">
  3. <image src="images/demo.png"></image>
  4. </view>
  5. <view class="book-meta">
  6. <view class="meta-info">
  7. <text class="book-title">图书标题</text>
  8. <text class="other-meta">作者:作者名称</text>
  9. <text class="other-meta">出版社:xxx出版社</text>
  10. <text class="other-meta">出版日期:2010-05-07</text>
  11. </view>
  12. <view class="range">
  13. <text class="score">0</text>
  14. <text class="viewers">0</text>
  15. </view>
  16. </view>
  17. <view class="book-intro">
  18. <view class="intro-header"><text>简介</text></view>
  19. <text class="intro-content">
  20. 这是图书简介
  21. </text>
  22. </view>
  23. <view class="book-intro">
  24. <view class="intro-header"><text>作者</text></view>
  25. <text class="intro-content">
  26. 这是作者简介
  27. </text>
  28. </view>
  29. </view>
  30. <loading>
  31. 加载中...
  32. </loading>

detail.wxss

  1. page {
  2. background: #EEE;
  3. }
  4. .cover-container {
  5. background: #42BD56;
  6. text-align: center;
  7. padding: 50rpx 0;
  8. }
  9. .cover-container image {
  10. display: inline-block;
  11. width: 300rpx;
  12. height: 400rpx;
  13. }
  14. .book-meta {
  15. position: relative;
  16. padding: 20rpx;
  17. overflow: hidden;
  18. }
  19. .book-meta .range {
  20. position: absolute;
  21. top: 30rpx;
  22. right: 20rpx;
  23. width: 180rpx;
  24. background: #FFF;
  25. padding: 20rpx 10rpx;
  26. text-align: center;
  27. box-shadow: 2px 2px 10px #CCC;
  28. }
  29. .book-meta .meta-info {
  30. margin-right: 200rpx;
  31. }
  32. .meta-info text {
  33. display: block
  34. }
  35. .book-title {
  36. font-weight: bold;
  37. font-size: 50rpx;
  38. }
  39. .other-meta {
  40. padding-top: 10rpx;
  41. color: #888;
  42. font-size: 30rpx;
  43. }
  44. .range text {
  45. display: block;
  46. }
  47. .range .score {
  48. font-size: 50rpx;
  49. font-weight: bold;
  50. }
  51. .range .starts {
  52. font-size: 40rpx;
  53. }
  54. .range .viewers {
  55. font-size: 30rpx;
  56. }
  57. .book-intro {
  58. padding: 20rpx;
  59. font-size: 40rpx;
  60. }
  61. .book-intro .intro-header {
  62. color: #888
  63. }
  64. .book-intro .intro-content {
  65. font-size: 35rpx;
  66. line-height: 45rpx;
  67. }

做好了首页和详细页的静态页面,接下来就是通过网络请求api来获取数据,并显示到页面上来。

网络请求和数据处理

为了更好的管理api,我把api专门放到了一个单独的api.js文件中

api.js

  1. const API_BASE = "https://api.douban.com/v2/book";
  2. module.exports = {
  3. API_BOOK_SEARCH: API_BASE + "/search",
  4. API_BOOK_DETAIL: API_BASE + "/:id"
  5. }

有些经常用到的工具函数放到了util.js中

util.js

  1. function isFunction( obj ) {
  2. return typeof obj === 'function';
  3. }
  4. module.exports = {
  5. isFunction: isFunction
  6. }

微信小程序提供了一个用于网络请求的api:wx.request(OBJECT),具体的参数跟jquery的ajax方法差不多,为了方便调用,我把网络请求放到了request.js中

request.js

  1. var api = require('./api.js');
  2. var utils = require('../utils/util.js');
  3. /**
  4. * 网路请求
  5. */
  6. function request(url, data, successCb, errorCb, completeCb) {
  7. wx.request({
  8. url: url,
  9. method: 'GET',
  10. data: data,
  11. success: function(res) {
  12. utils.isFunction(successCb) && successCb(res.data);
  13. },
  14. error: function() {
  15. utils.isFunction(errorCb) && errorCb();
  16. },
  17. complete: function() {
  18. utils.isFunction(completeCb) && completeCb();
  19. }
  20. });
  21. }
  22. /**
  23. * 搜索图书
  24. */
  25. function requestSearchBook(data, successCb, errorCb, completeCb) {
  26. request(api.API_BOOK_SEARCH, data, successCb, errorCb, completeCb);
  27. }
  28. /**
  29. * 获取图书详细信息
  30. */
  31. function requestBookDokDetail(id, data, successCb, errorCb, completeCb) {
  32. request(api.API_BOOK_DETAIL.replace(':id', id), data, successCb, errorCb, completeCb);
  33. }
  34. module.exports = {
  35. requestSearchBook: requestSearchBook,
  36. requestBookDokDetail: requestBookDokDetail
  37. }

首页有图书搜索和列表展示,上拉加载的效果。微信小程序中没有了DOM操作的概念,一切的界面元素的改变都要通过数据变化来改变,所以需要在js中的Page中的data中声明很多数据成员。

用户在输入数据时,输入框的input绑定了searchInputEvent事件,就回捕获到输入的数据,把输入的数据更新的data中的searchKey中。

  1. searchInputEvent: function( e ) {
  2. this.setData( { searchKey: e.detail.value });
  3. }

当点击搜索按钮是,触发tap事件,其绑定了searchClickEvent

  1. searchClickEvent: function( e ) {
  2. if( !this.data.searchKey )
  3. return;
  4. this.setData( { pageIndex: 0, pageData: [] });
  5. requestData.call( this );
  6. }

requestData中封装了请求图书列表的方法

  1. /**
  2. * 请求图书信息
  3. */
  4. function requestData() {
  5. var _this = this;
  6. var q = this.data.searchKey;
  7. var start = this.data.pageIndex;
  8. this.setData( { loadingMore: true, isInit: false });
  9. updateRefreshBall.call( this );
  10. requests.requestSearchBook( { q: q, start: start }, ( data ) => {
  11. if( data.total == 0 ) {
  12. //没有记录
  13. _this.setData( { totalRecord: 0 });
  14. } else {
  15. _this.setData( {
  16. pageData: _this.data.pageData.concat( data.books ),
  17. pageIndex: start + 1,
  18. totalRecord: data.total
  19. });
  20. }
  21. }, () => {
  22. _this.setData( { totalRecord: 0 });
  23. }, () => {
  24. _this.setData( { loadingMore: false });
  25. });
  26. }

上拉加载的效果是一个小球不停的变换颜色,需要一个颜色列表

  1. //刷新动态球颜色
  2. var iconColor = [
  3. '#353535', '#888888'
  4. ];

然后用一个定时器来动态改变小球图标的颜色

  1. /**
  2. * 刷新上拉加载效果变色球
  3. */
  4. function updateRefreshBall() {
  5. var cIndex = 0;
  6. var _this = this;
  7. var timer = setInterval( function() {
  8. if( !_this.data[ 'loadingMore' ] ) {
  9. clearInterval( timer );
  10. }
  11. if( cIndex >= iconColor.length )
  12. cIndex = 0;
  13. _this.setData( { footerIconColor: iconColor[ cIndex++ ] });
  14. }, 100 );
  15. }

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

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

detail.js中接受参数

  1. onLoad: function( option ) {
  2. this.setData({
  3. id: option.id
  4. });
  5. }

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

qi

最终效果图

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

示例代码

https://github.com/oopsguy/wechat-miniprogram-examples

http://git.oschina.net/oopsguy/WechatSmallApps

微信小程序之小豆瓣图书的更多相关文章

  1. 玩玩小程序:使用 WebApi 交互打造原生的微信小程序 - 图灵小书架

    使用 WebApi 交互打造原生的微信小程序 - 图灵小书架 目录 介绍 源码地址 扫一扫体验 代码分析 其它相关信息(互联网搜集) 介绍 定时抓取图灵社区官网的首页.最热.推荐和最新等栏目的相关图书 ...

  2. 微信小程序——智能小秘“遥知之”源码分享(语义理解基于olami)

    微信小程序智能生活小秘书开发详解 >>>>>>>>>>>>>>>>>>>>> ...

  3. 微信小程序+“芝麻小客服”可设自动关注公众号,助力运营闭环

    微信小程序全面上线已经接近1年的时间,从最初的"用完即走"理念到2017年总计更新开放60余次的功能创新,微信小程序不一定会爆发下一次的红利,但绝对是微信生态中重要的一环. 芝麻小 ...

  4. 微信小游戏 小程序与小游戏获取用户信息接口调整 wx.createUserInfoButton

    参考: 小程序•小故事(6)——微信登录能力优化 小程序•小故事(4)——获取用户信息 本篇主要是讲微信getUserInfo接口不再出现授权弹框 那么原来getUserInfo是怎么样?修改之后又是 ...

  5. [BUG]微信小程序生成小程序码"小程序页面路径不存在,请重新输入"

    描述 小程序页面线上能打开. 微信官方 获取小程序页面小程序码 页面 ,输入 小程序页面路径,提示 "小程序页面路径不存在,请重新输入". 使用微信复制小程序路径方法, 也是同样的 ...

  6. 【开源】微信小程序、小游戏以及 Web 通用 Canvas 渲染引擎 - Cax

    Cax 小程序.小游戏以及 Web 通用 Canvas 渲染引擎 Github → https://github.com/dntzhang/cax 点我看看 DEMO 小程序 DEMO 正在审核中敬请 ...

  7. APP跳转小程序,小程序跳转APP

    关注公共号,搜索 "APP跳转小程序,小程序跳转APP",查看原文 前置条件: 开发环境:windows 开发框架:uni-app , H5+,nativeJS,mpvue 编辑器 ...

  8. 【开源】小程序、小游戏和Web运动引擎 to2to 发布

    简单轻量跨平台的 Javascript 运动引擎 Github → https://github.com/dntzhang/cax/tree/master/packages/to Simple DEM ...

  9. 微信小程序-制作简易豆瓣笔记

    demo截图: 图书:      电影:        共工欲善其事,必先利其器: 小程序编辑器下载地址 : https://mp.weixin.qq.com/debug/wxadoc/dev/dev ...

随机推荐

  1. Struts2(1) —— 概述

    1.Struts2框架介绍 Struts2框架是MVC流程框架,适合分层开发,框架应用实现不依赖于Servlet,使用大量的拦截器来处理用户请求,属于无侵入式的设计. 2.Struts2框架的流程原理 ...

  2. iOS Version 和 Build 版本号

    Version 和 Build 版本号 开发者都知道,无论是对于 iOS 和 Android 的应用,每个应用都有两个不同的版本号.分别是: Version Build(在 Android 上叫 Ve ...

  3. 时空地图 TimeGIS.com 中生成等值线

    在我的地图软件TimeGIS中加入了等值线生成的功能: 等值线的生成使用了wCoutour库, 代码根据这里的例子修改,http://www.06climate.com/view/1244.html ...

  4. iOS UIActivityIndicatorView

    UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle ...

  5. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  6. Mybatis基于注解的方式访问数据库

    1. 使用方式:在Service层直接调用 package com.disappearwind.service; import org.springframework.beans.factory.an ...

  7. python文件读写操作与linux shell变量命令交互执行

    python对文件的读写还是挺方便的,与linux shell的交互变量需要转换一下才能用,这比较头疼! #coding=utf-8 #!/usr/bin/python import os impor ...

  8. SQL SERVER 作业浅析

    作业介绍 SQL SERVER的作业是一系列由SQL SERVER代理按顺序执行的指定操作.作业可以执行一系列活动,包括运行Transact-SQL脚本.命令行应用程序.Microsoft Activ ...

  9. TCP首部解析

    TCP首部: TCP数据被封装在一个IP数据报中,如下: TCP首部数据格式: 16位源都口号,16为目的端口号用于寻找发送端和接收端的应用进程,加上IP首部的源端IP及终端IP,唯一的确认一个TCP ...

  10. SQL Server 2008 R2——TRUNCATE TABLE 无法截断表 该表正由 FOREIGN KEY 约束引用

    =================================版权声明================================= 版权声明:原创文章 禁止转载  请通过右侧公告中的“联系邮 ...