官方demo的选项卡+下拉刷新采用mui.pullToRefresh.js+mui.pullToRefresh.material.js两个js插件来制作，这两个插件感觉像是官方写的，但是为啥接口参数非常相似但又不同，非常坑
下面是改写部分(两个demo的DOM结构一致)
使用插件的下拉刷新初始化写法(来自官方demo)

mui初级入门系列教程

mui初级入门教程（一）— 小白入手mui的学习路线
mui初级入门教程（二）— html5+ webview 底部栏用法详解
mui初级入门教程（三）— html5+ XMLHttpRequest 与mui ajax用法详解
mui初级入门教程（四）— 再谈webview，从小白变“大神”！
mui初级入门教程（五）— 聊聊即时通讯（IM），基于环信 web im SDK
mui初级入门教程（六）— 模板页面实现原理及多端适配指南
mui初级入门教程（七）— 基于native.js的文件系统管理功能实现

mui-demo 仓库

easemobIM: 环信webim的demo
tabbar-div-animation: div模式带动画切换的选项卡
tabbar-with-popover：解决弹出层被遮挡的问题
timeline：时间轴效果
numberbox：倍率为2的范围可控的数字增减器
popover-control-byjs：js控制的popover
slider：加载网络图片的图片轮播
share: 使用图片打开分享（TODO）
piker: 选择器
preload：预加载注意事项
tabbar-webview-withleftmenu: 带侧滑的webview模式的tabbar
vue-mui: 基于Vue.js的mui tabbar演示例子
Statusbar：沉浸式状态栏
tab-with-segmented-control-vertical-uprefresh：左侧选项卡-div模式增加上拉加载功能
contenteditable：div contenteditable可编辑模式下【获得输入框键盘焦点】和【光标移动到最后】
pullrefresh-dtpiker：下拉刷新与时间选择器冲突的解决方案
calendar：日历组件
template：模板页面实现原理
tabbar-with-iframe iframe兼容处理tababr的方法
njs-io：基于native.js的文件系统管理功能实现
oauth：判断本地是否安装客户端,进行第三方登录
Audio: 录音转dataURI,dataURI转语音文件播放

mui文档番外版

mui组件通用CSS类
mui组件自定义样式
grid(栅格系统)
页面传参
template(模板页面)
input(输入表单)
文件IO

开发常见问题

1.如何获取文件的数据
2.打开系统wifi设置页面
3.沉浸式状态栏设置方法
4.上拉刷新下拉加载的启用禁止方法
5.如何设置相片分辨率
6.如何获取手机应用列表
7.可折叠列表的两个问题
8.5+webview与android原生Activity
9.获取APP系统权限和打开权限设置
10.录音文件与Base64编码相互转换的方法

DOM操作简化版

https://github.com/zhaomenghuan/mjs

