我对Dcloud SDK 集成方式的理解

官网手册上提供的是三种集成方式

1. webView 方式
2. widget 方式
3. 独立应用方式

其他地方还提到过， runtime 方式 和 webapp 方式，一共是5种叫法。

经过几天的学习， 梳理了不同集成方式的几个异同点。

1. webView 方式 和 widget 方式， 需要从Android 的 Activity 中调用。
2. 独立应用方式直接是设定为默认启动Activity, 接管了系统的Activity, 然后加载项目里的html 代码。 runtime 方式应该是这个的另一叫法。
3. webView 方式打开的是一个浏览器组件，占用了整个屏幕，效果跟系统默认的WebView 是一样的。 通过给他指定打开的URL 地址加载相应的代码。
4. widget 方式可以指定绑定控件，所以可以和原生应用很好的集成。
5. 独立应用方式（runtime方式）也可以通过系统Activity 启动。

总结

1. 概念比较多
2. 要搞懂不同的集成方式需要了解 Android开发的基本知识
3. 需要精简，上来就是一大棒吓的我不敢看了。

本地打包

官网列举本地打包的特点， 我总结了下

1. 不需要排队打包， 自己的电脑随时可以打包
2. 可定制性好， 本地打包可以定制runtime 环境，添加自己的代码，如果需要自动以插件，好像只能用本地打包。
3. 本地打包，需要注意不要引入过多的库文件。容易造成打包出来的应用比较大。
4. 本地打包可以根据需要引用的功能包含最少的资源库文件。 我分析他们的在线打包程序，应该是读取了manifest.json 文件，动态引入库文件。

在线打包

在线打包比较方便的解决了需要配置编译环境的问题。让没接触过的人快速打包出ios和安卓平台的安装包。

1. 在线打包根据设定的manifest.json 文件，动态导入库文件，保证了安装包的最小化
2. 根据manifest设定，动态生成了AndroidManifest.xml 文件内容， 设定了最小的权限

最近学习dcloud 平台， 总结了东西。 准备自己搭建一个持续集成环境，
首先，先制定一个下目标：

1. 建立SVN资源库， 保存Android 集成SDK 的代码
2. 建立html5 项目的SVN 资源库
3. app项目提交， 检查manifest.json 是否改变
4. 改变了manifest文件，需要重新编译 Android 应用（设定权限，导入库）
5. 没有改变，生成资源包 wgt 文件和 差异资源包 wgtu
6. 实现svn 提交代码， 系统自动编译生成资源包或者安装程序
7. 打开程序，检查程序是否升级，自动下载安装程序 或者 升级资源包。

最后发现问题是：引用了两次mui.min.js

XMLHttpRequest和AJAX

XMLHttpRequest（以下简称为“XHR”）中文可以解释为“可扩展超文本传输请求”，Xml可扩展标记语言，Http超文本传输协议，Request请求。XMLHttpRequest对象是“异步JavaScript和XML”（Asynchronous Javascript And XML）——AJAX实现的核心。

mui.ajax()中的XHR

mui.ajax()中的XHR对象有两种：
window.XMLHttpRequest
5+XMLHttpRequest

异步/同步

AJAX最大的优点就是异步，但是在某些情况下依旧需要进行同步的请求。window的XHR是支持同步的，但是5+的XHR并不支持。也就是说，当使用window的XHR时，可以通过设置async属性来调整异步/同步。

mui.ajax({  
    url: 'http://192.168.0.101:8080/test'  
    data: {},  
    async: true || false, // 异步 || 同步  
    dataType: 'json',  
    type: 'post',  
    timeout: 10000,  
    success: function(data) {  
        // 请求成功  
    },  
    error: function(xhr, type, errorThrown) {  
        // 请求失败  
    }  
});  

关于mui.ajax()的使用，在其API中已经做出了较为全面的说明，这里主要说明mui.ajax()对两种XHR在不同场景下的使用。

5+运行环境

在5+运行环境下，才可以调用plus相关的API，可以使用5+的XHR。
5+运行环境目前有：5+App、流应用基座、360手机助手。

crossDomain

mui.ajax()配置信息的settings中有个参数crossDomain，说明为“强制使用5+跨域”，此时使用5+的XHR。

mui.ajax({  
    url: 'http://192.168.0.101:8080/test'  
    data: {},  
    async: true,  
    dataType: 'json',  
    crossDomain: true, //强制使用5+跨域  
    type: 'post',  
    timeout: 10000,  
    success: function(data) {  
        // 请求成功  
    },  
    error: function(xhr, type, errorThrown) {  
        // 请求失败  
    }  
});  

跨域请求

5+默认采用UIWebview，是支持本地资源跨域请求的。即，此时会调用window的XHR。
当然，你也可以设置crossDomain为true，强制使用5+XHR。

