[教程]微信小程序之试手豆瓣图书API,有demo有真相2016-10-13转载作者:oopsguy

系列教程:玩转微信小程序怎样将「服务号」改造成「小程序」?玩转微信小程序微信小程序项目结构及配置玩转微信小程序微信小程序名片夹详情页开发玩转微信小程序名片盒「我」的页面详解玩转微信小程序「编辑名片」页面开发玩转微信小程序教你实现分组开发与左滑功能先来看看今天的整体思路:进入分组管理页面–>点击新建分组新建进入到未分组页面基本操作进入到已建分组里面底部菜单栏操作–>从名片夹中添加进行操作。

在微信公布小程序的文档和开发工具后,我们在第一时间进行了学习和体验,发现微信小程序的技术架构和开发体验让我们有些失望。由于微信小程序的运行环境并不是一个标准的浏览器环境,而且微信的封装工作并不完善,所以我们以往开发中的很多经验并不适用。这并非简单的开发习惯不适应,更重要的是我们的开发流程、规范将不适用。微信小程序开发第一宗罪:
无法调用NPM包
虽然微信小程序开发工具打包时实现了require函数加载依赖,但并不是完整的CommonJS依赖管理。因为require函数仅仅能够加载项目中的JS文件,而且必须严格定义JS文件路径,路径不支持CommonJS的路径风格。例如如下加载方式都将出错:require;require(‘lodash/map’);require;

最近微信小程序被炒得很火热,本人也抱着试一试的态度下载了微信web开发者工具,开发工具比较简洁,功能相对比较少,个性化设置也没有。了解完开发工具之后,顺便看了一下小程序的官方开发文档,大概了解了小程序的开发流程和一些常用的API。了解了小程序之后,自己就有了想要做一个小demo的冲动,虽然自己对小程序还没有做过很多实践,只是在官方例子上徘徊,但是还是想做出点小东西。既然要做一个demo,自然需要到数据,自己有又不想独自搭建服务端,所以在网上搜索可以用来提供测试数据的免费api,最后我选择了豆瓣图书。豆瓣图书提供的api功能比较少,加上不开放appkey申请,所以无法操作用户数据。只能做点简单的图书查询和图书详细信息展示,这个demo只有两个页面,非常之简单。豆瓣图书APIdemo中用到的豆瓣图书api只有两个,一个是图书搜索,另一个是获取图书详情。搜索图书GET

澳门微尼斯人手机版 1理清完基本流程我们开始开发。首先整个布局可以先看下,我再一步步讲。澳门微尼斯人手机版 2静态布号局后,我们开始实现新增分组效果,当然触发它出现的是澳门微尼斯人手机版 3显示窗口澳门微尼斯人手机版 4点击取消消失澳门微尼斯人手机版 5当里面的输入框内容发生改变时
bindinput 事件,大家别使用 bindchange 事件,这里的 bindchange
事件只有当失去焦点时才会被触发。澳门微尼斯人手机版 6当输入框事件发生时,确定按钮会变成可以点击状态,为空时,addTeam澳门微尼斯人手机版 7样式数据绑定。澳门微尼斯人手机版 8里面有表单就使用了
from。澳门微尼斯人手机版 9创建分组请求交互。澳门微尼斯人手机版 10创建分组完成,这里可能很多疑问,为什么不使用微信提供的模态框组件来实现,而是自己实现,其实我也很懒,非常想使用自带的模态框组件,但是发现在模态框里面提交表单好像有点麻烦,直接自定义了。接下来创建好的分组支持左滑删除与重命名,今天重点谈下左滑删除的实现方式。首先需要左滑的是被创建好的分组,未分组是写死的,故而不支持的。左滑删除使用了两个事件
bindtouchstart 与 bindtouchmove,这里必须绑定它的 id,这个 id
都是不同的,我这使用的用户创建完成后在后台生成的一个 id 号,之后我再
block 出来使用在这里,这个 id 都是唯一的,不能是相同的
id。澳门微尼斯人手机版 11样式布局,父元素是绝对定位,子元素删除是相对定位,鉴于动画效果,我这加了
css3
的动画效果,使滑动带点动画效果。澳门微尼斯人手机版 12现在我们来看事件构成:Bindtap
点击之后直接是跳转页面。澳门微尼斯人手机版 13澳门微尼斯人手机版 14左滑从触摸事件开始,当然需使用的参数在外面最好先定义一下:澳门微尼斯人手机版 15澳门微尼斯人手机版 16澳门微尼斯人手机版 17bindtouchStart
发生后,会执行 bindtouchmove
事件,在这里我们可以判断是否左右滑动:澳门微尼斯人手机版 18