你们的例子：
mui.ajax('http://server-name/login.php',{
data:{
username:'username',
password:'password'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
headers:{'Content-Type':'application/json'}
success:function(data){
//服务器返回响应，根据响应结果，分析是否登录成功；
...
},
error:function(xhr,type,errorThrown){
//异常处理；
console.log(type);
}
});

推荐国内首推的跨平台移动APP开发专业培训机构-东翌学院是Dcloud的合作培训机构，跨平台APP开发整体课程在线直播+课程源码+全套视频，最新最全的APP开发，HB和MUI的全套视频，零基础都可以学习，更有高级进修课程，30天最快速的开发跨平台APP！
咨询报名QQ：2971611409 Tel：17090057793
欢迎有意向学习的朋友加好友咨询！谢谢Dcloud提供这么好的平台！

注意：本文为5+App的引导页制作方法，uni-app另行制作，推荐使用nvue制作，也可以参考插件市场已经封装的插件https://ext.dcloud.net.cn/plugin?id=192

启动页和引导页

首先澄清一下“启动界面”（splash）和“引导页”（guide）的概念，因为许多刚接触App开发的朋友会搞不清楚这两者分别是什么。
以Hello mui为例，第一次打开的时候是这样的：

示例实现

切回正题，一起来看一下类Hello mui这种引导页如何利用MUI&HTML5+进行制作。

App入口页

按照Hello mui这种启动页的逻辑：首次启动展示引导页，之后启动不再展示。那么就意味着，我们需要一个标识来确定，App是否已经启动过。
通过5+的storage模块的方法，我们可以在本地存储一个key来做为已经启动过App的标识。那么，我们在入口这里，就可以读取这个key，来决定是否展示引导页。

var launchFlag = plus.storage.getItem("launchFlag");  
if(launchFlag) {  
    mui.openWindow({  
        url: "main.html",  
        id: "main",  
        extras: {  
            mark: "index" //额外的参数，仅仅是个标识，实际开发中不用；  
        }  
    });  
} else {  
    mui.openWindow({  
        url: "guide.html",  
        id: "guide"  
    });  
}  

手动关闭splash

实际开发中，通常需要设置手动关闭splash（HBuilder7.1版本后启动界面不调用此方法超过6秒后会自动关闭），来控制App内容展示的时机。防止入口判定逻辑未结束就进行展示，造成白屏。

引导页

利用mui的slider组件，来制作一套引导信息。
如果使用图片的话，建议大家按照iPhone6 Plus的尺寸制作（其实就是往大了做），然后利用5+提供的方法计算屏幕正确的宽高，设置图片的宽高来撑满屏幕。相关文档及示例：
Screen模块管理设备屏幕信息
获取系统状态栏高度
深入理解高度。获取屏幕、webview、软键盘高度

var sh = plus.navigator.getStatusbarHeight();  
var h = plus.screen.resolutionHeight;  
var w = plus.screen.resolutionWidth;  
var imgs = document.querySelectorAll(".guide-img");  
for(var i = 0, len = imgs.length; i < len; i++) {  
    imgs[i].style.height = (h - sh) + "px";  
    imgs[i].style.width = w + "px";  
}  

在最后一个引导界面提供一个App主界面入口，也就是“开始体验”这种按钮。点击“开始体验”的同时，设置表示App已经启动过的标识。

plus.storage.setItem("launchFlag", "true");  

主界面

从第二次开始，启动应用直接进入主界面。

在主界面，额外提供了一个清除已经启动信息并重启应用的功能，方便大家进行测试。

广告页

广告页其实也可以算是guide，只不过它引导的是广告信息。广告页只会在适当的时机出现，这个时机是由后端来决定的（通常情况下）。
广告页制作的逻辑：
1、入口处向后端发起请求，来得知是否存在广告；
2、若存在，则同时获取广告内容等信息；
3、广告内容按照固定的模板进行渲染，完成后关闭splash；
4、广告页持续特定的时间（通常就3-5秒）或提供按钮关闭，进入App主界面。

源码

附上源码，真机运行即可。

 之前用H5的canvas来获取，但是只有Android可用，IOS不行，后来说用文件读取的形式，发现很慢，也麻烦，最后用bitmap，封装好的，直接用，两个平台都兼容。  

----分享一下^:^

function GetBase64Code(path) //path绝对路径  
{  
        var bitmap = new plus.nativeObj.Bitmap("test"); //test标识谁便取  
        // 从本地加载Bitmap图片  
        bitmap.load(path,function(){  
            var base4=bitmap.toBase64Data();  
            var datastr=base4.split(',',3)  
            if(datastr.length>1)  
            {  
               pics.push(datastr[1]);  
            }else  
            {  
               pics.push(datastr[0]);  
            }  
            console.log('加载图片：'+base4);  
        },function(e){  
            console.log('加载图片失败：'+JSON.stringify(e));  
        });  
}

全职承接 APP，thinkphp 接口+后台，完整项目 ！保证质量 ！

QQ:2714055313，439396545！

两个QQ都可以联系！

关于选项卡切换，相信大家都不陌生。hello mui中提供了多种选项卡切换的实现方式，不过大体分为div模式（单页）以及webviedw模式（多个页面）。div模式中又提供了可左右拖动实现切换的模式，如图：

在实际开发中，数据量只会多不会少，因此我们通常都会采用webview模式选项卡。与此同时，许多同学依旧希望能够实现滑动来实现选项卡的切换。就像这样：

可能大家会说，这个滑动并不是那么灵敏。那是因为我控制的角度范围较小（更加精确方便的范围还在进一步测试），实际开发中大家可以根据自己的需求来修改这个范围。
一、main.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="http://ask.dcloud.net.cn/css/mui.min.css" rel="stylesheet" />  
    </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" data-index="0">  
                <span class="mui-icon mui-icon-home"></span>  
                <span class="mui-tab-label">首页</span>  
            </a>  
            <a class="mui-tab-item" data-index="1">  
                <span class="mui-icon mui-icon-phone"></span>  
                <span class="mui-tab-label">电话</span>  
            </a>  
            <a class="mui-tab-item" data-index="2">  
                <span class="mui-icon mui-icon-email"></span>  
                <span class="mui-tab-label">邮件</span>  
            </a>  
            <a class="mui-tab-item" data-index="3">  
                <span class="mui-icon mui-icon-gear"></span>  
                <span class="mui-tab-label">设置</span>  
            </a>  
        </nav>  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                /**  
                 * 当前窗口对象，即父窗口；  
                 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview  
                 */  
                var self = plus.webview.currentWebview();  
                // 子窗口地址数组  
                var subpages = ["home.html", "phone.html", "email.html", "gear.html"];  
                // 子窗口样式  
                var subStyles = {  
                    top: "45px",  
                    bottom: "50px"  
                };  
                // 子窗口数量  
                var subLen = subpages.length;  
                // 子窗口对象数组  
                var subWvs = [];  
                // 标题栏  
                var title = document.querySelector(".mui-title");  
                // 底部选项  
                var tabs = document.querySelectorAll(".mui-tab-item");  
                // 底部文字  
                var labels = document.querySelectorAll(".mui-tab-label");  
                // 当前页面索引，初始化为0；  
                var activeIndex = 0;  
                // 目标页面索引，初始化为当前页面索引；  
                var targetIndex = activeIndex;  
                // 创建子页面  
                for(var i = 0; i < subLen; i  ) {  
                    /**  
                     * 创建窗口对象，并将索引做为额外的参数传递；  
                     * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create  
                     */  
                    var subWv = plus.webview.create(subpages[i], cutWebviewId(subpages[i]), subStyles, {  
                        index: i  
                    });  
                    // 窗口对象添加至数组  
                    subWvs.push(subWv);  
                    if(i > 0) {  
                        /**  
                         * 隐藏非第一页的窗口对象  
                         * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.hide  
                         */  
                        subWv.hide("none");  
                    }  
                    /**  
                     * 向父窗口添加子窗口  
                     * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.append  
                     */  
                    self.append(subWv);  
                }  
                // 底部选项卡点击切换事件  
                for(var j = 0, jlen = tabs.length; j < jlen; j  ) {  
                    tabs[j].addEventListener("tap", function() {  
                        // 获取当前结点的索引  
                        targetIndex = this.getAttribute("data-index");  
                        // 转换为number类型  
                        targetIndex = parseInt(targetIndex, 10);  
                        if(targetIndex == activeIndex) {  
                            return;  
                        }  
                        // 切换页面  
                        switchPage("tap", activeIndex, targetIndex);  
                    });  
                }  
                // 子页面滑动切换事件  
                window.addEventListener("swipe_event", function(event) {  
                    // 获取方向以及索引  
                    var direction = event.detail.direction;  
                    activeIndex = event.detail.index;  
                    if(direction == "left") {  
                        // 如果是最后一个页面，则不做左滑切换；  
                        if(activeIndex == subLen - 1) {  
                            console.log("最右边一页了");  
                            return;  
                        }  
                        // 目标页面的索引为后面一位  
                        targetIndex = activeIndex   1;  
                    } else {  
                        // 如果是第一个页面，则不做右滑切换；  
                        if(activeIndex == 0) {  
                            console.log("最左边一页了");  
                            return;  
                        }  
                        // 目标页面的索引为前面一位  
                        targetIndex = activeIndex - 1;  
                    }  
                    // 切换页面  
                    switchPage("switch", activeIndex, targetIndex);  
                });  

                /**  
                 * 切换页面  
                 * @param {String} _event 事件类型  
                 * @param {Number} _active 当前页面索引  
                 * @param {Number} _target 目标页面索引  
                 */  
                function switchPage(_event, _active, _target) {  
                    /**  
                     * 目标页面展示  
                     * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.show  
                     */  
                    subWvs[_target].show("fade-in");  
                    // 顶部文字替换  
                    title.innerText = labels[_target].innerText;  
                    // 如果是滑动事件，则手动切换高亮选项；  
                    if(_event == "switch") {  
                        tabs[_active].classList.remove("mui-active");  
                        tabs[_target].classList.add("mui-active");  
                    }  
                    // 之前展示的页面隐藏  
                    subWvs[_active].hide("none");  
                    // 更新当前页索引  
                    activeIndex = _target;  
                }  
            });  

            /**  
             * 截取url地址，获取窗口的id；  
             * @param {String} url html文件的路径  
             * @param {String} wvId webviewObject的id  
             */  
            function cutWebviewId(url) {  
                var startIndex = url.lastIndexOf("/");  
                var endIndex = url.lastIndexOf(".html");  
                var wvId = url.substring(startIndex   1, endIndex);  
                return wvId;  
            }  
        </script>  
    </body>  

