一时兴起把红旅网站解析成接口了，有接口了，干脆就把app也写出来了，项目使用mui开发。

不是官方APP，不是官方APP，不是官方APP

接口数据来自红旅，欢迎大家使用开发app，请不要用于其他用途

代码down下来，使用hbuilder打开项目即可，非常的简单

开源地址

gitosc: http://git.oschina.net/20110516/hltmapp-mui

github: https://github.com/tomoya92/hltmapp-mui

截图预览

培训的目的】：让有想法有创意的创业者能够不因为技术障碍丧失机会！助你成为IT界的专业人才!
【培训内容】：我们的培训是app开发整套的课程 js、php、Mysql，从UI的设计到手机底层到后台的开发到数据库的管理，从一个创意的萌生到APP的上架，就算是0基础的学员也能够轻松开发出属于自己的APP，我们培训的是能够独立开发app的全栈工程师！
【培训方式】：周一到周六在腾讯课堂每天晚上8-10点2节直播课程，如果这个时间点你错过的话也不用担心，可以到我们的官网看文档和录播视频，每天上完课以后老师会布置作业第二天上课前收作业然后老师点评，有什么问题可以到我们VIP学员群讨论问老师，老师可以给你远程协助帮助解决问题，一次报名可以终身反复学习，这是我们的上课方式和课后学习模式
【开课班次】：随到随学，可反复跟班学习，学会为止！
【课程优势】：国内首推跨平台app开发培训课程，一次报名课终身学习，VIP学员群技术支持

晚上零碎时间学习，足不出户，在家就能学
直播教学，随时互动，你和讲师之隔一道屏幕
实时互动辅导，课上有互动，课后有辅导，在线解答
学习不寂寞，QQ群交流，促进同学之间的交流
强制学习，每天提交作业，定期组织老师，学习顾问定期回访

var old_back = mui.back;
mui.back = function() {
var btn = ["确定", "取消"];
mui.confirm('放弃保存吗？', '询问', btn, function(e) {
if(e.index == 0) {
//执行mui封装好的窗口关闭逻辑；
old_back();
}
});
throw "不关闭窗体"; //无论如何直接异常 ， 是返回键失效
}

页面传参数是一种比较常见的业务需求，根据实现原理及适用环境可以分为两大类。

在普通浏览器端常用的方法有如下几种：

1.利用URL传参
在页面跳转的时候通过设置window.location.href添加参数，在接收参数的页面通过window.location.search获取参数字符串。

发送参数的页面：

window.location.href = 'new.html?targetId=123'

接收参数的页面：

// 获取url中的参数  
function getUrlParam (name) {  
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");  
     var r = window.location.search.substr(1).match(reg);  
     if (r!= null) {  
        return unescape(r[2]);  
     }else{  
        return null;  
     }  
}      
//获取url中的targetId参数  
var targetId = getUrlParam('targetId');  
console.log(targetId);

2.利用本地存储传参
可以使用本地存储的方式，可以使用cookie、sessionStorage和localStorage。
发送参数的页面：

localStorage.setItem("targetId","123");

接收参数的页面：

localStorage.getItem("targetId");

mui框架根据业务场景不同，提供了两种传值模式：

1.页面初始化时，通过扩展参数传值

html5+ webview中在创建新窗口的时候有一个extras参数，用于创建Webview窗口的额外扩展参数。

var w = plus.webview.create("new.html","new",{},{  
    targetId: '123'  
});  
w.show(); // 显示窗口  
// 获取扩展参数属性值  
console.log("extras:" + w.targetId);

注意：id是WebviewObject的一个属性，所以extras不能使用id作为参数名。

mui在初始化页面时，提供了extras配置参数，通过该参数可以设置页面参数，从而实现页面间传值。
mui框架在如下几种场景下，会执行页面初始化操作：

• 通过mui.openWindow()打开新页面（若目标页面为已预加载成功的页面，则在openWindow方法中传递的extras参数无效）；
• 通过mui.init()方法创建子页面；
• 通过mui.init()方法预加载页面；
• 通过mui.preload()方法预加载页面

以打开新页面为例说明浏览器和基于5+的APP的兼容写法：

var targetId = '123';  
var baseUrl = 'new.html';  

