社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > 微信小程式 > 小程式開發 > 微信小程式之小豆瓣圖書的介紹

微信小程式之小豆瓣圖書的介紹

不言
發布： 2018-06-22 17:25:06
原創
3150 人瀏覽過

本篇文章主要介紹了微信小程式之小豆瓣圖書實例，具有一定的參考價值，有興趣的同學可以了解一下。

最近微信小程式被炒得很火熱，本人也抱著試一試的態度下載了微信web開發者工具，開發工具比較簡潔，功能相對比較少，個性化設定也沒有。了解完開發工具之後，順便看了一下小程式的官方開發文檔，大概了解了小程式的開發流程和一些常用的API。

了解了小程式之後，自己就有了想要做一個小demo的衝動，雖然自己對小程式還沒有做過很多實踐，只是在官方例子上徘徊，但是還是想做出點小東西。既然要做一個demo，自然需要到數據，自己有又不想獨自搭建服務端，所以在網路上搜尋可以用來提供測試數據的免費api，最後我選擇了豆瓣圖書。豆瓣圖書提供的api功能比較少，加上不開放appkey申請，所以無法操作使用者資料。只能做點簡單的圖書查詢和圖書詳細資料展示，這個demo只有兩個頁面，非常之簡單。

豆瓣圖書API

demo中用到的豆瓣圖書api只有兩個，一個是圖書搜索，另一個是取得圖書詳情。

搜尋圖書

GET https://api.douban.com/v2/book/search
登入後複製
##意義備註q查詢關鍵字q和tag必傳其一##tag查詢的tagq和tag必傳其一start取結果的offset 預設為0count取結果的條數預設為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 === &#39;function&#39;;
}

module.exports = {
 isFunction: isFunction
}
登入後複製

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

request.js

var api = require(&#39;./api.js&#39;);
var utils = require(&#39;../utils/util.js&#39;);

/**
 * 网路请求
 */
function request(url, data, successCb, errorCb, completeCb) {
  wx.request({
    url: url,
    method: &#39;GET&#39;,
    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(&#39;:id&#39;, 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 = [
 &#39;#353535&#39;, &#39;#888888&#39;
];
登入後複製

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

/**
 * 刷新上拉加载效果变色球
 */
function updateRefreshBall() {
 var cIndex = 0;
 var _this = this;
 var timer = setInterval( function() {
  if( !_this.data[ &#39;loadingMore&#39; ] ) {
   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: &#39;../detail/detail?id=&#39; + bid
  });
}
登入後複製

detail.js中接受参数

onLoad: function( option ) {
  this.setData({
   id: option.id
  });
}
登入後複製

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

最终效果图

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

示例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序使用radio显示单选项功能【附源码】

关于微信小程序 欢迎界面开发的介绍

微信小程式中藍牙的連結

#

以上是微信小程式之小豆瓣圖書的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
小程式 微信小程式 豆瓣
來源：php.cn
上一篇：微信小程式 devtool隱藏的秘密 下一篇：微信小程式使用checkbox顯示多項選擇框功能【附原始碼】
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
在網路應用程式中顯示版本資訊的最佳實踐是什麼？ 我正在開發一個網頁應用程式。在網路應用程式中顯示版本資訊的最佳實踐是什麼？我正在使用語義版本控制，並且我已經有了semver，例如1.2.0但我很好奇在哪裡顯示它的最佳方式以及如何...
來自於 2024-04-06 19:13:16
0
2
476
npx create-react-app 指令出現錯誤，我該如何解決？ 我一直在嘗試使用'npxcreate-react-app'命令創建一個新的React應用，但似乎對我來說無效。最近有其他人遇到這個問題嗎？我有一個穩定的互聯網連接，並確保我的系統上...
來自於 2024-04-05 14:42:18
0
1
3511
如何使用 CSS 刪除 Next.js 中井字遊戲板上每行下方的空格？ 為什麼每一行下面都有一個空格？ （CSS）我正在嘗試製作一個Next.js井字遊戲應用程式來測試我的技能。但是，我遇到了css問題。似乎每行板下方都存在填充問題-每行下方都有一個小...
來自於 2024-04-05 11:39:02
0
1
1431
如何透過 DOM 而不是透過表格來呈現數據 我對我正在創建的應用程式有疑問，我正在使用Oracle資料庫，並且我正在從資料庫中獲取資訊並透過表格將其呈現在螢幕上，但我想嘗試單獨處理這些數據，例如創建一個段落並顯示一個值。我只...
來自於 2024-04-04 18:17:27
0
1
3567
Google SHOPIFY使用者登入後的授權流程 登入Google後，我無法在任何地方找到關於使用者授權帳戶的資訊。我有一個基於laravel的應用程序，它登錄到Google後，我們會收到用戶的電子郵件、令牌等信息，那麼我們如何將...
來自於 2024-04-04 09:40:59
0
1
310
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板