基于MUI的电影新闻的webapp项目开发

写在前面：之前，本人在自学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，
引入
在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