var url = mui.os.plus?baseUrl:baseUrl+'?targetId=' + targetId;    
mui.openWindow({  
    url: url,  
    extras: {  
        targetId: targetId  
    }  
})

想获取某个webview页面的拓展参数，可以通过webview对象获取。例如在new.html页面可以通过下面的方法获取拓展参数：

mui.plusReady(function () {  
   var self = plus.webview.currentWebview();  
   // 或 var self = plus.webview.getWebviewById('new');  
   console.log("extras:" + self.targetId);  
})

至于浏览器和APP兼容的写法自己根据上面的方法和这个方法结合一下就OK了。

2.页面已创建，通过自定义事件传值

Webview窗口对象窗口对象WebviewObject有一个evalJS方法，可以将JS脚本发送到Webview窗口中运行，可用于实现Webview窗口间的数据通讯。

mui.fire(target, event, data)

参数说明：

• target： Type: WebviewObject 需传值的目标webview
• event：Type: String 自定义事件名称
• data：Type: JSON json格式的数据

发送参数的页面：

<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>  
<script src="js/mui.js"></script>  
<script type="text/javascript">  
    var ws = null;  
    mui.plusReady(function () {  
        ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});  
    })  
    document.querySelector('#send').addEventListener('tap',function () {  
        var targetId = '123';  
        ws.evalJS('send('+targetId+')');  
        ws.show();  
    })  
</script>

接收参数的页面：

<div class="mui-content">  
    <div id="text"></div>  
</div>  
<script src="js/mui.js" type="text/javascript" charset="utf-8"></script>  
<script type="text/javascript">  
    mui.init();  
    // 接收参数的函数  
    function send(param){  
        document.getElementById("text").innerHTML = param;  
    }   

    mui.back = function(){  
        var self = plus.webview.currentWebview();  
        self.hide();  
    }  
</script>

注：这里要重写back,不然默认为close，当我们返回的时候再次打开show的时候需要重新创建。

显然这样写有点复杂，为此mui将evalJS传值的机制进行了封装，通过自定义事件实现页面传值，可以使用mui.fire()方法可触发目标窗口的自定义事件。

发送参数的页面：

<button id="send" type="button" class="mui-btn mui-btn-blue mui-btn-block">按钮</button>  
<script src="js/mui.js"></script>  
<script type="text/javascript">  
    var ws = null;  
    mui.plusReady(function () {  
        ws = plus.webview.create("new.html","new",{top:"0px",bottom:"0px"});  
    })  
    document.querySelector('#send').addEventListener('tap',function () {  
        mui.fire(ws,'send',{  
            targetId: '123'  
        })  
        ws.show();  
    })  
</script>

接收参数的页面：

// 添加send自定义事件监听  
window.addEventListener('send',function(event){  
  //获得事件参数  
  var targetId = event.detail.targetId;  
  document.getElementById("text").innerHTML = targetId;  
});

这里需要特别说明一下的是，很多人在使用mui.fire传参数的时候会提前预加载接收参数的页面，结果发现接收不到传的参数，这是一种非常常见的错误，这里需要说明的是当预加载了页面后，页面上的代码都已经执行，如果在loaded事件未完成就执行webview.evalJS或mui.fire，此时页面接收参数失效。此时应该将接受参数的逻辑写在webview loaded或者show监听事件中:

验证一个webview的loaded事件是否完成的方法：

var ws = plus.webview.getWebviewById(id)  
ws.addEventListener( "loaded", function(e){  
    console.log( "Loaded: "+e.target.getURL() );  
}, false );

验证一个webview的show事件是否完成的方法：

var ws=plus.webview.currentWebview();  
ws.addEventListener("show", function(e){  
    console.log( "Webview Showed" );  
}, false );

HTML5+ runtime集成的是zxing的开源二维码扫描库。
并且5+的barcode模块也是开源的。https://github.com/dcloudio/

微信、支付宝使用的是商业级扫码库，zxing等开源库无法相比。如需更强的扫码效果，请使用支付宝提供的扫码插件：https://ext.dcloud.net.cn/plugin?id=2636

在扫描识别时，常见引起识别率不高的原因有：

1. 配置了过多扫码类型。因为不同码制有不同的解码算法，一张图，软件需要根据配置的所有扫码算法挨着尝试解码，就会导致较慢。
   如果扫码的类型是相对固定的，把码制范围控制下，扫码速度会提升。
