菜单

微信小程序之小豆瓣图书实例_javascript技巧_脚本之家

2020年3月15日 - 澳门太阳娱乐手机登录

眼下Wechat小程序被炒得很抢手,本身也抱着试一试的势态下载了Wechatweb开拓者工具,开垦工具相当的短小,作用绝相比少之甚少,特性化设置也远非。理解完开荒工具之后,顺便看了一晃小程序的合法开辟文书档案,大致精晓了小程序的成本流程和一些常用的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年,玛雅·戴斯特莱姆......", "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,由于自家对分界面设计不敏感,所以随意弄了二个粗糙的结构,看得过去就能够了,嘿嘿~~

    没有找到相关图书    豆瓣图书   图书 10本图书         图书标图 9.0/oopsguy/2016-07-08       

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

      图书标题 作者:作者名称 出版社:xxx出版社 出版日期:2010-05-07   0 0    简介  这是图书简介    作者  这是作者简介   加载中...

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文件中

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中

function isFunction { return typeof obj === 'function';}module.exports = { isFunction: isFunction}

Wechat小程序提供了一个用以网络央求的api:wx.request,具体的参数跟jquery的ajax方法大多,为了方便调用,笔者把互联网央求放到了request.js中

var api = require;var utils = require;/** * 网路请求 */function request(url, data, successCb, errorCb, completeCb) { wx.request({ url: url, method: 'GET', data: data, success: function { utils.isFunction && successCb; }, error: function() { utils.isFunction; }, complete: function() { utils.isFunction && 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, data, successCb, errorCb, completeCb);}module.exports = { requestSearchBook: requestSearchBook, requestBookDokDetail: requestBookDokDetail}

首页有图书寻找和列表体现,上拉加载的机能。Wechat小程序中并未有了DOM操作的定义,一切的分界面成分的退换都要经过数量变化来更换,所以须求在js中的Page中的data中声明超级大多据分子。

顾客在输入数据时,输入框的input绑定了searchInput伊芙nt事件,就回捕获到输入的多寡,把输入的多寡更新的data中的searchKey中。

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

当点击寻觅开关是,触发tap事件,其绑定了searchClickEvent

searchClickEvent: function { if( !this.data.searchKey ) return; this.setData( { pageIndex: 0, pageData: [] }); requestData.call;}

requestData中封装了央浼图书列表的不二等秘书诀

/** * 请求图书信息 */function requestData() { var _this = this; var q = this.data.searchKey; var start = this.data.pageIndex; this.setData( { loadingMore: true, isInit: false }); updateRefreshBall.call; requests.requestSearchBook( { q: q, start: start },  => { if { //没有记录 _this.setData; } else { _this.setData( { pageData: _this.data.pageData.concat, pageIndex: start + 1, totalRecord: data.total }); } }, () => { _this.setData; }, () => { _this.setData( { loadingMore: false }); });}

上拉加载的成效是二个小球不停的转移颜色,供给一个颜料列表

//刷新动态球颜色var iconColor = [ '#353535', '#888888'];

下一场用八个机械漏刻来动态改动小球Logo的颜色

/** * 刷新上拉加载效果变色球 */function updateRefreshBall() { var cIndex = 0; var _this = this; var timer = setInterval { if( !_this.data[ 'loadingMore' ] ) { clearInterval; } if( cIndex >= iconColor.length ) cIndex = 0; _this.setData( { footerIconColor: iconColor[ cIndex++ ] }); }, 100 );}

详见页面包车型大巴呈现必要到首页点击了实际图书的id,所以要求首页传值过来,这里运用了小程序土工的wx.navigateTo方法,给其钦点的url参数前边带以询问字符串格式形式的参数,被跳转的页面就能够在onLoad方法中得到值。

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

detail.js中选用参数

onLoad: function { this.setData;}

实在小程序的页面制作跟常常的html和css差不离,只是页面中不能够用古板的html标签,而是改用了小程序提供的自定义标签,小程序对css的支撑也是有限定,注意什么写法不合营也多数懂了。操作页面变化是由此数据变化来呈现出来的,那点有一点点像react和vue。以上的demo用到的知识点并相当的少,重要是页面包车型地铁多少绑定、事件绑定、模版知识和网络须求等血肉相连api。留心看看文书档案也大多可以做出八个小例子。

一体化来讲,德姆o很简单,唯有多个页面,分界面也是丑丑的T_T,算是本身入门小程序的率先课吧。

源码地址:demo下载

以上正是本文的全体内容,希望对大家的学习抱有助于,也愿意我们多多指教脚本之家。

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图