</html>

明确了我们要干什么，我们来看下切换的这个函数：

/**  
 * 切换页面  
 * @param {String} _event 事件类型  
 * @param {Number} _active 当前页面索引  
 * @param {Number} _target 目标页面索引  
 */  
function switchPage(_event, _active, _target) {  
    /**  
     * 目标页面展示  
     * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.show  
     */  
    subWvs[_target].show("fade-in");  
    // 顶部文字替换  
    title.innerText = labels[_target].innerText;  
    // 如果是滑动事件，则手动切换高亮选项；  
    if(_event == "switch") {  
        tabs[_active].classList.remove("mui-active");  
        tabs[_target].classList.add("mui-active");  
    }  
    // 之前展示的页面隐藏  
    subWvs[_active].hide("none");  
    // 更新当前页索引  
    activeIndex = _target;  
}  

_event代表切的方式，_active代表当前展示的窗口索引，_target代表目标窗口的索引。
首先将目标窗口show出来，然后替换顶部标题的文字内容。然后判定下切的方式，如果是滑动切换，我们需要自己来对classList进行操作，完成选项卡高亮的转换。最后，我们需要把之前展示的选项卡隐藏掉，并且把当前窗口的索引值赋给中间量。
二、sub.js
所有的子页面都引入这个JS文件，内容如下：