2. 弱光下扫码识别率不高的问题
   请打开闪光灯。http://ask.dcloud.net.cn/question/19379
3. 扫码的区域保证是正方形，占位div高宽要一样。

具体参考HTML5+的规范：http://html5plus.org/doc/zh_cn/barcode.html

mui中定义了一个简单适用的栅格系统，将每一行宽度平均分为12份，每一份作为一个子栅格，每一行的内容置于.mui-row行容器中，通过.mui-col-xs-*和.mui-col-sm-*将行分成若干行。使用以下媒体查询（media query）将.mui-row像素宽度400px作为分界，.mui-row像素宽度低于400px的使用.mui-col-xs-*，当.mui-row像素宽度高于400px使用.mui-col-sm-*。.mui-row宽度若不设置，默认为屏幕像素宽度。

通过给每一行中的列设置1~12的数值，相应列的宽度会随着.mui-row像素宽度变化。若一行中列的数值和大于12，多余的列所在元素会作为一个整体另起一行排列。

<style type="text/css">  
    .mui-row{  
        height: 50px;  
        line-height: 50px;  
        text-align: center;   
    }  
    .mui-col-sm-3{  
        border: 1px solid #aaa;  
    }  
    .mui-col-sm-9{  
        border: 1px solid #aaa;  
    }  
</style>  
<div class="mui-row">  
    <div class="mui-col-xs-4 mui-col-sm-3">  
        .mui-col-sm-3  
    </div>  
    <div class="mui-col-xs-8 mui-col-sm-9">  
        .mui-col-sm-9  
    </div>  
</div>

这样我们得到了两列元素，当.mui-row像素宽度低于400px时，左侧宽度为4份子栅格宽度，右侧宽度为8份子栅格宽度；当.mui-row像素宽度高于400px时，左侧宽度为3份子栅格宽度，右侧宽度为9份子栅格宽度。

承接 APP项目开发，请有需要的朋友可以提供下详细的需求文档，并且提供APP UI原型图（如果没有ui原型图的，可以我们根据提供文档需求，免费设计APP原型图，以便大家能了解整个开发

需求）

联系QQ 1795977154（加Q时请说明dcloud app），信息长期有效

交易：1、淘宝 2、对公转账（推荐），需要签订合同，个人开发者请选择淘宝

实力团队开发，众多成功案例（感谢dcloud提供这么好的一个平台）

想便宜的，找个人去开发吧（经常会：出差、家里有人生病住院、网络掉线、在外面办事、生病在打点滴、消失几天+、项目开发遥遥无期、投诉无门）

说明一点：app开发成本起步价为8万+，如果想几千或者5万以内能开发的，请绕过，我们大家都挺忙的！

说明一点：
1，没有详细需求文档的，请绕过，（如果你无法简洁的表达你的想法，那只说明你还不够了解它。 -- 阿尔伯特·爱因斯坦）

在强调2点：
1、没有后台的就需要开发后台，不要问我这个有什么用，我不会详细的去和你解释程序开发是如何实现的（只会简单说明，不理解的就对了，等你都理解了，你自己都可以开发了），因为这个不是在

一对一技术培训，我们是在为你开发程序，如何开发你可以百度去看网上的视频，他们比我们说的更详细一些。
2、有后台的，请提供api接口，没有api接口的，我们是收费开发的。

最后强调一点：
app开发成本是比较高的，不了解的就请认真考虑我们的报价和解决方案，不要动不动就乱说一通，还骂收费坑人，说难听一点的，就是你们自己公司或者个人平时都是这样坑人的，你自己才会觉得别

人都是在坑你，这个是素质问题，和开发无关，大家都挺忙的，没时间扯嘴皮子。一个报价和解决方案都是会有他自己的因素决定的，现在开发价格都比较透明，对比一下就知道了，为了生存，没有

哪个公司会报搞得离谱的价格，这样会流失客户，同样，也没有哪个公司会亏本赚吆喝，毕竟我们没有锤子的情怀。

我们不是最好的，但是我们一定是用心在和你沟通的，我们一定是用心在给你开发的，不虚报价格，中途不变相收费（不会低价引诱，中途增加额外费用，当然增加功能开发的除外）

提示：我们不接半路转手的单子，如果是半路转手或者需要修改的，请勿打扰，谁给你们做的，你们找他们去。

