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大特性解读
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章