在微信小程序开发工具中,我们必须对应写为如下格式:require(‘node_modules/lodash/lodash.js’);require(‘node_modules/lodash/map.js’);require(‘./foo.js’);

参数意义备注

  • Var dataId = e.currentTarget.id //获取到前面唯一的id;If{
    //用户左滑距离很长时会发生多次左滑事件,这里定义一个开关发生第一次之后就关闭它;
  • Touch是获取触摸点的一些数据,touches
    是一个触摸点的数组,每个触摸点包括以下属性:
  • pageX,pageY:距离文档左上角的距离,文档的左上角为原点 ,横向为 X
    轴,纵向为 Y 轴;
  • screenX,screenY:距离屏幕左上角的距离,屏幕左上角为原点,横向为X轴,纵向为Y轴;这里使用
    clientX,clientY 即可。我们在 bindtouchstart 时记录到开始的点,在
    bindtouchmove 记录到触摸结束的点,如果 X 轴滑动大于 Y
    轴的,再如果结束点-开始点小于一个数值(这个数组可以自己设置,鉴于灵敏度,我这设置的很小),右滑也是同理。澳门微尼斯人手机版 19判断到左滑与右滑事件后,我们就需要对当前组件绑定数据了,数据从那里来?可以看下我这数组一个来历,以及怎么被左滑事件里面获取到(我这数据是一个数组,需要在
    wxml 里面 block
    的)。澳门微尼斯人手机版 20这时候取到需要的数组,循环出来后,我进行对比,如果数据的
    id== 当前被事件操作的 id,那么我给改数组再添加一个 right 向右偏移
    15%,否则其他都不偏移,右滑同理,直接全部设置为
    0。澳门微尼斯人手机版 21澳门微尼斯人手机版 22最后把数据到绑定到页面上来。澳门微尼斯人手机版 23OK,左滑效果实现。澳门微尼斯人手机版 24如果出现全部被滚动了,记得在外层加上,X
    轴关闭即可。澳门微尼斯人手机版 25这时候你点击左滑会出现点透效果,官方文档提供给我们一个
    catch,不冒泡点击事件,即可完美解决。澳门微尼斯人手机版 26点击删除事件弹出模态框供用户确定是否删除。澳门微尼斯人手机版 27这里你点击取消时还要记得把左滑删除按钮去掉可能用户体验会好点。澳门微尼斯人手机版 28这里表单提交数据转换有点复杂(大家根据业务需求来做,不必花时间研究这里的方法),获取的是数组,按照后台需要的数据格式进行转换传递过去。澳门微尼斯人手机版 24今天再回去理下首页
    A、B、C
    定点跳转功能实现方法。澳门微尼斯人手机版 24首先是右边小索引布局以及数据绑定,数据绑定和名片夹列表上的字母一样,该字母下面有名片则渲染出来,没有则不需要渲染,id同样是当前字母与右边显示的内容一样:澳门微尼斯人手机版 31数据
    sort,和 group.name
    数据一样:澳门微尼斯人手机版 32这里是因为
    # 不支持设为 id(就是
    id=”#”),故而进行了一个转化。澳门微尼斯人手机版 27点击事件:获取到当前
    ID,以及绑定数据 toView 为当前
    ID。澳门微尼斯人手机版 28一定记得在data({modalHidden:true})不然会出现一加载页面即出现了模态框。澳门微尼斯人手机版 35点击未分组按钮进入到未分组名片列表页面。澳门微尼斯人手机版 36这个布局完全是
    copy
    首页过来的,后面只是数据接口有变而已,大家有兴趣可以回过去看下前面的。点击多选,会出现多选框和下面的一些操作按钮。都是些数据绑定,显示与隐藏类的实现比较简单。澳门微尼斯人手机版 37多选我们直接给
    checked 设置 Boole
    开关。澳门微尼斯人手机版 38澳门微尼斯人手机版 39用户已建分组点击进去的是点击顶部菜单按钮出现下拉菜单栏,这里直接使用微信提供的组件。澳门微尼斯人手机版 40最后点击从名片夹中添加进入到以下页面:澳门微尼斯人手机版 41整个布局基本还是和首页面差不多,这里不再多讲,澳门微尼斯人手机版 42顶部菜单直接多选绑定数据即可。澳门微尼斯人手机版 43牵扯到表单类的基本全都是
    from
    表单提交事件。除小部分接口方面欠缺外,写到这里其实分组前端方面效果基本实现。好了,由于目前小程序开发工具图片上传还有点问题,拍照收纳无法实现,所以微信小程序开发教程也先暂告一段落,等开发工具更新稳定后,我还会再追加教程的内容,有机会的话把成品也给大家看看。感谢朋友们一直以来的支持和关心,大家可以拿这个教程作为参考,摸索出自己的小程序开发套路。大家多多在咱们的
    QQ
    群内交流吧,群里每天都会有很多朋友交换代码、答疑解惑,对大家的开发和学习很有帮助。Hello小程序将与您共同成长。微信号:130870319
    QQ群:40726600