在今年这个时间开始学习移动开发真是最好不过了，每个人应该都有一些移动应用的创意，而且你并不需要任何的原生应用编程经验，你只需要一些HTML的相关知识， 懂一些CSS和JavaScript就够了，跨平台移动APP开发是利用HTML5+CSS3+JS，快速开发出本地App，一次开发，多平台适配，效果与原生App相媲美。学习跨平台app开发就在这里>>>立即学习 咨询电话：010-57201298 QQ:410355878

1. 选择开发技术和工具

开发跨平台移动App的最大挑战之一，就是每个移动平台就有个原生语言和软件开发包（SDK）：Windows手机是C#和.Net，iOS平台使用Objective C和Cocoa，而Android则是Java和ADK。对此，我们可以找到代码分享的方法，而HTML5用C++编码，所以可以用于三个平台。

当然，使用每个平台的原生语言和软件开发包，可以最大发挥平台的完整功能性，开发简便也能保证高性能。还能迅速升级为操作系统和软件开发包的最新版本，充分运用新特性。为了获得最佳用户体验，原生平台的优势是非常明显的。

HTML5则能通过更新网络服务器来更新App的功能，这对某些App来说非常有用。C++语言也对一些常见的跨平台组件十分有用。

然而，在以上两种情况下要发挥平台功能、编辑用户界面，是有些困难的。开发者仍然需要将原生软件开发包与一些选项相结合，来使用平台的独特功能。

2. 明确用户体验

在某些情况下，每个平台想要的App功能是一样的，但是用户希望App在不同平台上的设计风格能够统一，这也就是这个App的个性。用户可以以此来感受App设计的价值感。有种设计理念是“App个性+平台外观和体验”。

App的个性，是指每个App都使用手段来突出自己，比如相似的颜色主题、特性和用户行为流。即使用户换了平台，他仍然能立刻上手。

平台的外观和体验，是让App的用户交互（UI）与同一平台的其他App统一，让用户立即就会使用。比如，常用图标放在屏幕的哪个位置。

3. 短时间开发和测试

在移动App领域，淘汰率和竞争率都很高，用户会频繁更新。而传统的产品开发过程需要长期规划、开发和测试，耗费数月甚至上年时间。

好的解决方案就是使用快速发布周期。每个发布周期应包括一套相同特性，这只需要几周就可以开发出来，完整功能只在需要时才发布。

在稳定代码的同时，团队成员可以开始规划下一个发布周期，因此，发布周期可以不断循环，而用户可以不断更新，获得想要的功能。

1，代替短信验证码 cia验证码 sdk的集成

不仅仅是一种手机号码验证方式
更是APP真实用户身份识别最佳方案
用于APP注册真机本机识别
用于APP推广真实效果监控
用于APP奖励推荐作弊筛查
用于替代短信验证码
http://www.ciaapp.cn/

2，关于app的加密
通过360的加固宝加密后，虽然通过文件夹的方式看不到app的程序
但直接解压sdk后，仍可以看到源码
希望能有解决方案集成到开发环境或者打包服务器。

MUI集成了很多手势事件，单击、长按、滑动等等。

点击事件：

1. tap 单击屏幕
2. doubletap 双击屏幕
   长按事件：
3. longtap 长按屏幕
4. hold 按住屏幕（为什么我想起了顶住屏幕）。。。
   3.release 离开屏幕
   滑动事件：
5. swipeleft 向左滑动
6. swiperight 向右滑动
7. swipeup 向上滑动
8. swipedown 向下滑动
   拖动事件：
9. drastart 开始拖动
   2.drag 拖动中
10. dragend 拖动结束

根据使用频率，mui默认会监听部分手势事件，如点击、滑动事件；为了开发出更高性能的moble App，mui支持用户根据实际业务需求，通过mui.init方法中的gestureConfig参数，配置具体需要监听的手势事件

注意：dragstart、drag、dragend 共用drag开关、swipeleft 、swiperight 、swipeup 、swipedown 共用swipe开关

事件监听：同标准的click事件冒泡一样，上面的事件支持任意添加到DOM对象上
例如 ：Object.addEventListener("swipedown ",function(){

console.log("你向下滑动了")；
})

网上搬运过来的，丰富社区的API文档-----紫苏

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