基于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，
引入<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

基于MUI的电影新闻的webapp项目开发相关推荐

mysql创建新闻发布时间_基于PHP+mysql实现新闻发布系统的开发
新闻发布系统 1. 系统简介一个简单的新闻系统,包含了四个功能,增删改查,利用PHP语言,结合了MySQL数据库,开发工具用的是Dreamweaver. 2.数据库设计 -- 数据库: `newsd ...
php+mysql新闻系统的开发一_基于PHP+mysql实现新闻发布系统的开发
新闻发布系统 1. 系统简介一个简单的新闻系统,包含了四个功能,增删改查,利用PHP语言,结合了MySQL数据库,开发工具用的是Dreamweaver. 2.数据库设计 -- 数据库: `newsd ...
mysql新闻发布_基于PHP+mysql实现新闻发布系统的开发
新闻发布系统 1. 系统简介一个简单的新闻系统,包含了四个功能,增删改查,利用PHP语言,结合了MySQL数据库,开发工具用的是Dreamweaver. 2.数据库设计 -- 数据库: `newsd ...
毕业设计-基于SSM框架大学教务管理平台项目开发实战教程(附源码)
文章目录 1.项目简介 2.项目收获 3.项目技术栈 4.测试账号 5.项目部分截图 6.常见问题毕业设计-基于SSM框架大学教务管理平台项目实战教程-附源码课程源码下载地址:https://do ...
基于android studio 安卓的汽车APP项目开发和设计
一项目介绍汽车APP项目包含了 APP客户端和后台管理系统,后台管理系统主要维护汽车的数据,比如汽车发布,汽车图集多图上传,汽车销售商,汽车类型,客户管理,系统管理等,APP客户端包含用户注册 ...
基于Vue的WebApp项目开发（四）
实现新闻咨询页面目录结构步骤一:创建newslist.vue文件 <template><div id="tml"><!--使用mui框架,实现新闻 ...
Python基于Django的电影推荐系统和论坛项目完整源码
前些天发现了十分不错的人工智能学习网站,通俗易懂,风趣幽默,没有广告,分享给大家,大家可以自行看看.(点击跳转人工智能学习资料) 微信公众号:创享日记发送:电影论坛获取完整论文报告+项目源码源文件 ...
基于Next.js搭建基本可用于项目开发的过程
简单介绍要从头开始使用 React 构建一个完整的 Web 应用程序,需要考虑许多重要的细节: 必须使用打包程序(例如 webpack)打包代码,并使用 Babel 等编译器进行代码转换. 你需要针 ...
基于Android Studio的简易天气APP项目开发
参考文献:第一行代码(第二版),郭霖源码地址:https://github.com/2066972218/coolweather/commits/master 一.功能需求 1.罗列全国的省.市.县 ...

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

基于MUI的电影新闻的webapp项目开发相关推荐

最新文章

热门文章