基于豆瓣api的快应用项目

本项目主要是为了熟悉快应用而练手的项目，该项目数据基于豆瓣api V2，简单的实现了电影、图书、音乐的预览功能。虽然说快应用基于相似前端的html、css、js语法来编写代码的，可是使用时并无那么好用，不少东西都没有获得支持。

前言

按照官方文档所说的，建议使用node v6.11.3版本，不要使用node 8.0以上版本，而我本地的node版本正是8.0以上的。因此就使用了nvm来管理node的版本，使用nvm切换node版本很是方便，关于nvm详情请自行google。个人代码就是在node 6.11.3上运行的，因此建议运行我代码也在node 6.11.3上。

简介

说到快应用，通常会拿来跟小程序作对比，就目前的api功能，debug能力，css属性支持等与小程序相比仍是有一点距离。不过快应用是直接调用的系统api，因此流畅度仍是蛮不错的。无论怎么说，毕竟快应用刚刚推出，但愿它变得愈来愈好。

关于项目的搭建、运行、热加载、devtool调试，官方文档写的很是详细，并且也有不少人也写了入门demo和教程，我看了一下，大部分就是copy的官方文档。因此这里不作过多描述，多看官方文档吧。

经过这个项目，熟悉了一下快应用的基础组件使用，列表渲染，tab切换，api接口调用，页面传参，自定义组件的构建等。在使用中也遇到一些坑，再次记录下，我也是新手上路，也只用到部分功能，文章不免有不对的地方，欢迎你们指正。

说一下实现的功能：

本项目主要实现了电影、图书、音乐三个模块。每一个模块都有三个类别，经过tab切换来查看不一样类别。（好比图书有小说、历史、传记三个类别。）三个模块的ui展现都同样。主要使用了list实现了列表滚动，tab切换、refresh下拉刷新，数据懒加载等功能。每一个模块都有一个详情页展现详情信息。首页有个测菜单栏，默认收起状态，经过点击菜单弹出菜单跳转到不一样菜单页。菜单页主要有主页，主题页和关于页面，整个项目很简单。

下面就几个我认为重要的点说一下：

一、封装fetch数据请求

每一个新的环境下我第一个封装的通常是网络请求。翻看了一下文档，支持async、await，果断引入，远离使人头疼的callback hell。文档说的很清楚，使用async，要引入babel-runtime/regenerator。因此在app.ux中首先引入。fetch经过async改造，同时结合豆瓣api V2对返回数据过滤后返回出来。而且封装了经常使用的get、post请求，并把封装的network对象暴露在全局，在全部文件中能够直接使用不用引入，详情请看代码。

二、封装自定义组件

我封装了一个评分组件和一个封面展现组件，和一个头部组件。这三个组件是纯渲染组件，没有什么逻辑的。同时作了一个列表组件，由于三个模块都是采用相同列表，列表组件经过传递的不一样url来调用不一样接口渲染列表。列表组件主要参考的官方文档，使用了数据懒加载，文档上写的很详细。同时也使用了tabs组件，refresh组件来实现横向滚动和下拉刷新。原本是准备进一步封装一个容器组件来完成这些功能的，可是看到自定义组件里slot只支持一个，不像vue那样能够命名slot。因此就放弃了作容器组件。

三、实现了一个抽屉效果的侧边栏菜单。

刚开始项目时就打算要实现一个模块来放我的信息，换肤的功能，原本打算模仿微信的，放在底部菜单，多一项叫作个人。因为我是网易云控，就打算模仿一下网易云，作个测边栏菜单，而且还有抽屉的滑入滑出效果，想看一下快应用上怎么实现动画。按照前端习惯，一上手就transition属性搞起，发现不支持，因而立马查看文档，只支持animation，而且属性要分开写。animation实现动画没有transition这么方便，打开和关闭要分别用不一样的动画来实现，经过js修改class属性来实现不一样的animation。可是有个蒙版，要在抽屉打开动画开始时打开，抽屉关闭动画结束后关闭。因此经过一个变量绑定style属性。在动画开始时立马显示。动画结束无法监听，只能经过定时器来实现。

四、换肤功能。

实现了一个简单的换肤功能，经过全局储存一个变量，经过改变变量来实现换肤功能。改变数据后，进入新页面，页面读取全局数据，加载页面就能正常切换皮肤，但是若是改变页面后当前页面的皮肤怎么变化呢？看到文档里有个$watch函数，能够监听属性变化，因而在须要实时切换肤色的页面定义一个变量，读取全局变量赋值给当前变量。再用$watch来监听该变量变化来实现实时换肤。可是当改变全局变量时，当前页面变量怎么会实时改变呢？对于一个原始类型的数据，固然不可能达到监听效果，这时只能经过对象来实现这一功能了。由于对象赋值会引用同一地址。因此能够实时监听数据变化。