WKWebview

5+的webview在创建的时候，可以设置窗口使用的内核，但是只能在iOS8.0及以上系统中使用。
WKWebview出于安全的设计，不支持window的XHR跨域。所以当使用WKWebview时，始终调用5+的XHR。

其他

除了上述提到的场景，mui.ajax()均会调用window的XHR。

手机浏览器环境

浏览器环境，一定使用的是window的XHR。
关于微信等浏览器环境开发中的跨域，请参考mui.getJSONP()实现Web跨域。

document.activeElement.blur();
遇到了键盘关闭的问题，在mui里找了好久都没有解决，最后百度解决了！

安卓高德用户在打开加载地图的webview时候，打开方式为：

var newCarrental = plus.webview.getWebviewById("加载webview页面");  
newCarrental.setStyle({  
height: '100%',  
width: '100%',  
right: '0px',  
background: "transparent",  
render: 'always'//此属性务必要加载  
});  
if(newCarrental == null) {  
    plus.webview.create("加载webview页面", "加载webview页面别名", subpage_style).show("slide-in-right");  
} else {  
    newCarrental.show("slide-in-right");  
}

然后这样打开的弊端为：打开页面会很暂用手机内存，当用户在这个页面打开的基础上，如果还要大概一个新的地图页面，那么新的地图会被前面的地图遮挡，有一个解决方案为：用户打开新地图页面的时候吧之前打开的页面top值修改或者关掉之前的页面，离开或者返回的时候要把top值修改掉，如果是在基础之上在打开新的地图页面的话不建议关闭之前的地图页面，具体代码如下：

//用户打开新地图页面执行代码  
var sub = plus.webview.getWebviewById("之前地图页面名称");  
if(sub != null) {  
    sub.setStyle({  
        top: '100%'  
    });  
}  
//用户关闭新地图页面执行代码  
var sub = plus.webview.getWebviewById("之前地图页面名称");  
if(sub != null) {  
    sub.setStyle({  
        top: '0'  
    });  
}

如果有问题可以留言，相互学习

【背景介绍】
　　MUI 版本 3.3。
　　在页面中使用了 Pop-Picker 组件（mui-picker）。

【问题阐述】
　　当点击选择器的“确定”按钮时，页面上抛出如下异常：

Uncaught TypeError: picker.getSelectedItem is not a function at src bs/mui/mui.poppicker.js:117

【解决方案】
　　几经排查，发现当页面内引入的 js 中包含了对 Array 原型链方法扩充时，会抛出这个异常。
　　定位到 mui.poppicker.js 第 112 行 getSelectedItems() 方法中，原先的：

for (var i in self.pickers) {  
    var picker = self.pickers[i];  
    items.push(picker.getSelectedItem() || {});  
}

　　修改为：

for (var i = 0, len = self.pickers.length; i < len; i++) {  
    var picker = self.pickers[i];  
    items.push(picker.getSelectedItem() || {});  
}

　　问题解决。

【后记】
　　查找资料时发现 http://ask.dcloud.net.cn/question/14800 这样一个问题，题主应该是遇到了和我同样的错误。
　　现在大多数开发者手头都会有几个工具库来扩充原型链方法， String.prototype.trim = function(); 这种经典的方法就不提了，为了应对低版本浏览器，对 Array.prototype.forEach = function(); 这类 ES5 常用方法也有必要做 polyfil，我本人遇到这个问题是因为扩充了 Array.prototype.remove = function();
　　Javascript 里 for in 遍历因为原型链的缘故本来就有潜在的坑，不如老老实实写 for 循环，必要时还需要使用 hasOwnProperty() 辅助判断，也希望大家引以为戒吧。

首先我们要用chrome调试我们的APP，就先得有chrome浏览器和hbuilder编辑器，hbuilder编辑器大家应该都有，chrome浏览器也很好下载，这里给大家一个新版本的chrome浏览器的下载地址 http://www.chromeliulanqi.com/ ，下载完以后安装一下就行。下面开始整起来吧！
第一步,为了调试，我们在hbuilder中新建一个app,可以直接选择h5 的模板文档。如图

第二步，连接上你的模拟器或者真机，
1.如果想使用模拟器的话大家可以下载一个夜神模拟器http://www.yeshen.com/，下载完夜神模拟器以后需要到hbuilder中点击顶端的选项工具，然后再点击选项进入首选页页面

2.如果你想要使用真机测试的话，打开真机的开发者选项，具体的可以在电脑上下载一个360手机助手，根据360手机助手的提示操作，如果还是连接不上你的手机，可以在你的android手机上安装一个360连接助手，也是360的产品（我并不是360的宣传大使啊。。。），这样就可以完美解决hbuilder连接不上真机的情况了。
第三步,在你模拟器或者真机上运行在hbuilder上app项目，下面是2种运行app的方式。点开你想要检查的页面。如果是真机的话，会在手机上提示你是否要安装，当然要点击安装按钮。

