基于MUI的电影新闻的webapp项目开发 – luoshao2000的博客 – CSDN博客 -Mikel

基于MUI的电影新闻的webapp项目开发 – luoshao2000的博客 – CSDN博客

2019年2月27日 分类: 开发笔记

来源: 基于MUI的电影新闻的webapp项目开发 – luoshao2000的博客 – CSDN博客

写在前面:之前,本人在自学webapp的过程中,一直没有找到一份比较完整的开发步骤文档,都是一些零零散散的文档,走了很多弯路,也耽误了很多的时间,其中尝试了多种框架,感觉MUI这种H5+的模式是比较适合的一种WEBAPP开发模式,开发难度稍高于纯H5,但应用流畅度接近原生APP(本人和dcloud没有一毛钱关系),是值得推荐的一种混合型APP开发模式。为了让广大WEBAPP初学者少走弯路,大家可以跟着本项目文档走下来,基本上就掌握了WEBAPP开发的很多方面。本项目不涉及服务端,服务端实现较为简单,可以使用任意的语言实现,只需要能根据url返回json数据即可,所以本项目直接使用了网上公开的数据API。

1    项目简介
项目功能为加载知乎日报和豆瓣电影信息,可以查看新闻、影评和观看预告片。
2    项目资源
https://www.jianshu.com/p/42630373e1bc
2.1    知乎日报API
2.1.1    最新新闻列表:https://news-at.zhihu.com/api/4/news/latest
2.1.2    某条新闻内容:https://news-at.zhihu.com/api/4/news/3892357
2.2    豆瓣电影API
2.2.1    在映电影列表:https://douban.uieee.com/v2/movie/in_theaters?city=福州
2.2.2    某部电影信息:https://douban.uieee.com/v2/movie/subject/26985127
2.3    Json格式工具
打开http://www.bejson.com/,把获得的json字符串直接粘贴到输入框,然后验证
2.4    HTML模板工具
http://www.jq22.com/jquery-info1097
JS资源下载
打开https://github.com/aui/art-template/tree/master/lib ,下载template-web.js

3    开发工具
3.1    HBuilder
http://download.dcloud.net.cn/HBuilder.9.1.14.windows.zip
3.2    夜神安卓模拟器
https://res06.bignox.com/full/20180816/b78465a3b8a9457eb47df54e477a1a60.exe?filename=nox_setup_v6.2.2.3_full.exe

4    开发过程
4.1    项目创建
使用Hbuilder新建移动APP项目,把template-web.js拷贝到js目录下; 新建subpages子目录,以后的页面都是放在该目录下。
4.2    入口页开发
打开index.html,写上一个页头mHeader和一个页脚导航mTab,修改链接和名称。

效果如下:

在subpages目录下,新建对应的四个页面,先写上简单的文字标识,后面会进行功能完善。

采用webView的方式来进行Tab切换,代码有点多,可以拷贝官方文档,进行局部修改,其实只要修改subpages即可,主要要和mTab中的设置要一致,否则会报告错误,因为名字错了,就无法找到文件资源,也就无法初始化了。

※初始化代码要写在plusReady事件中。
4.3    首页开发
暂时先留空,因为这个页面的内容是其他模块信息的综合而已,先做其他页面,在来组装本页的内容
4.4    新闻列表
打开newslist.html,新建一个mbody,
引入<script src=”../js/template-web.js” type=”text/javascript” charset=”utf-8″></script>
在mui.plusReady中编写ajax,获取数据

新建一个mListMedia块,删除多余的li,留下一个,用于制作模板(具体做法请参考art-template),最后模板如下:

※注意此图与上图的对应关系,script的id=“newlistScript”与template函数的参数名“newlistScript”是对应的。Mui(“#newlist”)是放置当前模板内容的父元素id,要记得给mbody的div加上id=‘newlist’。
※在这个过程当中,可以先用浏览器查询下数据,把数据放入www.bejson.com中进行观察,来指导编写代码。
绑定新闻条目的点击事件:

※解释:off是为了先把以前绑定的事件解除(一般不做也没有关系),on绑定tap点击事件到当前元素下的所有li元素上;this.getAttribute是获得li上的id属性值;openWindow是当点击某个li后,打开下一个网页,extras是传参;
页面效果如下:

4.5    新闻详情页
新建一个mHeader,取名为新闻详情,并带有返回键<
创建一个mBody,取id为news
引入template-web.js
创建mui.plusReady事件,编写代码:

创建一个卡片视图,(奇怪,hbuilder没有卡片的自动生成快捷键?),删除多余的div,留下一个做为模板用,模板最后如下:

页面效果如下:

4.6    豆瓣电影
打开movielist.html,
创建一个mbody
引入template-web.js
创建mui.plusReady事件,并编写代码

创建自定义模板

绑定tap事件

5    电影详情页
创建movie.html,
创建mHeader,创建mbody,取id为movie
创建卡片布局(见官网)
创建mui.plusReady事件,并编写代码

创建模板
把影片图片放在卡片的头部,把影片信息,预告片信息,影评信息分别放入卡片布局的内容区,具体代码见源代码。

※由于横向滚动条的预告片部分是动态生成的,所以要让它有滚动效果,必须重新初始化

6    首页开发
6.1    头部滚动条
滚动条为当前评分较高的电影海报,
在mui.plusReady中获取电影列表

自定义排序比较函数:降序排序

模板生成

6.2    下部列表
在mui.plusReady中拉数据

生成模板

7    项目效果预览

首页:

新闻列表

豆瓣电影

新闻详情页:

电影详情页:

预告片播放:

8. 项目源代码:

https://download.csdn.net/download/luoshao2000/10618471
———————
作者:包包老师
来源:CSDN
原文:https://blog.csdn.net/luoshao2000/article/details/81914525
版权声明:本文为博主原创文章,转载请附上博文链接!


标签:
本文的评论功能被关闭了.
备案信息冀ICP 0007948