mui.init();  
mui.plusReady(function() {  
    // 获取当前窗口对象  
    var self = plus.webview.currentWebview();  
    // 读取传递过来的参数  
    var index = self.index;  
    /**  
     * 获取父窗口对象  
     * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.parent  
     */  
    var parent = self.parent();  
    // 左滑事件  
    document.addEventListener("swipeleft", function(event) {  
        var angle = event.detail.angle;  
        angle = Math.abs(angle);  
        /**  
         * 控制滑动的角度，为避免误操作，可自定义限制滑动角度；  
         */  
        if(angle > 175 && angle < 185) {  
            parentEvent(parent, index, "left");  
        }  
    });  
    // 右滑事件  
    document.addEventListener("swiperight", function(event) {  
        var angle = event.detail.angle;  
        angle = Math.abs(angle);  
        /**  
         * 控制滑动的角度，为避免误操作，可自定义限制滑动角度；  
         */  
        if(angle < 4) {  
            parentEvent(parent, index, "right");  
        }  
    });  
});  

/**  
 * 触发父窗口自定义事件  
 * @param {Object} wvobj 目标窗口对象  
 * @param {Number} index 索引值  
 * @param {String} direction 方向  
 */  
function parentEvent(wvobj, index, direction) {  
    /**  
     * 触发自定义事件  
     * http://dev.dcloud.net.cn/mui/event/#customevent  
     */  
    mui.fire(wvobj, "swipe_event", {  
        direction: direction,  
        index: index  
    });  
}  

内容简单明了，就是监听左滑和右滑事件，然后去触发父窗口的自定义切换事件。关键点在于event.detail.angle，这个是mui自己封装的一个属性，用来表示滑动的角度（具体的值，大家可以自己滑动时候多测试测试）。大家也可以尝试下，不对滑动角度进行控制，切换会过于灵敏，影响到其他正常的操作。
文笔功力有限，有哪些地方不是很明了，还请见谅，也希望能提出您宝贵的意见，我会继续改进。
最后，附上源码，真机运行即可。

推荐国内首推的跨平台移动APP开发专业培训机构-东翌学院是Dcloud的合作培训机构，跨平台APP开发整体课程在线直播+课程源码+全套视频，最新最全的APP开发，HB和MUI的全套视频，零基础都可以学习，更有高级进修课程，30天最快速的开发跨平台APP！
咨询报名QQ：2971611409 Tel：17090057793上课链接
欢迎有意向学习的朋友加好友咨询！谢谢Dcloud提供这么好的平台！