第四步,打开chrome浏览器，在地址栏输入“chrome://inspect”，这时浏览器会出现下面这个界面。点击右边的红色箭头所指的是你所检查的页面地址，左边那个红色箭头所指的inspect是需要你去点击的，点击之后会弹出另外一个界面。

第五步，这时可能会出现这么一个情况，弹出的另外一个界面是白屏，这时需要翻墙一下(第一次使用的时候翻墙就行)，可以下载一个GreenVPN,下载链接点此，又来广告了，http://www.greenvpn6.com/，这个软件每天有一个小时的免费使用时间，下载安装完这个vpn软件以后，连接一下vpn,接下来在你的chrome浏览器里测试一下，vpn有没有连接上,你只要输入个谷歌的地址www.google.com，如果他能进入这个地址，就说明vpn连接成功。你再点击inspect，弹出的屏幕就不会白屏了。

比如一个待办列表 我们点击进入详情页面后进行操作 就会返回列表页面然后再次刷新列表

呃... 我琢磨了俩个方法

第一个就是

var taskList = plus.webview.getWebviewById('跳转页面ID');  
                taskList.reload();  
                mui.back();  

mui.openWindow({  
                url:'跳转页面url',  
                id:'跳转页面ID',  
                });

这个大家应该知道滴 方便又快捷 操作完后页面确实刷新了

这个方法在http://ask.dcloud.net.cn/article/617有详细介绍

然而我发现安卓4.0的版本 还是华为手机操作系统的问题 用这个方法后返回列表页面居然卡死了

于是我使用自定义事件进行跳转

详情页面

...

var taskList = plus.webview.getWebviewById('跳转页面ID');
mui.fire(跳转页面ID,'自定义事件名称');

mui.openWindow({
url:'跳转页面url',
id:'跳转页面ID',
});
...

列表页面

...
window.addEventListener('自定义事件'，function（）{
触发事件。。。
})；
...

不过用自定义事件后 可能还有许多问题要处理 比如列表之前页面传过来的值并会变成undefined 不过相信大家应该可以轻松解决

其实我还是一只菜鸡 发文章就想赚点积分 看看文章回复下人家 不知道怎么积分就突然变负了 希望大家捧捧场 嘿嘿

点击列表的时候把当前的tab存到sessionStorage里面，返回的时候取出来，然后判断currentTab的值

var slider = $('#slider').slider();
//
if(currentTab=='0'){

            slider.gotoPage(0,100);  

        }else if(currentTab=='1'){  

            slider.gotoPage(1,100);  

        }else if(currentTab=='2'){  

            slider.gotoPage(2,100);   

        }else if(currentTab=='3'){  

            slider.gotoPage(3,100);  
        }

        var server = **********; //上传文件的端口  
        var files = []; //文件的数组  
        document.getElementById("ContractID-btn").addEventListener('tap', function() {  
            plus.gallery.pick(function(e) {  
                document.getElementById("ContractID-btn").innerText = '选择照片(' + e.files.length + ')张';  
                //从相册添加文件  
                appendFile(e); //添加文件  
            }, function(e) {  
                // outSet("取消选择图片");  
            }, {  
                filter: "image",  
                multiple: true,  
                system: false  
            });  
        });  
        //上传文件  
        function uploadContract() {  
            var task = plus.uploader.createUpload(server, {  
                method: "POST"  
            }, function(t, status) {  
                if(status == 200) {  
                    plus.nativeUI.closeWaiting();  
                    mui.toast('上传成功');  
                    ContractZIP = JSON.parse(t.responseText).fileName;  
                    rowContract = JSON.parse(t.responseText).rawFiles;  
                } else {  
                    alert('上传失败,请重试');  
                }  
            });  
            task.addData("fileType", "合同");  
            task.addData("customerId", CustomerId);  
            for(var i = 0; i < files.length; i++) {  
                var f = files[i];  
                task.addFile(f.path, {  
                    key: f.name  
                });  
            }  
            task.start();  
        }  
        //添加文件            
        function appendFile(p) {  
            plus.nativeUI.showWaiting("正在上传...");  
            var index = 1;  
            files = []; //清空数组，防止重复上传  
            for(var i = 0; i < p.files.length; i++) {  
                var n = p.files[i].substr(p.files[i].lastIndexOf('/') + 1);  
                files.push({  
                    name: "uploadkey" + index,  
                    path: p.files[i]  
                });  
                index++;  
            }  
            uploadContract();//添加完文件，开始上传  
        }

<input type="number" pattern="\d*"/>