虽然我们可以像上面代码一样加载node_modules目录中的库,但是实际运行时却发生了:

q查询关键字q和tag必传其一

澳门微尼斯人手机版 44在调试工具的Network选项卡中,我们看到运行时加载了1000多个文件,总数据量1.8MB,而我们仅仅是在代码中加载了一个lodash库而已!这是因为微信小程序开发工具会将所有项目下的js文件视为项目文件,并进行打包。而实际开发中,我们需要安装很多的NPM扩展库,而这些扩展库中有大量的不需要打包的文件,例如lodash中有上千文件,而我们只需要用到其中的非常少的一部分。另外,在开发中,我们往往需要安装babal、eslient、webpack、grunt等待开发工具,微信小程序开发工具会一视同仁将这些工具的源码也进行打包……实测开发者工具将崩溃!开发者将崩溃!我崩溃!所以不支持NPM包的原因,是微信开发者工具不支持CommonJS标准,不支持CommonJS标准的原因,是微信开发者工具想当然地认为项目目录下的js文件一定是项目文件,所以只实现了简单的require函数,想当然的原因是。。。微信小程序开发第二宗罪:
无法使用Babel转码
无法使用Babel转码的原因其实仍然归结于无法加载NPM库。但是后果将十分严重。因为你将不能再安全使用ES6/7特性,你将无法使用async/await函数,你将和无尽的callback做斗争,你该怎样描述自己?回调地狱中的苦逼程序员?如果你看到这里不明白Babel为何物,那么祝贺你,因为不曾见过天堂就不知何为地狱,你无须为不支持ES6/7而烦恼。但一旦你的大脑支持了ES6/7,用过了Babel,你就回不去了,像我一样,无Babel不编码。微信小程序开发第三宗罪:
无法重用组件
**其实微信小程序开发是并非完全不能重用组件,比如WXML语法中支持import和
include。但是那仅仅是视图模板可重用,并非组件可重用,因为我们认为组件在应当包含视图和逻辑。WXML其实是基于可重用的组件,但是不允许我们自定义组件。如果你有React经验,你就会明白我的意思。例如,你的小程序是个电商APP,项目中有两个页面中同时包含了商品列表组件,比如某分类下商品列表和搜索结果列表,我们知道这两个列表其实仅仅是参数不同而已。但是在小程序开发中,你只能将列表的模板抽象出来,不能将逻辑抽象出来,所以你就需要在两个页面上都实现一遍列表组件的控制逻辑,比如刷新、加载更多。。。我们的实践只吐槽、管杀不管埋是不道德的,既然发现了微信小程序开发中的各种弊端,我们在开发之中总结出了一套流程和工具,专为解决上述三个问题,并免费发布到了开源社区,这就是Labrador。接下来我们一起来尝试一下我们的开发体验。安装Labrador通过命令
npm install -g
labrador-cli全局安装Labrador控制行工具。初始化项目通过如下命令新建一个Labrador项目:mkdir
democd demonpm initlabrador init

tag查询的tagq和tag必传其一

项目初始化完成后,该目录是这个样子的:

start取结果的offset默认为0