图片上传，是现在许多手机应用避不开的功能。常见的图片上传，是通过手机相册，或者摄像头拍照来完成对图片的选择。
就像下面的图这样：

<!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.min.css" rel="stylesheet" />  
        <style type="text/css">  
            .img-content {  
                text-align: center;  
            }  

            #img_view {  
                width: 300px;  
                height: 300px;  
            }  
            .camera-div {  
                margin-top: 20px;  
            }  
        </style>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <h1 class="mui-title">相机</h1>  
        </header>  
        <div class="mui-content">  
            <div class="img-content">  
                <!--做为预览图片的元素-->  
                <img src="img/shuijiao.jpg" id="img_view" />  
                <div><span>点击上图选择图片</span></div>  
            </div>  
            <div class="camera-div">  
                <button type="button" class="mui-btn mui-btn-yellow mui-btn-block" id="get_camera">拍照</button>  
            </div>  
        </div>  
        <script src="js/mui.min.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                var cameraUrl = "_doc/camera/"; //拍照后图片保存的地址  
                // 调用摄像头事件  
                document.getElementById("get_camera").addEventListener("tap", function() {  
                    /**  
                     * 获取摄像头对象  
                     * http://www.html5plus.org/doc/zh_cn/camera.html#plus.camera.getCamera  
                     */  
                    var camera = plus.camera.getCamera();  
                    /**  
                     * 进行拍照操作  
                     * http://www.html5plus.org/doc/zh_cn/camera.html#plus.camera.Camera.captureImage  
                     */  
                    camera.captureImage(function(captureFile) {  
                        // 拍照完成后，进入选择照片的页面；  
                        showImages(cameraUrl);  
                    }, function(error) {  
                        console.log("拍照错误，错误编码：" + error.code);  
                        console.log("拍照错误，错误描述信息：" + error.message);  
                    }, {  
                        filename: cameraUrl  
                    });  
                });  
                var imgEl = document.getElementById("img_view"); //img元素节点  
                // 点击图片，查看对应目录下的图片；这里只是为了演示读取文件，实际开发中可以参考；  
                imgEl.addEventListener("tap", function() {  
                    showImages(cameraUrl);  
                });  
                /**  
                 * 自定义事件，预览选择好的图片；  
                 * http://dev.dcloud.net.cn/mui/event/#customevent  
                 */  
                window.addEventListener("change_image", function(event) {  
                    var imgUrl = event.detail.imgUrl;  
                    imgEl.src = imgUrl;  
                });  
            });  

            /**  
             * 展示指定目录下的图片  
             * @param {String} targetUrl 目录地址  
             */  
            function showImages(targetUrl) {  
                // 第一步，获取目标目录对象；  
                /**  
                 * 通过URL参数获取目录对象或文件对象  
                 * http://www.html5plus.org/doc/zh_cn/io.html#plus.io.resolveLocalFileSystemURL  
                 */  
                plus.io.resolveLocalFileSystemURL(targetUrl, function(entry) {  
                    // 第二步，创建读取目录的对象；  
                    /**  
                     * 创建目录读取对象  
                     * http://www.html5plus.org/doc/zh_cn/io.html#plus.io.DirectoryEntry.createReader  
                     */  
                    var reader = entry.createReader();  
                    // 第三步，读取目录下的对象；  
                    /**  
                     * 获取当前目录中的所有文件和子目录  
                     * http://www.html5plus.org/doc/zh_cn/io.html#plus.io.DirectoryReader.readEntries  
                     */  
                    reader.readEntries(function(subFiles) {  
                        var imgArr = [];  
                        // 第四步，获取目录下对象的路径；  
                        /**  
                         * 将读取到的文件的路径，添加至数组中；  
                         * http://www.html5plus.org/doc/zh_cn/io.html#plus.io.DirectoryEntry.fullPath  
                         */  
                        for(var i = 0, len = subFiles.length; i < len; i++) {  
                            imgArr.push(subFiles[i].fullPath);  
                        }  
                        // 第五步，去查看摄像头拍摄的图片；  
                        /**  
                         * 打开预览图片的页面，并将图片的地址传过去；  
                         * http://dev.dcloud.net.cn/mui/window/#openwindow  
                         */  
                        mui.openWindow({  
                            url: "camera_gallery.html",  
                            id: "camera_gallery",  
                            extras: {  
                                imgArr: imgArr  
                            }  
                        });  
                    }, function(error) {  
                        console.log("文件操作失败信息：" + error);  
                    });  
                }, function(error) {  
                    console.log("读取本地目录失败，失败信息：" + error);  
                });  
            }  
        </script>  
    </body>  

