MUI 之混合APP開發
課程目標
- app 開發簡介
- mui 小試牛刀
- 經典 app 佈局實現
- Android 真機調試
- 子頁面建立（1. div 2. webview）
- tab 欄切換
- 手機相冊使用
- 手機攝像頭使用
- 相冊圖片上傳服務器
- 下拉加載
- 上拉加載
- 應用退出實現
- 官方案例包分析
- 應用程序雲端打包與發佈
app 開發簡介
參考連接： juejin.im/post/5d999d…javascript
MUI 簡介
最接近原生APP體驗的高性能前端框架css
官網： dev.dcloud.net.cn/mui/html
文檔： dev.dcloud.net.cn/mui/ui/前端
經典 app 佈局實現
Android 真機調試
官網： sj.360.cn/index.htmlhtml5
子頁面建立（1. div 2. webview）
div-mui-control-content 方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">標題</h1>
</header>
<div class="mui-content">
<div class="mui-control-content mui-active" id="sub1">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
<div class="mui-control-content" id="sub2">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
幸福2
<p class="mui-ellipsis">能和心愛的人一塊兒睡覺，是件幸福的事情；但是，打呼嚕怎麼辦？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要這樣一間小木屋，夏天挫冰吃瓜，冬天圍爐取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
</div>
<div class="mui-control-content" id="sub3">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
幸福3
<p class="mui-ellipsis">能和心愛的人一塊兒睡覺，是件幸福的事情；但是，打呼嚕怎麼辦？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要這樣一間小木屋，夏天挫冰吃瓜，冬天圍爐取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
</div>
<div class="mui-control-content" id="sub4">
<ul class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
幸福4
<p class="mui-ellipsis">能和心愛的人一塊兒睡覺，是件幸福的事情；但是，打呼嚕怎麼辦？</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
木屋
<p class="mui-ellipsis">想要這樣一間小木屋，夏天挫冰吃瓜，冬天圍爐取暖.</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-right" src="http://placehold.it/40x30">
<div class="mui-media-body">
CBD
<p class="mui-ellipsis">烤爐模式的城，到黃昏，如同打翻的調色盤通常.</p>
</div>
</a>
</li>
</ul>
</div>
</div>
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="#sub1">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" href="#sub2">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item" href="#sub3">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item" href="#sub4">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
</html>
複製代碼
文檔： dev.dcloud.net.cn/mui/window/…java
webview
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">技術棧</h1>
</header>
<!--這裏負責顯示子頁面-->
<nav class="mui-bar mui-bar-tab">
<a class="mui-tab-item mui-active" href="sub1.html">
<span class="mui-icon mui-icon-home"></span>
<span class="mui-tab-label">首頁</span>
</a>
<a class="mui-tab-item" href="sub2.html">
<span class="mui-icon mui-icon-phone"></span>
<span class="mui-tab-label">電話</span>
</a>
<a class="mui-tab-item" href="sub3.html">
<span class="mui-icon mui-icon-email"></span>
<span class="mui-tab-label">郵件</span>
</a>
<a class="mui-tab-item" href="sub4.html">
<span class="mui-icon mui-icon-gear"></span>
<span class="mui-tab-label">設置</span>
</a>
</nav>
</body>
<script type="text/javascript">
var pages = ['sub1.html', 'sub2.html', 'sub3.html', 'sub4.html'];
var showStyle = {
top: '44px', // 頂部的距離
bottom: '50px', // 底部的距離
}
// 當硬件設備加載完畢後，而後建立 webview 子頁面
mui.plusReady(function() {
var cWebView = plus.webview.currentWebview();
var subpage = '';
pages.forEach(function(item, index) {
console.log(item);
subpage = plus.webview.create('pages/' + item, item, showStyle);
subpage.hide();
cWebView.append(subpage); // 將建立的子頁面追加到當前的主頁面
})
// 設置第一個頁面在 webview 顯示
plus.webview.show(pages[0]);
// tab 欄目切換
mui('.mui-bar-tab').on('tap', 'a', function(e) {
var src = this.getAttribute('href');
plus.webview.show(src, 'fade-in', 500); // 子頁面淡入
});
})
</script>
</html>
複製代碼
頁面傳值
- 父頁面
mui.ready(function() {
mui('.mui-table-view-cell').on('tap', 'a', function() {
// mui.toast('打開頁面');
var newsId = this.getAttribute('data-id');
console.log( newsId );
mui.openWindow({
url: 'detail.html',
id: 'detail.html',
// 自定義擴展參數，能夠用來處理頁面間傳值
extras: {
newsId
},
show: {
autoShow: true, //頁面loaded事件發生後自動顯示，默認爲true
aniShow: 'slide-in-right', //頁面顯示動畫，默認爲」slide-in-right「；
duration: 100 //頁面動畫持續時間，Android平臺默認100毫秒，iOS平臺默認200毫秒；
},
waiting: {
autoShow: true, //自動顯示等待框，默認爲true
title: '正在加載...', //等待對話框上顯示的提示內容
options: {
width: '200px', //等待框背景區域寬度，默認根據內容自動計算合適寬度
height: '200px', //等待框背景區域高度，默認根據內容自動計算合適高度
}
}
});
});
})
複製代碼
- 子頁面
mui.plusReady(function () {
var cw = plus.webview.currentWebview();
var newsId = cw.newsId;
console.log(newsId);
document.getElementById("container").innerHTML = newsId;
})
複製代碼
手機相冊使用
文檔： www.html5plus.org/doc/h5p.htm…web
// 單選
document.getElementById('btnPick').addEventListener('tap',function () {
plus.gallery.pick(function(path){
console.log(path);
document.getElementById('container').innerHTML = `<img src="${path}" width="100" height="100" />`;
})
})
// 多選
document.getElementById('btnPicks').addEventListener('tap',function () {
plus.gallery.pick(function(path){
// 多選圖片格式： {"files":["file:///storage/emulated/0/tencent/MicroMsg/WeiXin/mmexport1568381495006.jpg"]}
console.log(JSON.stringify(path));
var _imgs = ``;
path.files.forEach((item, index) => {
_imgs += `<img src="${item}" width="100" height="100" />`
})
document.getElementById('container').innerHTML = _imgs;
}, function(e){
console.log(e);// 獲取失敗的回調
}, {
filter:'image',
multiple: true, // 照片多選
})
})
複製代碼
攝像頭調取
調用系統的攝像頭拍照顯示bash
mui.plusReady(function() {
var btn = document.getElementById('btn');
btn.addEventListener('tap', function() {
// alert(1);
var cm = plus.camera.getCamera(1);
cm.captureImage(function(path) {
var imgPath = 'file://' + plus.io.convertLocalFileSystemURL(path);
document.getElementById('container').innerHTML = `<img src="${imgPath}" width="100" height="100" />`;
})
})
})
複製代碼
相冊圖片上傳服務器
文檔： www.html5plus.org/doc/zh_cn/u…前端框架
下拉加載
文檔： dev.dcloud.net.cn/mui/pulldow…服務器
應用退出實現
文檔： dev.dcloud.net.cn/mui/window/…
思路：在安卓機器裏面，若是連續在1s內按下了兩次返回，則爲退出
/* mui.back 默認是關閉當前窗體，可是用戶有多是退出 在mui框架中，有三種操做會觸發頁面關閉（執行mui.back方法）： 點擊包含.mui-action-back類的控件 在屏幕內，向右快速滑動 Android手機按下back按鍵*/
mui.back = function() {
var first = null;
if(!first) {
// 若是是第一次按下，記錄按下的時間
first = new Date().getTime();
mui.toast('再按一次完成退出！')
setTimeout(function() {
// 若是用戶在1s以內沒有作操做，應該清除以前的操做。
first = null;
}, 1000)
} else {
// 若是在1s以內有再次按下，則肯定爲退出操做，則調用 plus.runtime.quit(); 完成退出
if(new Date().getTime() - first < 60) {
plus.runtime.quit();
}
}
}
複製代碼
相關文章
- 1. 混合app開發
- 2. 混合 APP 開發(Hybrid App)
- 3. MUI 混合開發移動app應用開發 --- app版本升級
- 4. mui開發app之webview
- 5. 混合開發
- 6. android+hbuilder(mui)+flutter 混合開發
- 7. 混合app開發介紹
- 8. Hybird App混合開發
- 9. vue+cordova混合開發app
- 10. vue+cordova開發混合app
- 更多相關文章...
- • XSD 混合內容 - XML Schema 教程
- • ionic 創建 APP - ionic 教程
- • PHP開發工具
- • JDK13 GA發佈：5大特性解讀
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章