微信小程序之小豆瓣圖書實例
最近微信小程序被炒得很火熱，本人也抱著試一試的態(tài)度下載了微信web開發(fā)者工具，開發(fā)工具比較簡潔，功能相對比較少，個性化設置也沒有。了解完開發(fā)工具之后，順便看了一下小程序的官方開發(fā)文檔，大概了解了小程序的開發(fā)流程和一些常用的API。
了解了小程序之后，自己就有了想要做一個小demo的沖動，雖然自己對小程序還沒有做過很多實踐，只是在官方例子上徘徊，但是還是想做出點小東西。既然要做一個demo，自然需要到數(shù)據(jù)，自己有又不想獨自搭建服務端，所以在網(wǎng)上搜索可以用來提供測試數(shù)據(jù)的免費api，最后我選擇了豆瓣圖書。豆瓣圖書提供的api功能比較少，加上不開放appkey申請，所以無法操作用戶數(shù)據(jù)。只能做點簡單的圖書查詢和圖書詳細信息展示，這個demo只有兩個頁面，非常之簡單。
豆瓣圖書API
demo中用到的豆瓣圖書api只有兩個，一個是圖書搜索，另一個是獲取圖書詳情。
搜索圖書
GET https://api.douban.com/v2/book/search
| 參數(shù) | 意義 | 備注 |
|---|---|---|
| q | 查詢關鍵字 | q和tag必傳其一 |
| tag | 查詢的tag | q和tag必傳其一 |
| start | 取結果的offset | 默認為0 |
| count | 取結果的條數(shù) | 默認為20，最大為100 |
返回status=200
{
"start": 0,
"count": 10,
"total": 30,
"books" : [Book, ...]
}
獲取圖書詳情
GET https://api.douban.com/v2/book/:id
| 參數(shù) | 意義 |
|---|---|
| :id | 圖書id |
以下是具體圖書的詳情信息，部分demo中用不到的信息省略
{
"id":"1003078",
"title":"小王子",
"alt":"https:\/\/book.douban.com\/subject\/1003078\/",
"image":"https://img3.doubanio.com\/mpic\/s1001902.jpg",
"author":[
"（法）圣?？颂K佩里"
],
"publisher":"中國友誼出版公司",
"pubdate":"2000-9-1",
"rating":{"max":10,"numRaters":9438,"average":"9.1","min":0},
"author_intro":"圣?？颂K佩里（1900－1944）1900年，瑪雅·戴斯特萊姆......",
"catalog":"序言：法蘭西玫瑰\n小王子\n圣?？颂K佩里年表\n"
}
Demo編寫
創(chuàng)建項目
項目取名為DouBanBookApp，項目的結構小程序默認的結構一樣
DouBanBookApp
pages
index 首頁
index.js
index.wxml
index.wxss
detail 詳情頁
detail.js
detail.wxml
detail.wxss
requests
api.js API地址
request.js 網(wǎng)絡請求
utils
util.js 工具
app.js
app.json
app.wxss
應用的主調(diào)色參考了豆瓣app的色調(diào)，采用了偏綠色。
首頁
首頁頂部展示搜索輸入框，用戶輸入圖書名稱，點擊搜索按鈕，展示圖書列表。圖書可能會很多，不能一下子全部展示，需要用到分頁，app上最常見的列表分頁就是上拉加載模式，根據(jù)小程序提供的組件中，找到了一個比較符合場景的scroll-view組件，這個組件有一個上拉到底部自動觸發(fā)的bindscrolltolower事件。
先制作出界面的靜態(tài)效果，之后再整合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;
}
做好了首頁和詳細頁的靜態(tài)頁面，接下來就是通過網(wǎng)絡請求api來獲取數(shù)據(jù)，并顯示到頁面上來。
網(wǎng)絡請求和數(shù)據(jù)處理
為了更好的管理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"
}
有些經(jīng)常用到的工具函數(shù)放到了util.js中
util.js
function isFunction( obj ) {
return typeof obj === 'function';
}
module.exports = {
isFunction: isFunction
}
微信小程序提供了一個用于網(wǎng)絡請求的api：wx.request(OBJECT)，具體的參數(shù)跟jquery的ajax方法差不多，為了方便調(diào)用，我把網(wǎng)絡請求放到了request.js中
request.js
var api = require('./api.js');
var utils = require('../utils/util.js');
/**
* 網(wǎng)路請求
*/
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操作的概念，一切的界面元素的改變都要通過數(shù)據(jù)變化來改變，所以需要在js中的Page中的data中聲明很多數(shù)據(jù)成員。
用戶在輸入數(shù)據(jù)時，輸入框的input綁定了searchInputEvent事件，就回捕獲到輸入的數(shù)據(jù)，把輸入的數(shù)據(jù)更新的data中的searchKey中。
searchInputEvent: function( e ) {
this.setData( { searchKey: e.detail.value });
}
當點擊搜索按鈕是，觸發(fā)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 });
});
}
上拉加載的效果是一個小球不停的變換顏色，需要一個顏色列表
//刷新動態(tài)球顏色 var iconColor = [ '#353535', '#888888' ];
然后用一個定時器來動態(tài)改變小球圖標的顏色
/**
* 刷新上拉加載效果變色球
*/
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參數(shù)后面帶以查詢字符串格式形式的參數(shù)，被跳轉的頁面就會在onLoad方法中得到值。
//跳轉到詳細頁面
toDetailPage: function( e ) {
var bid = e.currentTarget.dataset.bid; //圖書id [data-bid]
wx.navigateTo( {
url: '../detail/detail?id=' + bid
});
}
detail.js中接受參數(shù)
onLoad: function( option ) {
this.setData({
id: option.id
});
}
其實小程序的頁面制作跟平時的html和css差不多，只是頁面中不能用傳統(tǒng)的html標簽，而是改用了小程序提供的自定義標簽，小程序對css的支持也有限制，注意哪些寫法不兼容也差不多懂了。操作頁面變化是通過數(shù)據(jù)變化來表現(xiàn)出來的，這點有點像react和vue。以上的demo用到的知識點并不多，主要是頁面的數(shù)據(jù)綁定、事件綁定、模版知識和網(wǎng)絡請求等相關api。仔細看看文檔也差不多可以做出一個小例子。
最終效果圖
總體來說，Demo很簡單，只有兩個頁面，界面也是丑丑的T_T，算是我入門小程序的第一課吧。
示例代碼
源碼地址：demo下載
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn)
這篇文章主要為大家詳細介紹了使用p5.js實現(xiàn)動態(tài)GIF圖片臨摹重現(xiàn)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
Swiper是移動端的一款非常強大的觸摸滑動插件。下面通過本文給大家分享JS中Swiper的使用和輪播圖效果，感興趣的的朋友一起看看吧2017-08-08
本文主要介紹了JavaScript實現(xiàn)分頁效果的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
javascript實現(xiàn)詳細時間提醒信息效果的方法
這篇文章主要介紹了javascript實現(xiàn)詳細時間提醒信息效果的方法,涉及javascript操作時間的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了JavaScript使用RegExp進行正則匹配的方法,實例分析了RegExp對象在進行正則匹配時的相關使用技巧,需要的朋友可以參考下2015-07-07
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單的拖拽效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Web系統(tǒng)中，從一個網(wǎng)頁跳轉到另一個網(wǎng)頁，是LAMP項目中最常用的技術之一。頁面跳轉可能是由于用戶單擊鏈接、按鈕等引發(fā)的，也可能是系統(tǒng)自動產(chǎn)生的。 此處介紹PHP中常用的實現(xiàn)頁面自動跳轉的方法。2015-04-04
require.js與bootstrap結合實現(xiàn)簡單的頁面登錄和頁面跳轉功能
這篇文章主要介紹了require.js與bootstrap結合實現(xiàn)簡單的頁面登錄和頁面跳轉功能,需要的朋友可以參考下2017-05-05
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript面向對象基礎與this指向問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
這篇文章主要展示了js仿黑客帝國字母掉落效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08