</html>

大家注意到第42行的变量cameraUrl，这个变量的值，就是我们应用自己相册的路径啦。
调用摄像头逻辑：
1、点击“拍照”按钮，创建摄像头对象；
2、摄像头拍照，在拍照方法的回调中，我们通过相册的路径访问到相册下的文件；
3、创建目录读取对象，用于读取目录下的文件及子目录；
4、获取当前目录下的文件，并将文件系统的绝对路径取出，放置在一个数组中；
5、打开新窗口，并将文件路径的数组传过去。
直接打开本应用相册逻辑：
与上面不同的地方，就是省去了打开摄像头的操作，直接根据目录路径访问即可。
二、camera_gallery.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.min.css" rel="stylesheet" />  
        <style type="text/css">  
            .mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-object {  
                height: 150px;  
            }  

            .mui-grid-view.mui-grid-9 .mui-media .mui-icon {  
                position: absolute;  
                right: 15px;  
                top: 15px;  
                z-index: 1;  
                color: yellow;  
            }  

            #sure_img {  
                margin-top: 10px;  
            }  
        </style>  
    </head>  

    <body>  
        <header class="mui-bar mui-bar-nav">  
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
            <a class="mui-pull-right" id="sure_img">确定</a>  
            <h1 class="mui-title">相机相册</h1>  
        </header>  
        <div class="mui-content">  
            <ul class="mui-table-view mui-grid-view mui-grid-9">  
                <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">  
                    <img class="mui-media-object" src="../../img/shuijiao.jpg">  
                    <span class="mui-icon mui-icon-star-filled"></span>  
                </li>-->  
            </ul>  
        </div>  
        <script src="js/mui.min.js"></script>  
        <script src="js/mui.lazyload.js"></script>  
        <script src="js/mui.lazyload.img.js"></script>  
        <script type="text/javascript">  
            mui.init();  
            mui.plusReady(function() {  
                var currentNode = null; //当前选中的元素节点对象  
                var targetImage = ""; //选中的图片路径  
                /**  
                 * 获取当前窗口对象  
                 * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.currentWebview  
                 */  
                var self = plus.webview.currentWebview();  
                var imgArr = self.imgArr;  
                /**  
                 * 动态拼接，图文表格；  
                 * http://dcloud.io/hellomui/examples/slider-table-default.html  
                 * 使用懒加载；  
                 * http://dcloud.io/hellomui/examples/lazyload-image.html  
                 */  
                /**  
                 * 懒加载比较关键的三个点：  
                 * 1、引入mui.lazyload.js以及mui.lazyload.img.js文件；  
                 * 2、img标签中使用data-lazyload来存储实际要展示的图片路径；  
                 * 3、用mui选择器获取文档节点，进行懒加载初始化操作；  
                 */  
                var html = "";  
                for(var i = 0, len = imgArr.length; i < len; i++) {  
                    html += '<li class="mui-table-view-cell mui-media mui-col-xs-6">' +  
                        '<img class="mui-media-object" data-lazyload="' + imgArr[i] + '" /></li>';  
                }  
                // 拼接目标节点的内容  
                document.querySelector(".mui-table-view").innerHTML = html;  
                // 懒加载初始化  
                mui(document).imageLazyload({  
                    placeholder: "img/text.png"  
                });  
                /**  
                 * 添加选择图片事件  
                 */  
                mui(".mui-table-view").on("tap", ".mui-table-view-cell", function() {  
                    // 第一步，替换选中图片路径  
                    targetImage = this.querySelector(".mui-media-object").src;  
                    // 第二步，判断是否已经有图片被选中；若有，则移除之前的星星，因为此例子仅做单选；  
                    if(currentNode) {  
                        currentNode.removeChild(currentNode.querySelector("span"));  
                    }  
                    // 第三步，创建一个span元素节点，在图片右上角添加一个黄色的填充星星；  
                    var spanNode = document.createElement("span");  
                    spanNode.classList.add("mui-icon");  
                    spanNode.classList.add("mui-icon-star-filled");  
                    this.appendChild(spanNode);  
                    // 第四步，替换当前被选中节点对象；  
                    currentNode = this;  
                });  
                // 确定选择的图片  
                document.getElementById("sure_img").addEventListener("tap", function() {  
                    if(targetImage) {  
                        /**  
                         * 获取当前窗口的创建者  
                         * http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.opener  
                         */  
                        var opener = self.opener();  
                        /**  
                         * 触发目标窗口对象的事件，替换图片；  
                         * http://dev.dcloud.net.cn/mui/event/#customevent  
                         */  
                        mui.fire(opener, "change_image", {  
                            imgUrl: targetImage  
                        });  
                        // 返回上一页  
                        mui.back();  
                    } else {  
                        mui.toast("请选择图片");  
                    }  
                });  
            });  
        </script>  
    </body>  

