混合式开发APP项目—

一、做什么?

幸福到APP

二、哪些功能？

三、所需技术

开发工具：HbuilderX

前端框架：MUI+H5Plus

可在百度搜索MUI和HPlus开发文档可以进行学习。标签图库：阿里巴巴矢量图库具体用法不赘述了。

代码展示：

xingfudao_index.html代码：

<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /><link href="css/main.css" rel="stylesheet" /><script src="js/iconfont.js" type="text/javascript"></script><style type="text/css">.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;}</style></head><body><!-- 头部 mhe --><header class="mui-bar mui-bar-nav"><!-- 搜索框 min --><div class="mui-input-row mui-pull-left mui-search"><input type="search" class="mui-input-clear" placeholder="请输入搜索内容" style="background: white" onfocus="this.style.color='gray'"></div><span class="mui-pull-right" id="yuyue">搜索</span></header><!-- 主体 mbo --><div class="mui-content"><!--  轮播图 --><div id="slider" class="mui-slider"><div class="mui-slider-group mui-slider-loop"><!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="data:images/lb4.jpg"></a></div><!-- 第一张 --><div class="mui-slider-item"><a href="#"><img src="data:images/lb1.jpg"></a></div><!-- 第二张 --><div class="mui-slider-item"><a href="#"><img src="data:images/lb2.jpg"></a></div><!-- 第三张 --><div class="mui-slider-item"><a href="#"><img src="data:images/lb3.jpg"></a></div><!-- 第四张 --><div class="mui-slider-item"><a href="#"><img src="data:images/lb4.jpg"></a></div><!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) --><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="data:images/sucai/lb1.jpg"></a></div></div><div class="mui-slider-indicator"><div class="mui-indicator mui-active"></div><div class="mui-indicator"></div><div class="mui-indicator"></div><div class="mui-indicator"></div></div></div><!-- 九宫格 --><ul id="grid" class="mui-table-view mui-grid-view mui-grid-9"><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#"><span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xiangji"></use></svg></span><div class="mui-media-body">婚纱拍摄</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#"><span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-feiji"></use></svg></span><div class="mui-media-body">全球旅拍</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#"><span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-hunyanjiudian"></use></svg></span><div class="mui-media-body">婚宴酒店</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#"><span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-hunlifuwu"></use></svg></span><div class="mui-media-body">婚礼服务</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#"><span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-paishe-"></use></svg></span><div class="mui-media-body">婚礼拍摄</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#"><span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-baike-"></use></svg></span><div class="mui-media-body">婚礼百科</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#"><span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-jingcaishunjian"></use></svg></span><div class="mui-media-body">婚礼瞬间</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3"><a href="#"><span class="mui-icon"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xinren"></use></svg></span><div class="mui-media-body">新人说</div></a></li></ul><!-- 婚纱拍摄 --><div id="paishe"><div><span style="background: red;">&nbsp;</span><span class="hs">婚纱拍摄</span><span class="more"><a href="http://www.baidu.com">更多&gt;&gt;</a></span></div><!-- 九宫格 --><ul class="mui-table-view mui-grid-view mui-grid-9"><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><img src="data:images/gg1.jpg" width="100%"/><div class="mui-media-body">私奔到海</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><img src="data:images/gg2.jpg" width="100%"/><div class="mui-media-body">城市热恋</div></a></li><li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><img src="data:images/gg3.jpg" width="100%" /><div class="mui-media-body">浪漫花海</div></a></li></ul></div><!-- 图文列表 --><div id="mlist"><div><span style="background: red;">&nbsp;</span><span class="hs">婚宴酒店</span><span class="more"><a href="http://www.baidu.com">更多&gt;&gt;</a></span></div><!-- 真正的图文列表 --><ul class="mui-table-view"><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="data:images/list1.jpg"><div class="mui-media-body"><p class="title">【巴厘岛】乌干沙悦榕庄酒店 白羽教堂</p><p class="font_style">周一到周日 | 提前3天预约</p><p class="font_style"><span class="after_price">￥42888.0</span><span class="before_price">门店价：￥42888.0</span><span class="sale_num">售出:2</span></p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="data:images/list2.jpg"><div class="mui-media-body"><p class="title">【苏梅岛】班达灵岩洲际度假村 沙滩</p><p class="font_style">周一到周日 | 提前3天预约</p><p class="font_style"><span class="after_price">￥31999.0</span><span class="before_price">门店价：￥31999.0</span><span class="sale_num">售出:4</span></p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="data:images/list3.jpg"><div class="mui-media-body"><p class="title">【冲锋】乌干沙悦榕庄酒店 白羽教堂</p><p class="font_style">周一到周日 | 提前3天预约</p><p class="font_style"><span class="after_price">￥40888.0</span><span class="before_price">门店价：￥40888.0</span><span class="sale_num">售出:3</span></p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="data:images/list4.jpg"><div class="mui-media-body"><p class="title">【巴厘岛】乌干沙悦榕庄酒店 白羽教堂</p><p class="font_style">周一到周日 | 提前3天预约</p><p class="font_style"><span class="after_price">￥42888.0</span><span class="before_price">门店价：￥42888.0</span><span class="sale_num">售出:2</span></p></div></a></li><li class="mui-table-view-cell mui-media"><a href="javascript:;"><img class="mui-media-object mui-pull-left" src="data:images/list5.jpg"><div class="mui-media-body"><p class="title">【巴厘岛】乌干沙悦榕庄酒店 白羽教堂</p><p class="font_style">周一到周日 | 提前3天预约</p><p class="font_style"><span class="after_price">￥42888.0</span><span class="before_price">门店价：￥42888.0</span><span class="sale_num">售出:2</span></p></div></a></li></ul></div></div><!-- 引入外部js文件 --><script src="js/mui.js"></script><!-- 内嵌js文件 --><script type="text/javascript">mui.init()//获取当前文档中轮播图组件对象var sliderObj = mui("#slider");sliderObj.slider({interval: 1000});document.getElementById("yuyue").addEventListener("tap",function(){plus.device.dial(10086);});</script></body></html>

