一、做什麼?
幸福到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" οnfοcus="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="images/lb4.jpg">
</a>
</div>
<!-- 第一張 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/lb1.jpg">
</a>
</div>
<!-- 第二張 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/lb2.jpg">
</a>
</div>
<!-- 第三張 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/lb3.jpg">
</a>
</div>
<!-- 第四張 -->
<div class="mui-slider-item">
<a href="#">
<img src="images/lb4.jpg">
</a>
</div>
<!-- 額外增加的一個節點(循環輪播：最後一個節點是第一張輪播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="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;"> </span>
<span class="hs">婚紗拍攝</span>
<span class="more">
<a href="http://www.baidu.com">更多>></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="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="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="images/gg3.jpg" width="100%" />
<div class="mui-media-body">浪漫花海</div>
</a>
</li>
</ul>
</div>
<!-- 圖文列表 -->
<div id="mlist">
<div>
<span style="background: red;"> </span>
<span class="hs">婚宴酒店</span>
<span class="more">
<a href="http://www.baidu.com">更多>></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="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="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="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="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="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得自己下來細細的學學。
打包發佈：
下載：
趁着這次疫情，在家無聊，就跟着老師線上視頻做了這個小項目，回顧了之前的知識，收穫多多，繼續加油！！