</html>  

这就是我们应用自己的相册咯，这里仅仅做单选的示例，多选大家自己扩展咯，道理是一样的。
1、获取到上一级传过来的所有文件的地址，动态拼接出所有的图片；
2、用mui的事件绑定对图片进行批量事件绑定：在我们点击图片的时候，右上角添加一颗小星星用来标记当前图片；
3、选好图片了，点击右上角的“确认”，并利用自定义事件将选中的图片地址传到上一级页面，替换之前预览的图片；
4、之后你想对这个图片干什么，就看自己的业务需求了。
最后，附上源码，真机运行即可。

需求描述

在当前App中打开一个外部网站，并在外部网站可以进行前进、后退以及立即返回当前webview等操作。

需求分析

依据上述需求的描述，可以理解为该App需要一个内置浏览器，用于访问外部网站。为什么会这样理解呢？
做为一个程序猿（媛），尤其是前端程序猿（媛），对浏览器一定不会陌生。常规的浏览器，可以大致两大部分：菜单栏和页面展示区。
再回到之前的需求描述部分，前进、后退以及返回App功能，可以当作菜单栏；外部网站部分，当作页面展示区。

实现思路

mui提供了父子页面的思路来解决卡头卡尾页面的不流畅，同样可以利用这种结构来实现这个简单的内置浏览器。
父页面作为菜单栏，子页面作为页面展示区。并且通过父页面的元素，来控制子页面中展示部分的切换以及父页面的关闭。

功能实现

下面以访问百度为例，制作一个简单的内置浏览器。

创建浏览器

其实，mui中的父子页面形式，是通过HTML5+API提供的获取当前窗口的WebviewObject对象、创建新的Webview窗口，以及在Webview窗口中添加子窗口实现的。

var self = plus.webview.currentWebview();  
var baiduWV = plus.webview.create("http://www.baidu.com", "baidu", {  
    top: "44px",  
    bottom: 0  
});  
self.append(baiduWV);  

页面前进

HTML5+API提供了查询Webview窗口是否可前进以及前进到上次加载的页面方法，依据这两个方法控制子窗口中页面的前进。

baiduWV.canForward(function(event) {  
    var canForward = event.canForward;  
    if(canForward) {  
        baiduWV.forward();  
    } else {  
        alert("不能前进！");  
    }  
});  

页面后退

HTML5+API相应的，也提供了查询Webview窗口是否可后退以及后退到上次加载的页面方法，依据这两个方法控制子窗口中页面的后退。

baiduWV.canBack(function(event) {  
    var canBack = event.canBack;  
    if(canBack) {  
        baiduWV.back();  
    } else {  
        alert("到头了，要关闭页面了！");  
        // 执行重写前的back方法  
        old_back();  
    }  
});  

关闭浏览器

关闭就相对简单了，直接直接mui.back()就可以了，或者更方便得方法就是给元素添加.mui-action-back类。

<h1 class="mui-title mui-action-back" id="close_page">直接关闭当前页面</h1>  

示例效果

源码

附上源码，真机运行即可。

推荐国内首推的跨平台移动APP开发专业培训机构-东翌学院是Dcloud的合作培训机构，跨平台APP开发整体课程在线直播+课程源码+全套视频，最新最全的APP开发，HB和MUI的全套视频，零基础都可以学习，更有高级进修课程，30天最快速的开发跨平台APP！
咨询报名QQ：2971611409 Tel：17090057793上课地址
欢迎有意向学习的朋友加好友咨询！谢谢Dcloud提供这么好的平台！