澳门微尼斯人手机版 45
图中的src是我们的源码目录,node_modules是NPM包目录,dist是目标输出目录。请在开发者工具中新建一个项目,并设置路径到dist目录,请勿设置为demo目录!使用WebStorm或Sublime打开demo目录,开发过程中,我们使用WebStorm或Sublime修改src目录下的源码,请勿直接修改dist目录中的文件,因为dist目录是通过labrador命令生成的。在demo目录中运行
labrador
build命令编译项目,该命令会将src目录下的文件一一处理并生成dist目录下对应的文件。我们也可以运行
labrador watch
命令监控src目录下的文件变化,这样就不用每次修改后手动运行编译命令。加载NPM包我们以lodash包为例,在src/app.js中键入代码
const _ =
require;编译后,我们看到dist目录下的文件是这样的:[图片上传中。。。]我们看到dist目录下有一个npm/lodash目录,该目录下只有一个lodash.js文件,那么在微信web开发者工具中打包预览,lodash的库将只有这个文件被加载。这一切是怎么发生的?我们看一下dist/app.js的源码,发现源码中const
_ = require;被编译为 var _ =
require(‘./npm/lodash/lodash.js’);然后labrador命令将node_modules/lodash/lodash.js文件复制到了
dist/npm/lodash/lodash.js。这就是通过labrador可以调用NPM包的原理。重要的是,只有真正用到的js文件才被labrador命令加入到项目目录中。这样一个小小的改进象征着我们的小程序可以便捷调用NPM仓库中海量的扩展库!Babel转码在初始化的示例代码src/app.js中的内容是这样的:[图片上传中。。。]图中timer和getUserInfo属性都为async函数,函数体内使用await调用异步操作。labrador
库对微信API进行了封装,使用 const wx = require(‘labrador’);
覆盖默认的全局变量wx;
封装后的wx对象提供的异步方法返回的都是Promise异步对象,结合async/await函数彻底终结callback,将异步代码同步写,轻松逃离回调地狱!但目前async/await函数是不被浏览器支持的,我们需要使用babel对其转码,labrador编译命令已经内置了babel转码,转码后的代码可以查看dist/app.js,内容过长,不再张贴。重用组件重用组件最需要解决的问题是组件的逻辑代码怎样重用。在实例代码中有一个src/components目录,用来存放项目内的可重用组件,其结构是这样的:[图片上传中。。。]子目录src/components/list中存放着一个可重用的组件。list.js
/ list.less / list.xml 分别对应微信小程序的 js / wxss / wxml
文件。JS为控件的逻辑层,其代码如下:[图片上传中。。。]文件导出一个List类,这个组件类拥有像Page一样的生命周期函数onLoad,
onReady, onShow, onHide, onUnload
以及setData函数。LESS文件对应微信的WXSS文件,因为微信小程序实现的限制,LESS中无法使用连级选择语法,但是可以定义变量,方便开发。XML文件对应微信的WXML文件,是组件视图描述文件,list.xml内容为:[图片上传中。。。]
文件中导出一个名为list的template。组件不但可以存放在src/components目录内,还可以单独做成NPM包,这样就可以轻松做到跨项目间的组件共享。组件定义完成后,接下来是在页面中调用,在
src/pages/index/index.js 中有如下代码:[图片上传中。。。]
代码中首先引入了labrador库替换全局的默认wx对象,并使用labrador.createPage方法代替全局的Page函数声明页面。然后加载List组件类,在页面声明配置中,增加了components属性,并将List组件类实例化传入。labrador.createPage方法是对Page方法的一层封装,目的是在页面初始化时和组件对象进行关联。在
src/pages/index/index.less 中加入代码@import ‘list’
即可调用list组件的样式,如果在src/components/list中找不到list.less,那么编译命令将在NPM包中寻找
node_modules/list/index.less 。在 src/pages/index/index.xml 中加入代码
<component key=”list”/> 即可调用list组件的模板文件,component
是Labrador自定义的组件,编译后对应生成 import 和
template。如果在src/components/list中找不到list.xml,那么编译命令将在NPM包中寻找
node_modules/list/index.xml具体的体验还需要你亲自动手才行,文章到此结束,谢谢!Hello小程序将与您共同成长。微信号:130870319
QQ群:40726600**

count取结果的条数默认为20,最大为100

返回status=200{ “start”: 0, “count”: 10, “total”: 30, “books” : [Book,
…] }

澳门微尼斯人手机版,获取图书详情GET

参数意义

发表评论

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