xingfudao_H5Plus.html代码

<!doctype html>
<html><head><meta charset="utf-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="css/mui.css" rel="stylesheet" /><style type="text/css">#first_ul {margin-top: 0px;}.mui-title {color: white;}.mui-bar-nav {background: pink;}.mui-content ul {margin-bottom: 10px;}</style></head><body><header class="mui-bar mui-bar-nav"><h1 class="mui-title">H5Plus</h1></header><div class="mui-content"><ul class="mui-table-view" id="first_ul"><li class="mui-table-view-cell" id="vibrate"><a class="mui-navigate-right">震动</a></li><li class="mui-table-view-cell" id="beep"><a class="mui-navigate-right">蜂鸣声</a></li></ul><ul class="mui-table-view" "><li class=" mui-table-view-cell" id="pick"><a class="mui-navigate-right">相册</a></li><li class="mui-table-view-cell" id="camera"><a class="mui-navigate-right">拍照</a></li><li class="mui-table-view-cell" id="contacts"><a class="mui-navigate-right">通讯录</a></li></ul><ul class="mui-table-view"><li class="mui-table-view-cell"><a class="mui-navigate-right">扫一扫</a></li><li class="mui-table-view-cell"><a class="mui-navigate-right">摇一摇</a></li></ul><!-- 相册图片呈现的位置--><div id="img"></div></div><script src="js/mui.js"></script><script type="text/javascript">mui.init();mui.plusReady(function() {//蜂鸣声document.getElementById("beep").addEventListener("tap", function() {plus.device.beep();});//震动document.getElementById("vibrate").addEventListener("tap", function() {plus.device.vibrate();});//通讯录document.getElementById("contacts").addEventListener("tap", function() {mui.openWindow({url: "xingfudao_contact.html",id: "xingfudao_contact"});});//相册document.getElementById("pick").addEventListener("tap", function() {//                     plus.gallery.pick(//                        function(path) {//                          console.log(path);//                             var allImgExt = ".jpg|.jpeg|.gif|.bmp|.png";  //图片文件类型//                            var extName = path.substring(path.lastIndexOf(".")).toLowerCase();//                             //将所选文件的扩展名截取并转为小写//                            if(allImgExt.indexOf(extName+"|")==-1){  //视频文件// document.getElementById("img").innerHTML = '<video src="'+path+'"controls=""auoplay="autoplay" width="100%"></video>';//                            }else{  //图片文件//                            document.getElementById("img").innerHTML = '<img src="' + path + '" width="100%" />';//                            }//                         },//                        function(e) {//                             alert("取消图片选择");//                        }, {//                          filter: "none"//                      }//                     );//多张图片或视频文件选择plus.gallery.pick(function(f) { //f表示存储多个文件路径的数组for (var i in f.files) {console.log(f.files[i]);var path = f.files[i];var allImgExt = ".jpg|.jpeg|.gif|.bmp|.png"; //图片文件类型var extName = path.substring(path.lastIndexOf(".")).toLowerCase();//将所选文件的扩展名截取并转为小写if (allImgExt.indexOf(extName + "|") == -1) { //视频文件document.getElementById("img").innerHTML = document.getElementById("img").innerHTML + '<video src="' +path +'"controls=""auoplay="autoplay" width="100%"></video>';} else { //图片文件document.getElementById("img").innerHTML = document.getElementById("img").innerHTML + '<img src="' + path +'" width="100%" />';}}},function(e) {alert("取消图片选择");},{filter: "none", multiple:true});});//拍照document.getElementById("camera").addEventListener("tap", function() {//获取摄像头对象var cmr = plus.camera.getCamera();var res = cmr.supportedImageResolutions[0];//分辨率var fmt = cmr.supportedImageFormats[0];//支持格式console.log("分辨率：" + res);console.log("格式：" + fmt);cmr.captureImage(function(rs){var path = "file://"+plus.io.convertLocalFileSystemURL(eval(JSON.stringify(rs)));console.log("图片路径："+path);//动态将图片在id为img容器中document.getElementById("img").innerHTML = '<img src="' + path + '" width="100%" />';}, function(e){alert(e.message+"取消拍照");},{resolution:res,format:fmt});});});</script></body></html>

部分主要代码已展示;

效果展示：

用到的JS得自己下来细细的学学。

打包发布：

下载：

趁着这次疫情，在家无聊，就跟着老师线上视频做了这个小项目，回顾了之前的知识，收获多多，继续加油！！

混合式开发APP项目——幸福到App相关推荐

（仿头条APP项目）1.app载入界面相关功能实现
app载入界面相关功能实现模块功能 1.设置页面布局 2.初始化视频播放 //控制是否跳到主界面private boolean isjump = false;private VideoView vi ...
基于android studio 安卓的汽车APP项目开发和设计
一项目介绍汽车APP项目包含了 APP客户端和后台管理系统,后台管理系统主要维护汽车的数据,比如汽车发布,汽车图集多图上传,汽车销售商,汽车类型,客户管理,系统管理等,APP客户端包含用户注册 ...
第五章手工测试之APP项目
文章目录第五章手工测试之APP项目一.APP概念 APP应用系统架构二.APP项目环境 1.开发环境 2.测试环境 3.预发布环境 4.生产环境 5.灰度发布 6.前台发布生产环境 7.发布平 ...
原生与H5混合式开发详解
声明:本教程不收取任何费用,欢迎转载,尊重作者劳动成果,不得用于商业用途,侵权必究!!! 目录一.前言二.原生与H5简介 1.浅析原生Android与HTML5 2.Native App的优缺点 ...
连接真机开发安卓(Android)移动app MUI框架完善购物车订单等页面——混合式开发（五）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
连接真机开发安卓(Android)移动app MUI框架——混合式开发（一）（敲详细）
从接触安卓开发的第一天起,我想我已经爱上了开发,哈哈哈,愿你我坚持下去的理由都是热爱,共勉!这几天没有更新博客,是因为我学习去了(没有相见的日子,我在努力哈哈哈).有想过用模拟器来运行的,但是模拟器太 ...
[省级大创项目]教育类APP的探索和实践——大学物理实验助手APP开发
立项依据(项目背景及研究现状500字以内) 通过网上问卷等形式做了前期调研,网上问卷由问卷星提供技术支持,共有348份答卷,问卷链接为很抱歉,此问卷(12931895)已暂停,不能填写!. (1)通过 ...
连接真机开发安卓(Android)移动app MUI框架添加购物车等——混合式开发（四）
这篇发得有点晚了,实属罪过! 以前高中月考的时候有幸进了一个学霸班坐了一个学霸的座位(应该是一位女学霸,桌子上面写着:如果不是因为生气而将事情变得更加严重,那么事情也不是那么的大了) 希望自己可以心情 ...
技术总监之路——App项目开发流程
App项目开发流程一. 需求阶段 1. 初期由leader或者项目责任人和PM沟通下阶段开发计划,确认需求的可行性和优先级等初步达成共识 2. 接下来PM提供详细UE文档(需求颗粒感尽可能小)发起三 ...

混合式开发APP项目——幸福到App

一、做什么?

幸福到APP

二、哪些功能？

三、所需技术

混合式开发APP项目——幸福到App相关推荐

最新文章

热门文章