前言

历时两个星期，终于把wedo的手机端静态页面做出来了。对于工作室现在少数几个愿意写前端之一的我来说爱恨纠缠。爱的是我终于可以写出能看的手机端页面了，恨的是uniapp真的要把我气死了。我之所以用uniapp就是看中了它可以像java一样，一处编译，四处运行(手机端的各种小程序)。但是------它的官方文档的组件部分真的是像*一样，非常的不友好。之前也在官方群里反馈过，都不理我。听说有哥们因为官方文档的事怼过他们的CEO，不知道是真的假的。

首先，它的官网并没有很多的代码，有的只是介绍哪个组件怎么用，当你想看他的运行结果的时候他会让你下载样例，并且在自己电脑上运行。但是你看了运行结果也想实现他的那种效果，哪怕复制他的代码都不管用，样式该乱还是乱，你也没看出来他在哪里引入了或写了样式。其次，就是他的基本组件真的是太少了，当想要使用哪个组件的时候就会看到在扩展组件里。

最让我难受的还是那个cover-image标签。当用他的时候电脑上的h5和微信小程序都可以出来，而手机端却是一片空白，控制台也不报错。测试了好几次，换了图片地址，换成了静态图片，换了:src，调整了图片的各种样式，都不行，这个困扰了我一天的问题，在我第二天中午无意见把cover-给删了，就这么莫名其妙的好了。md。

值得称赞的是官方文档的API做的还是不错的。各种手机端的问题都兼顾到了。

回到正题，之所以做这个东西是因为，开学大三了，哥几个都学了好多的东西了，超纲了的那种。但带哥总是感到莫名的空虚（可能不是因为没有gf吧，或许是bf也说不定，谁知道呢!），他总感觉自己学的东西没什么用。又做不了架构师。我们工作室的学长学叔都是技术型大佬，人家都有自己的项目。并且学校专业课改革学ssm了。老师让每个组这个学期要做出些东西。刚好我又用uniapp写了个小demo。于是乎，wedo(唯读)出现了。

开搞

1.毛概课上，我用一双手创造出了手机端页面的草图。带哥和我商量着怎么创建数据库，有几张表，表中有几个字段，用不用外键之类的。带哥还和我商量着什么放进MySQL，什么放进Redis，什么放进Elasticsearch，用RabbitMQ发啥消息，要不要用zuul，必须使用Nginx代理一下之类的一大堆问题，他还说这东西很大，没个5-6人是完不成的。

页面草图

2.当天晚上，我在带哥和两个哥们开会的时间写好了爬虫。具体的爬取内容有，图书分类，每个分类下的图书信息，每个图书下的章节内容。

三张表

分类

部分图书信息

部分章节内容

这是我带哥具体的表和实体类设计,有兴趣的可以看一下,不小心点了赞也没事!!!https://www.jianshu.com/p/c8ed7f636aa9#comments

3.用HBuilderX创建uniapp项目，先搞清楚要做的功能有哪些

思维导图呈上

4.使用colorUI，把colorUI项目下的colorui放进本项目下的components下，使用

<view class="cuIcon-calendar"></view>
<view class="cuIcon-search"></view>
<view class="cuIcon-add"></view>

这三个东西

5.图书图片预加载

<image :src="item.img" alt="" class="image-child" />

.image-child {
    background-image: url(../../static/bookimages/150.jpg);/*本地的图片*/
}

6.遍历图片

<view class="more-books-images">
    <view class="" v-for="(item,index) in moreImages" class="more-books-item" >
        <image :src="item.img" class="more-books-item-images" />
        <view class="more-books-item-front">{{item.name}}</view>
    </view>
</view>

在遍历的时候moreImages不要前加this.，加了的话图片是出不来的。在为图片布局的时候，.more-books-images尽量不要用display: flex;，用了的话就会出现所有的图片在一行，为他们添加宽度也是不行的。最好还是在.more-books-item上添加display: inline-block;，可以设置宽度高度height: 380rpx;width: 202rpx;，图片左右对不齐时可以vertical-align: middle;

7.抽屉这东西在uniapp的扩展组件中有，我还傻了吧唧的写了一个，最终以章节目录不能翻动告终，带哥和我说扩展组件的抽屉时我才想起来。(需要下载到components才能用)

这玩意儿

结果这样

点击右侧阴影部分可以关闭抽屉

具体的页面截图

书架

书城

搜索框

搜索之后

图书详情

第一章

章节列表

评论列表

评论详情

我的

我的_第二版

问题列表

问题详情

反馈

写在最后

1.这些只是用户使用的，在这一星期吧，我会将管理员的电脑端写出来，然后还会写一个wedo(前端)pc端总结
2.如果想了解后端怎么写的，可以看看我带哥的博客https://www.jianshu.com/u/4cdab347db58，想了解具体情况，可以私聊我带哥哦！（这哥们还单身哦，但他技术挺np，嗯，编码技术！）
3.对于这些页面比较丑的问题，这些都是小事，样式没写对，可以改的！毕竟作为男孩，审美还是有点不足的，后续会迭代的。现在处于对接口时期，等接口对好了就可以大改了！

wedo(前端)手机端总结

wedo(前端)手机端总结

前言

开搞

写在最后