须要注意的问题及坑：

一、调试相关

一、虽然说快应用能够用谷歌的devtool的debug功能，可是其与谷歌debug差太多了。首先没有network模块，网络请求信息都看不到。其次在代码中的console.log输出的对象类型数据都会调用Object.prototype.toString方法转换成字符串。为此很头疼，每次获取的数据要调用JSON.stringify转换为json字符串输出，再将json转换成对象查看，很鸡肋的功能，有时一调用接口远程调试就闪退。

二、虽然说是热更新，可是有时仍是要手动从新启动项目才能达到预期效果，好比：添加了新文件。在manifest.json中修改不会热更新，要切换到其余页面保存。有时manifest.json中修改保存后也达不到预期效果，也要重启项目，好比头部栏样式。

二、基础组件相关

一、与小程序同样，快应用里的基本组件都是封装好的，只能用文档里提到的基本组件，而不是普通的html标签都能使用。每一个组件的盒模型都是采用的box-sizing: border-box而且不许修改。这一点符合咱们习惯，平时移动端项目也都是采用这种盒模型。

二、还有默认容器组件，好比咱们用的比较多的div组件，其默认排列方式相似css中的行内块元素同样，而不一样于html中div的块级元素。默认横向排列，要想纵向排列只能设置外层容器flex-direction为column。

三、对于自定义组件，在组件内最外层元素设置了class属性，在引入组件时，在组件上也使用class时，组件里的class属性会被覆盖，并不会叠加。

三、css相关

必须吐槽的是css的样式支持。太多的样式属性在里面都不支持，写起来一点也不爽。关于支持哪些css，能够看官方文档，写的很清楚。对于不支持的css在编译时会报红提示你不支持。

一、好比我在写样式写的正(｡･∀･)ﾉﾞ嗨时，忽然发现没有达到预期效果，看了一下编译报错，不支持position: relative, absolute等属性，瞬间头疼，这不是很经常使用的样式，不支持？那快应用怎么实现这样效果了？翻看了一下文档，发现了一个容器组件stack组件，放在里面的子元素从上到下层级愈来愈高。这只实现了层级，怎么定位呢？固然是配合另一个样式属性：translate同个这个属性能够上下左右移动来实现定位。上帝给你关上一扇门时，也会给你开另外一扇窗，多看文档，骚年😳。

二、并且position支持fixed定位可是不支持z-index来调节层级，只能经过组件前后顺序来定层级。

三、普通容器不支持横向滚动，没有overflow的属性，只能经过tabs来hack。

四、动画不支持transition，只能经过animation来实现。

四、对于js部分

一、自定义组件引入后在上面加事件能正常监听，可是给监听函数传递参数，监听函数不能获取到。

二、基础组件的通用事件不知是否存在相似event这样的对象，只知道存在一个对象，可是打印为object类型，调用JSON.stringify函数会报错。

三、props不支持默认值，若是要默认值只能经过$watch来监听prop值的改变来自定义一个data属性。

四、绑定的通用事件会冒泡，可是没有提供阻止冒泡的方法，可是只会冒泡到最近一层包含监听该事件的元素上而不会继续向上冒泡。故能够经过绑定一个空函数来阻止事件冒泡。

五、在页面组件中能够经过this.$app和this.$app.$def这两个对象调用挂载到app.ux里的属性。可是注意：

app.ux中挂载的全部属性在this.$app.$def中都能获取到。可是只有方法属性会挂载到this.$app上。

六、refresh组件在使用时能够经过refreshing来切换当前状态，可是手动触发refresh事件时，refreshing并不会变为true，刷新结束后将其设置false并不能结束刷新状态。因此要同步设置refresh的状态，在refresh事件中将refreshing手动设置为true，待刷新结束后再将其设置为false，才会结束刷新状态。

七、引入组件中的资源引入路径是基于当前引入的组件。好比在组件中有个静态图片资源，我在组件里写死路径，当其余页面组件引用该组件时，会报找不到该资源的错误。必须将组件里的资源路径改成当前页面相对图片的路径，这显然有问题。不一样页面引入资源路径固然有可能不一样，只能经过props传递进去。

项目展现

前方多图预警。。。

关于项目的任何问题，欢迎一块儿讨论！！！

放出项目地址：

项目地址：github.com/keenjaan/qu…

欢迎star #^_^#