mui h5+文档最详版

界面初始化
H5plus初始化
创建子页面
打开界面
参数传递
控制页面load显示
关闭界面
底部导航切换界面
自定义事件
页面预加载
消息框
原生模式ActionSheet
下拉刷新
上拉加载
上拉下拉整合
手势
遮罩
滑动导航选择
图片轮播
自定义导航
Ajax-get请求
Ajax-post请求
照相机
访问相册
蜂鸣提示音
手机震动
弹出菜单
设备信息
手机信息
发送短信
拨打电话
发送邮件
本地存储
图片上传
地理位置
设置IOS状态栏
手机通讯录
启动页设置
PHP后台搭建
JSON转换
隐藏本页面中滚动条
首次启动欢迎页
数据库增删改查和接口
推送
浏览器打开新页面
PDF浏览
自定义下拉刷新
即时聊天
双击安卓返回键退出
QQ登录

界面初始化

初始化就是把一切程序设为默认状态，把没准备的准备好。
mui框架将很多功能配置都集中在mui.init方法中，要使用某项功能，只需要在mui.init方法中完成对应参数配置即可，目前支持在mui.init方法中配置的功能包括：创建子页面、关闭页面、手势事件配置、预加载、下拉刷新、上拉加载。

H5plus初始化

在我们APP的开发中，如果我们用到了H5+的一些API或者接口，我们需要初始化另外一个函数，类属于 JS 中的window.onload 或者 window.ready

Mui.plusReady(); 所有涉及到H5+的东西，建议写到这个里面

mui.plusReady(function(){        var  w = plus.webview.currentWebview();console.log(w);     });

创建子页面

为防止APP运行过程中内容滚动出现卡顿的现象，所以部分页面我们采用头部和内容分离的形式进行实现，比如头部导航和底部导航

 mui.init({subpages:[{url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址id:your-subpage-id,//子页面标志styles:{top:subpage-top-position,//子页面顶部位置bottom:subpage-bottom-position,//子页面底部位置width:subpage-width,//子页面宽度，默认为100%height:subpage-height,//子页面高度，默认为100%......},extras:{name:'zxd学院'//子页面通过plus.webview.currentWebview().name能拿到这个值}//额外扩展参数}]});

打开界面

//打开新窗口
mui.openWindow({ url:'target.html', //需要打开页面的url地址 id:'target',  //需要打开页面的url页面idstyles:{ top:'0px',//新页面顶部位置 bottom:'0px',//新页面底部位置
//                  width:newpage-width,//新页面宽度，默认为100%
//                  height:newpage-height,//新页面高度，默认为100% ...... }, extras:{ name:'aries',age:'18',
//                  .....//自定义扩展参数，可以用来处理页面间传值 },show:{ //控制打开页面的类型autoShow:true,
//                  //页面loaded事件发生后自动显示，默认为true aniShow:'zoom-fade-out',//页面显示动画，默认为”slide-in-right“；  页面出现的方式 左右上下duration:'1000'//页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒； }, waiting:{ // 控制 弹出转圈框的信息autoShow:true,//自动显示等待框，默认为true title:'东翌学院...',//等待对话框上显示的提示内容 options:{ width:'300px',//等待框背景区域宽度，默认根据内容自动计算合适宽度 height:'300px',//等待框背景区域高度，默认根据内容自动计算合适高度 ...... } }
});

参数传递

mui.plusReady(function(){var self = plus.webview.currentWebview(); //获得当前页面的对象var name = self.name; //name 和 age 为传递的参数的键var age = self.age;console.log(name);console.log(age);// 获得首页  专用的var index = plus.webview.getLaunchWebview();// 获得指定页面的对象 注意，要确保你的这个页面是存在的， 就是打开过的var target = plus.webview.getWebviewById('目标页面的id');});

控制页面load显示

show:{  // openwindow 函数内设置autoShow:false
} // 目标页面
//从服务器获取数据 ....
这里是业务逻辑
//业务数据获取完毕，并已插入当前页面DOM；
//注意：若为ajax请求，则需将如下代码放在处理完ajax响应数据之后；
mui.plusReady(function(){ //关闭等待框               plus.nativeUI.closeWaiting();//显示当前页面          mui.currentWebview.show();
});

关闭界面

1，点击包含.mui-action-back类的控件

2，在页面上，向右快速滑动

3， Android手机按下back按键

mui框架封装的页面右滑关闭功能，默认未启用，若要使用右滑关闭功能，需要在mui.init();方法中设置swipeBack参数，如下：

mui.init({swipeBack:true //启用右滑关闭功能
});

mui框架默认会监听Android手机的back按键，然后执行页面关闭逻辑；若不希望mui自动处理back按键，可通过如下方式关闭mui的back按键监听:

mui.init({keyEventBind: {backbutton: false //关闭back按键监听 }
});

底部导航切换界面

HTML部分:

<nav class="mui-bar mui-bar-tab"><a id="defaultTab" class="mui-tab-item mui-active" href="a.html"><span class="mui-icon mui-icon-videocam"></span><span class="mui-tab-label">社区</span></a><a class="mui-tab-item" href="b.html"><span class="mui-icon mui-icon-chatboxes"><span style="display: none;" class="mui-badge">1</span></span><span class="mui-tab-label">群组</span></a><a class="mui-tab-item" href="c.html"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">我的</span></a>
</nav>

JavaScript部分:

//mui初始化
mui.init();
var subpages = ['a.html', 'b.html', 'c.html'];
var subpage_style = {top:'0px',bottom: '51px'
};
var aniShow = {};  //创建子页面，首个选项卡页面显示，其它均隐藏；
mui.plusReady(function() {var self = plus.webview.currentWebview();for (var i = 0; i < subpages.length; i++) {var temp = {};var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);if (i > 0) {sub.hide();}else{temp[subpages[i]] = "true";mui.extend(aniShow,temp);}self.append(sub);}
});//当前激活选项
var activeTab = subpages[0];//选项卡点击事件
mui('.mui-bar-tab').on('tap', 'a', function(e) {var targetTab = this.getAttribute('href');if (targetTab == activeTab) {return;}//显示目标选项卡//若为iOS平台或非首次显示，则直接显示if(mui.os.ios||aniShow[targetTab]){plus.webview.show(targetTab);}else{//否则，使用fade-in动画，且保存变量var temp = {};temp[targetTab] = "true";mui.extend(aniShow,temp);plus.webview.show(targetTab,"fade-in",300);}//隐藏当前;plus.webview.hide(activeTab);//更改当前活跃的选项卡activeTab = targetTab;
});//自定义事件，模拟点击“首页选项卡”
document.addEventListener('gohome', function() {var defaultTab = document.getElementById("defaultTab");//模拟首页点击mui.trigger(defaultTab, 'tap');//切换选项卡高亮var current = document.querySelector(".mui-bar-tab>.mui-tab-item.mui-active");if (defaultTab !== current) {current.classList.remove('mui-active');defaultTab.classList.add('mui-active');}
});

自定义事件

监听自定义事件 - 目标页

window.addEventListener('shijian',function(event){//通过event.detail可获得传递过来的参数内容....var name = event.detail.namelconsole.log(name);shijian();
})

触发自定义事件 - 本页

//首先获得目标页面的对象
var targetPage = plus.webview.getWebviewById('目标页面id'); mui.fire(targetPage,'shijian',{//自定义事件参数name:'dongyixueyuan'
});

页面预加载

所谓的预加载技术就是在用户尚未触发页面跳转时，提前创建目标页面，这样当用户跳转时，就可以立即进行页面切换，节省创建新页面的时间，提升app使用体验。mui提供两种方式实现页面预加载。

方式一：通过mui.init方法中的preloadPages参数进行配置

mui.init({  // 可同时加载一个或者多个界面preloadPages:[ //加载一个界面{ url:'a.html', id:'a', styles:{},//窗口参数 extras:{},//自定义扩展参数subpages:[{},{}]//预加载页面的子页面 },{ // 可加载另外一个界面，不需要可直接删除url:'b.html', id:'b', styles:{},//窗口参数 extras:{},//自定义扩展参数subpages:[{},{}]//预加载页面的子页面 }]
});

方式二：通过mui.preload方法预加载,一次只能预加载一个页面,若需加载多个webview，则需多次调用mui.preload()方法；

mui.plusReady(function(){var productView = mui.preload({url: 'list.html',id: 'list',});console.log(productView); //获得预加载界面的对象
});

消息框

警告消息框

mui.alert('欢迎使用Hello 东翌学院','东翌学院',function(){alert('你刚关闭了警告框');
});

消息提示框

var btnArray = ['是','否'];mui.confirm('东翌学院是专业跨平台APP培训学院，赞？','Hello 东翌学院',btnArray,function(e){if(e.index==0){alert('点击了- 是');//自己的逻辑                          }else{alert('点击了- 否');}
});

输入对话框

var btnArray = ['确定','取消'];mui.prompt('请输入你对东翌学院的评语：','内容好','东翌学院',btnArray,function(e){if(e.index==0){alert('点击了 - 确认');var  value = e.value; // value 为输入的内容}else{alert('点击了 - 取消');}
});

自动消息对话框

mui.toast('显示内容');

日期选择框

//js里的月份 是从0月开始的，也就是说，js中的0月是我们1月var dDate=new Date(); //默认显示的时间
dDate.setFullYear(2015,5,30);
var minDate=new Date(); //可选择的最小时间
minDate.setFullYear(2010,0,1);
var maxDate=new Date(); //课选择的最大的时间
maxDate.setFullYear(2016,11,31); plus.nativeUI.pickDate( function(e) {var d=e.date;alert('您选择的日期是:'+d.getFullYear()+"-"+(d.getMonth()+1)+"-"+ d.getDate());},function(e){alert('您没有选择日期');},{title:"请选择日期",date:dDate,minDate:minDate,maxDate:maxDate});

时间选择框

var dTime=new Date();
dTime.setHours(20,0); //设置默认时间
plus.nativeUI.pickTime(function(e){var d=e.date;alert("您选择的时间是："+d.getHours()+":"+d.getMinutes());},function (e){alert('您没有选择时间');},{title:"请选择时间",is24Hour:true,time:dTime});

原生模式ActionSheet

var btnArray = [{title:"分享到微信"},{title:"分享到新浪微博"},{title:"分享到搜狐微博"}]; //选择按钮  1 2 3
plus.nativeUI.actionSheet( {title:"分享到",cancel:"取消", // 0buttons:btnArray}, function(e){var index = e.index; // alert(index);switch (index){case 1://写自己的逻辑break;case 2:break;}
} );

下拉刷新

为实现下拉刷新功能，大多H5框架都是通过DIV模拟下拉回弹动画，在低端android手机上，DIV动画经常出现卡顿现象（特别是图文列表的情况）；通过双webview解决这个DIV的拖动流畅度问题；拖动时，拖动的不是div，而是一个完整的webview（子webview），回弹动画使用原生动画；在iOS平台，H5的动画已经比较流畅，故依然使用H5方案。两个平台实现虽有差异，但经过封装，可使用一套代码实现下拉刷新。

第一步: 创建子页面，因为拖动的其实是个子页面的整体

mui.init({ subpages:[{ url:pullrefresh-subpage-url,//下拉刷新内容页面地址 id:pullrefresh-subpage-id,//内容页面标志styles:{ top:subpage-top-position,//内容页面顶部位置,需根据实际页面布局计算，若使用标准mui导航，顶部默认为48px； .....//其它参数定义 } }]
});

第二步:内容页面需按照如下DOM结构构建

<!--下拉刷新容器--><div id="pullrefresh" class="mui-content mui-scroll-wrapper"><div class="mui-scroll"><!--数据列表--><ul class="mui-table-view mui-table-view-chevron"><li class="mui-table-view-cell">1</li></ul></div></div>
第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数mui.init({ pullRefresh : { container:"#pullrefresh",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等   down : {contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容 contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容 callback : fn //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；} } });

第四步:设置执行函数

function fn() {//业务逻辑代码，比如通过ajax从服务器获取新数据； ...... //注意，加载完新数据后，必须执行如下代码，注意：若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后     mui('#pullrefresh').pullRefresh().endPulldownToRefresh();  //这行代码会隐藏掉 正在加载... 容器}

上拉加载

第一步，第二步和下拉刷新的一样

第三步:通过mui.init方法中pullRefresh参数配置下拉刷新各项参数

mui.init({ pullRefresh : { container:"#pullrefresh",//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等 up : { contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容 contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容； callback : fn //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； } }
});

第四步:设置执行函数

function fn() { //业务逻辑代码，比如通过ajax从服务器获取新数据； ...... //注意，加载完新数据后，必须执行如下代码，true表示没有更多数据了，两个注意事项： //1、若为ajax请求，则需将如下代码放置在处理完ajax响应数据之后 //2、注意this的作用域，若存在匿名函数，需将this复制后使用var _this = this;_this.endPullupToRefresh(true|false);
}

上拉下拉整合

第一步，第二步和下拉刷新一样

第三步:在mui.init()内同时设置上拉加载和下拉刷新

mui.init({pullRefresh: {container: '#pullrefresh',down: {contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容callback: downFn // 下拉执行函数},up: {contentrefresh: '正在加载...',callback: upFn // 上拉执行函数}}
});

注意: 给获取元素加onclick点击事件不行，需要加addEventListener自定义事件

手势

在开发移动端的应用时，会用到很多的手势操作，比如滑动、长按等，为了方便开放者快速集成这些手势，mui内置了常用的手势事件，目前支持的手势事件见如下列表：

分类参数描述

点击 tap 单击屏幕

doubletap 双击屏幕

长按 longtap 长按屏幕

 hold            按住屏幕       release           离开屏幕

滑动 swipeleft 向左滑动

swiperight 向右滑动

swipeup 向上滑动

swipedown 向下滑动

拖动 dragstart 开始拖动

drag 拖动中

dragend 拖动结束

mui.init({ gestureConfig:{tap: true, //默认为true doubletap: true, //默认为false longtap: true, //默认为false swipe: true, //默认为true drag: true, //默认为true hold:false,//默认为false，不监听 release:false//默认为false，不监听 }
});

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

你要监听的对象.addEventListener("swipeleft",function(){ console.log("你正在向左滑动");
});

遮罩

在popover、侧滑菜单等界面，经常会用到蒙版遮罩；比如popover弹出后，除popover控件外的其它区域都会遮罩一层蒙版，用户点击蒙版不会触发蒙版下方的逻辑，而会关闭popover同时关闭蒙版；再比如侧滑菜单界面，菜单划出后，除侧滑菜单之外的其它区域都会遮罩一层蒙版，用户点击蒙版会关闭侧滑菜单同时关闭蒙版。

遮罩蒙版常用的操作包括：创建、显示、关闭，如下代码：

var mask = mui.createMask(callback);//callback为用户点击蒙版时自动执行的回调；
mask.show();//显示遮罩
mask.close();//关闭遮罩遮罩css样式:   .mui-backdrop

滑动导航选择

mui提供了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格组件，这些组件都用到了mui框架的slide插件，有较多共同点。首先，Dom内容构造基本相同，都必须有一个.mui-slider的父容器；其次，当拖动切换显示内容时，均会触发slide事件（可拖动式选项卡在点击选项卡标题时，也会触发slide事件），通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。

HTML部分:

<div class="mui-slider"><!--选项卡标题区--><div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"><a class="mui-control-item" href="#item1">待办公文</a><a class="mui-control-item" href="#item2">已办公文</a><a class="mui-control-item" href="#item3">全部公文</a></div><div class="mui-slider-progress-bar mui-col-xs-4"></div><div class="mui-slider-group"><!--第一个选项卡内容区--><div id="item1" class="mui-slider-item mui-control-content mui-active"><ul class="mui-table-view"><li class="mui-table-view-cell">待办公文1</li><li class="mui-table-view-cell">待办公文2</li><li class="mui-table-view-cell">待办公文3</li></ul></div><!--第二个选项卡内容区，页面加载时为空--><div id="item2" class="mui-slider-item mui-control-content"><ul class="mui-table-view"><li class="mui-table-view-cell">待办公文1</li><li class="mui-table-view-cell">待办公文2</li><li class="mui-table-view-cell">待办公文3</li></ul></div><!--第三个选项卡内容区，页面加载时为空--><div id="item3" class="mui-slider-item mui-control-content"></div></div>
</div>

JavaScript部分:

var item2Show = false,item3Show = false;//子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {if (event.detail.slideNumber === 1&&!item2Show) {//切换到第二个选项卡//根据具体业务，动态获得第二个选项卡内容；var content = 'er';//显示内容document.getElementById("item2").innerHTML = content;//改变标志位，下次直接显示item2Show = true;} else if (event.detail.slideNumber === 2&&!item3Show) {//切换到第三个选项卡//根据具体业务，动态获得第三个选项卡内容；var content = 'san';//显示内容document.getElementById("item3").innerHTML = content;//改变标志位，下次直接显示item3Show = true;}
});

图片轮播

1, 支持循环

HTML部分:

<div class="mui-slider"><div class="mui-slider-group mui-slider-loop"><!--支持循环，需要重复图片节点--><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="data:images/2.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="data:images/0.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="data:images/1.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="data:images/2.jpg" /></a></div><!--支持循环，需要重复图片节点--><div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="data:images/0.jpg" /></a></div></div>
</div>

2, 不支持循环和循环不同的是没有再第一条和最后一条后面加入内容

HTML部分:

<div class="mui-slider"><div class="mui-slider-group"><div class="mui-slider-item"><a href="#"><img src="data:images/0.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="data:images/1.jpg" /></a></div><div class="mui-slider-item"><a href="#"><img src="data:images/2.jpg" /></a></div><!--<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>--></div>
</div>

JavaScript部分相同:

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});document.querySelector('.mui-slider').addEventListener('slide', function(event) {//注意slideNumber是从0开始的；alert("你正在看第"+(event.detail.slideNumber+1)+"张图片");
});

注意:如果ajax获得图片后，需要在写入图片以后，需要从新调用一下

gallery.slider();

自定义导航

第一步: 将一下代码写在header(mHeader) 和 content(mBody) 之间

首页
科技
娱乐
财经
北京
军事
社会
汽车
视频
美女

第二步: 引入dongyi_nav.css 和dongyi_nav.js

第三步: 执行函数

dongyi_nav(function(index,data){ // index 为点击索引 data为点击导航的文本内容console.log(index);console.log(data);  });

Ajax-get请求

// get测试请求地址 http://test.dongyixueyuan.com/link_app/get?state=index&num=0mui.get('接口地址',{ //请求接口地址state:'index'   // 参数  键 ：值num:'0'},function(data){ // data为服务器端返回数据//获得服务器响应 ... console.log(data);},'json'
);

Ajax-post请求

// post测试请求地址 http://test.dongyixueyuan.com/link_app/post
mui.post('接口地址',{  //请求接口地址state:'index', // 参数  键 ：值num:'0' },function(data){ //data为服务器端返回数据//自己的逻辑},'json'
);

照相机

var cmr = plus.camera.getCamera();
cmr.captureImage( function ( p ) {//成功plus.io.resolveLocalFileSystemURL( p, function ( entry ) {var img_name = entry.name;//获得图片名称var img_path = entry.toLocalURL();//获得图片路径}, function ( e ) {console.log( "读取拍照文件错误："+e.message );} );}, function ( e ) {console.log( "失败："+e.message );
}, {filename:'_doc/camera/',index:1} ); //  “_doc/camera/“  为保存文件名

访问相册

plus.gallery.pick( function(path){img.src = path;//获得图片路径}, function ( e ) {console.log( "取消选择图片" );
}, {filter:"image"} );

蜂鸣提示音

switch ( plus.os.name ) { //判断设备类型case "iOS":if ( plus.device.model.indexOf("iPhone") >= 0 ) { //判断是否为iPhoneplus.device.beep();console.log = "设备蜂鸣中...";} else {console.log = "此设备不支持蜂鸣";}break;default:plus.device.beep();console.log = "设备蜂鸣中...";break;
}

手机震动

switch ( plus.os.name ) { //判断设备类型case "iOS":if ( plus.device.model.indexOf("iPhone") >= 0 ) { //判断是否为iPhoneplus.device.vibrate();console.log("设备振动中...");} else {console.log("此设备不支持振动");}break;default:plus.device.vibrate();console.log("设备振动中...");break;
}

弹出菜单

弹出菜单的原理主要是通过锚点进行的，如果需要多个弹出菜单，可以在a标签内设置锚点，对应相应的div的id即可

<a href="#popover">打开弹出菜单</a> // href 定义锚点
<div id="popover" class="mui-popover"> //id 对应锚点<ul class="mui-table-view"><li class="mui-table-view-cell"><a href="#">Item1</a></li><li class="mui-table-view-cell"><a href="#">Item2</a></li><li class="mui-table-view-cell"><a href="#">Item3</a></li><li class="mui-table-view-cell"><a href="#">Item4</a></li><li class="mui-table-view-cell"><a href="#">Item5</a></li></ul>
</div>

设备信息

plus.device.model  //设备型号
plus.device.vendor  //设备的生产厂商
plus.device.imei  // IMEI 设备的国际移动设备身份码
plus.device.uuid  // UUID 设备的唯一标识
// IMSI 设备的国际移动用户识别码
var str = '';
for ( i=0; i<plus.device.imsi.length; i++ ) {str += plus.device.imsi[i];
}
plus.screen.resolutionWidth*plus.screen.scale + " x " + plus.screen.resolutionHeight*plus.screen.scale ;
//屏幕分辨率
plus.screen.dpiX + " x " + plus.screen.dpiY; //DPI每英寸像素数

手机信息

plus.os.name //名称
plus.os.version //版本
plus.os.language //语言
plus.os.vendor //厂商
//网络类型
var types = {};
types[plus.networkinfo.CONNECTION_UNKNOW] = "未知";
types[plus.networkinfo.CONNECTION_NONE] = "未连接网络";
types[plus.networkinfo.CONNECTION_ETHERNET] = "有线网络";
types[plus.networkinfo.CONNECTION_WIFI] = "WiFi网络";
types[plus.networkinfo.CONNECTION_CELL2G] = "2G蜂窝网络";
types[plus.networkinfo.CONNECTION_CELL3G] = "3G蜂窝网络";
types[plus.networkinfo.CONNECTION_CELL4G] = "4G蜂窝网络";
var network = types[plus.networkinfo.getCurrentType()];

发送短信

<a href=“sms:10086">发送短信var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
msg.to = ['13800138000', '13800138001'];
msg.body = '东翌学院http://www.dongyixueyuan.com';
plus.messaging.sendMessage( msg );

拨打电话

<a href="tel:10086">拨打电话</a>

发送邮件

<a href="mailto:dongyixueyuan@qq.com">发送邮件到东翌学院</a>

本地存储

//设置
plus.storage.setItem('键','值'); -> plus.storage.setItem('name','dongyixueyuan');
//查询
plus.storage.getItem('键'); -> var name = plus.storage.getItem('name');
//删除
plus.storage.removeItem('键'); -> plus.storage.removeItem('name');
//全部清除
plus.storage.clear();    //HTML5自带 - 设置
localStorage.setItem('键','值'); -> localStorage.setItem('name','dongyixueyuan');
//HTML5自带 - 查询
localStorage.getItem('键'); -> var name = localStorage.setItem('name');//HTML5自带 - 删除
localStorage.removeItem('键'); -> localStorage.removeItem('name');

图片上传

//初始上传地址
var server="http://tongle.dongyixueyuan.com/upload_file.php";  // 学员测试使用
var files=[]; //图片存放的数组 可以上传一个，或者多个图片
//上传图片
function upload_img(p){//又初始化了一下文件数组 为了支持我的单个上传,如果你要一次上传多个，就不要在写这一行了//注意 files=[];var n=p.substr(p.lastIndexOf('/')+1);files.push({name:"uploadkey",path:p});     //开始上传start_upload();
}
//开始上传
function start_upload(){if(files.length<=0){plus.nativeUI.alert("没有添加上传文件！");return;}//原生的转圈等待框var wt=plus.nativeUI.showWaiting();var task=plus.uploader.createUpload(server,{method:"POST"},function(t,status){ //上传完成alert(status);if(status==200){                            //资源var responseText = t.responseText;                         //转换成jsonvar json = eval('(' + responseText + ')');                      //上传文件的信息var files = json.files;                   //上传成功以后的保存路径var img_url = files.uploadkey.url;                        //ajax 写入数据库                        //关闭转圈等待框wt.close();}else{console.log("上传失败："+status);//关闭原生的转圈等待框wt.close();}});             task.addData("client","");task.addData("uid",getUid());for(var i=0;i<files.length;i++){var f=files[i];task.addFile(f.path,{key:f.name});}task.start();
}
// 产生一个随机数
function getUid(){return Math.floor(Math.random()*100000000+10000000).toString();
}

地理位置

//直接获取地理位置

plus.geolocation.getCurrentPosition( geoInfo, function ( e ) {alert( "获取位置信息失败："+e.message );
} );

//监听地理位置

 var watchId; //开关 函数外层定义        if ( watchId ) {return;}watchId = plus.geolocation.watchPosition( function ( p ) {alert( "监听位置变化信息:" );    geoInfo( p );             }, function ( e ) {alert( "监听位置变化信息失败："+e.message );});

//停止监听地理位置

 if ( watchId ) {alert( "停止监听位置变化信息" );                    plus.geolocation.clearWatch( watchId );watchId = null;}
//获得具体地理位置
//获取设备位置信息function geoInfo(position){    var timeflag = position.timestamp;//获取到地理位置信息的时间戳；一个毫秒数；    var codns = position.coords;//获取地理坐标信息；     var lat = codns.latitude;//获取到当前位置的纬度；    var longt = codns.longitude;//获取到当前位置的经度    var alt = codns.altitude;//获取到当前位置的海拔信息；    var accu = codns.accuracy;//地理坐标信息精确度信息；    var altAcc = codns.altitudeAccuracy;//获取海拔信息的精确度；    var head = codns.heading;//获取设备的移动方向；    var sped = codns.speed;//获取设备的移动速度；            //百度地图申请地址
//  http://lbsyun.baidu.com/apiconsole/key
//  http://api.map.baidu.com/geocoder/v2/?output=json&ak=你从百度申请到的Key&location=纬度（Latitude）,经度（Longitude）
//  http://api.map.baidu.com/geocoder/v2/?output=json&ak=BFd9490df8a776482552006c538d6b27&location=40.065639,116.419413    //详细地址//http://api.map.baidu.com/geocoder/v2/?ak=eIxDStjzbtH0WtU50gqdXYCz&output=json&pois=1&location=40.065639,116.419413                var baidu_map = "http://api.map.baidu.com/geocoder/v2/?output=json&ak=BFd9490df8a776482552006c538d6b27&location="+lat+','+longt;mui.get(baidu_map,{  //请求的地址},function(data){ //服务器返回响应，根据响应结果，分析是否登录成功； ... var result = data['result'].addressComponent;   // 国家var country = result['country'];            //城市var city = result['city'];;          //地址var address = result['province'] + result['district'] + result['street'];          //data 有很多信息，大家如果需要可以for in出来看下      },'json');
}

设置IOS状态栏

mui.plusReady(function(){if(mui.os.ios){//UIStatusBarStyleDefault //字体深色 //UIStatusBarStyleBlackOpaque //字体浅色plus.navigator.setStatusBarStyle('UIStatusBarStyleBlackOpaque');plus.navigator.setStatusBarBackground("#007aff"); //背景颜色}})

手机通讯录

mui.plusReady(function(){    //访问手机通讯录  plus.contacts.ADDRESSBOOK_PHONE//访问SIM卡通讯录  plus.contacts.ADDRESSBOOK_SIM    plus.contacts.getAddressBook(plus.contacts.ADDRESSBOOK_PHONE,function(addressbook){addressbook.find(null,function (contacts){       for(var a in contacts){         //这里是安卓手机端的获取方式 ios的不太一样，如果需要这块代码可以联系老师获得var user = contacts[a].displayName; //联系人var phone = contacts[a].phoneNumbers[0].value; //手机号码                            }               },function ( e ) {alert( "Find contact error: " +e.message );},{multi:true});});
});

启动页设置

设置手动关闭启动页:

manifest.json -> plus -> autoclose 改为 false
关闭启动页:

plus.navigator.closeSplashscreen();

PHP后台搭建

在开发工具内下载 AppServ 和 ThinkPHP,
AppServ是本地服务器，ThinkPHP是后台框架

ThinkPHP采用单入口模式 index -> 控制器 -> 方法index.php 内书写如下:define("APP_NAME",'WEB'); //站点名称
define("APP_PATH",'./WEB/'); //站点路径
define("APP_DEBUG",true);//开启调试模式require("./ThinkPHP/ThinkPHP.php");// 引入框架文件

JSON转换

JSON.parse()和JSON.stringify()
1.parse 用于从一个字符串中解析出json 对象。例如var str='{"name":"zxd学院","age":"23"}'经 JSON.parse(str) 得到：Object: age:"23" name:"zxd学院"ps:单引号写在{}外，每个属性都必须双引号，否则会抛出异常
2.stringify用于从一个对象解析出字符串，例如
var a={a:1,b:2}
经 JSON.stringify(a)得到：
'{"a":1,"b":2}'

隐藏本页面中滚动条

var self = plus.webview.currentWebview();self.setStyle({bounce: 'none', //禁止弹动scrollIndicator: 'none' //隐藏滚动条
});

首次启动欢迎页

首先引入dongyi_welcome.css 和 dongyi_welcome.js 文件

<div id="slider" class="mui-slider" ><div class="mui-slider-group"><!-- 第一张 --><div class="mui-slider-item"><img src="img/shuijiao.jpg"></div><!-- 第二张 --><div class="mui-slider-item"><img src="img/muwu.jpg"></div><!-- 第三张 --><div class="mui-slider-item"><img src="img/cbd.jpg"></div><!-- 第四张 --><div class="mui-slider-item"><img src="img/yuantiao.jpg"><button id="dy_enter">立即进入</button></div></div><div class="mui-slider-indicator"><div class="mui-indicator mui-active"></div><div class="mui-indicator"></div><div class="mui-indicator"></div><div class="mui-indicator"></div></div>
</div>

dongyi_welcome({preLoadUrl:'main.html',//预加载页面urlpreLoadId:'main',//预加载页面id
});

数据库增删改查和接口

Class UserAction extends Action {/*** 添加数据*/public function add(){$data['phone'] = '1380013800';$data['name'] = 'yidong';// M = model M('你要操作的数据表')->方法$re = M('user')->add($data);//输出echo $re;// 添加数据返回值 是数据的id}/*** 修改数据*/public function mod(){$data['phone'] = '130013000';$id = 1;$re = M('user')->where("`id`='$id'")->save($data);echo $re;//修改数据 返回值为1是成功 0为失败}/*** 删除数据*/public function del(){$id = '2';$re = M('user')->where("`id`='$id'")->delete();echo $re;// 删除 返回值为1也是成功 0 为失败}/*** 查询数据*/public function select(){//单条带条件查询$id = '1';$arr1 = M('user')->where("`id`='$id'")->find();// dump($arr1);// 多条不带条件查询  查询数据库内所有的数据 不建议使用$arr2 = M('user')->select();// dump($arr2);// 多条带条件查询 $phone = '1380013800';$arr3 = M('user')->where("`phone`='$phone'")->select();// dump($arr3);// 排序// asc 正序// desc 倒序$arr4 = M('user')->where("`phone`='$phone'")->order("id desc")->select();// dump($arr4);// 分页 limit// limit(参数1); 一个参数的情况下 拿多少条数据// limit(参数1,参数2); 二个参数的情况下 第一个参数是从多少条开始拿，第二个参数还是拿多少条// $arr5 = M('user')->order("id desc")->limit(2)->select();// dump($arr5);$arr6 = M('user')->order("id desc")->limit(2,2)->select();// dump($arr6);//返回json数据 给我们APPecho json_encode($arr6);// 接口地址// http://127.0.0.1/www/xianshang14/index.php/User/select}
}

推送

注册个推，获得APPKEY,APPID,MASTERSECRET*
推送信息必须打包安装手机后才能使用，主要是通过client_id来进行对每个用户进行推送，首先我们需要在数据库的用户表内添加一个client_id 的字段(在用户注册的时候或者在每次登录的时候存入用户的新client_id,保证推送的有效性)，为存放我们用户的client_id，比如这里是个商城，你购买完商品，系统会推送一条信息给你，你只需要告诉程序，你要推送人的手机号码，标题，内容即可(如需要点击信息到达订单页面，需要用透传来实现)，服务器获得手机号码以后会在数据库内查找，并获得该用户的client_id，然后实现推送。这里要根据自己的情况来写逻辑，比如东翌课堂的分类，前端，后端，数据库等分类，如果我有一个课程上线，我可以推送给这些对某一类感兴趣的学员。当然更多的逻辑需要你自己来写，群发我们可以理解成，循环发送多个单条的(*单条发送已经测试没问题，群发没测试，大家可以自己测试一下，有问题随时反馈过来)。
由于推送信息的多样性，本次封装仅对本APP注册用户进行推送，如需要全员推送，可直接使用个推官网创建信息的方式直接推送。

推送步骤：

1, 右上角下载推送包

2，single.php (推送单个普通推送/可透传，点击信息可打开APP,*透传可写逻辑,透传需要) (透传格式:{“path”:“course”,id:“2”}

openPath.php (推送打开页面信息，点击信息可在浏览器打开你传入的URL)

download.php (推送下载信息，点击信息可下载你传入URL的文件)

3，简单粗暴的设置一下这3个文件内的14行APPKEY,15行APPID,16行MASTERSECRET为你在个推得到的APPKEY,APPID,MASTERSECRET

如下我只写了一个实例，单条普通信息推送

PHP端代码:

在PHP Action文件夹内建立了一个 PushAction.class.php 的文件

Class PushAction extends Action {//单个信息推送 透传public function single(){        $title = $_GET['title_data'];$content = $_GET['content_data'];$phone = $_GET['phone_data'];$pass = $_GET['pass_data'];      if($title == '' || $content == '' || $phone == ''){exit;}$user = M('user')->where("`phone`='$phone'")->find();$cid = $user['client_id'];$url = 'http://' .$_SERVER['HTTP_HOST'] .  . '/Push/single?title='.$title.'&content='.$content.'&cid='.$cid.'&pass='.$pass;$html = file_get_contents($url);  echo $html;  }
}

//APP端代码我在index文件中

// 监听在线消息事件
plus.push.addEventListener( "receive", function( msg ) {if ( msg.aps ) {  // Apple APNS message
//                  alert( "接收到在线APNS消息：" );} else {
//                  alert( "接收到在线透传消息：" );}    var login_phone = localStorage.getItem('你存入的登录信息');    var content = msg.content;        var json = eval('('+content+')');var path = json.path;var id = json.id;//订单if(path == 'order'){   if(login_phone){dui.jump('./Home/order.html','order');}         }else if(path == 'course'){localStorage.setItem('dongyikecheng_cid',id);dui.jump('./Course/course_detail.html','course_detail');}else if(path == 'message'){if(login_phone){if(id == 'system'){dui.jump('./Message/system_message.html','system_message');}else{dui.jump('./Message/chat_message.html','chat_message');}}         }
}, false );

以上PHP代码可以配合后台，给特定人群推送，逻辑需要大家实现了，因为每个APP的逻辑都不一样

浏览器打开新页面

plus.runtime.openURL( url );

PDF浏览

IOS端内可以直接打开
安卓端方式：
1，调用本地第三方浏览器打开

  mui.plusReady(function(){        plus.runtime.openFile( "./file/node_js.pdf" );});

2，引入第三方js类打开

自定义下拉刷新

// 双webview 写到父页面里面

.mui-pull-top-pocket{top:100px !important;position: absolute;
}
.mui-pull-caption {background: red;;background-size: contain;background-repeat: no-repeat;background-position: center;width: 144px;height: 31px;font-size: 0px;
}
/*下拉刷新圆形进度条的大小和样式*/.mui-spinner {width: 32px;height: 32px;
}
.mui-spinner:after {background: red;
}
/*下拉刷新的箭头颜色*/.mui-icon-pulldown {color: #FF058B;
}

即时聊天

//即时聊天采用野狗无后端模式，野狗: https://www.wilddog.com/

//引入文件

<script src = "https://cdn.wilddog.com/js/client/current/wilddog.js" ></script>

//写入数据

// new Wilddog   message 为自己定义的一个表或者空间，用于放我们的聊天记录
var wd = new Wilddog('https://dongyixueyuan.wilddogio.com/message');btn.addEventListener('tap',function(){var content = text.value;//记录发布时间戳var date = new Date();var time = date.getTime();//插入数据//第一个参数单独的一个空间，比如两个人聊天，他们就是在单独的一个空间聊天， message 里面可以有很多个独立的空间，比如 张三和李四 是一个空间  王五和赵六又是一个空间//第二个参数是你发布信息的时间，我们以时间作为信息的依据，通过时间的排序我们的聊天记录//第三个参数是一个json,为我们的聊天信息，比如 昵称，头像，内容，表情，时间wd.child('1').child(time).set({'name':'dongyixueyuan','content':content,'time':time
//              ...更多});
})

//获得数据

// 监听聊天内容变化
var listen = "https://dongyixueyuan.wilddogio.com/message/1";
var listen_wd = new Wilddog(listen);
listen_wd.on('child_added',function(data){list.innerHTML += ''+'    '+data.val().name+' '+data.val().time+''+'   '+data.val().content+''+'';console.log(data.val().name);
})

//删除

//1为空间名,1442293959023为某一条信息
var ref = new Wilddog("https://dongyixueyuan.wilddogio.com/message/1/1442293959023");ref.remove()

//时间转换函数

function getLocalTime(nS) {     var mydate = new Date(nS);var today = '';
//          today += mydate.getFullYear() + '年';   //返回年份
//          today += mydate.getMonth()+1 + '月';    //返回月份，因为返回值是0开始，表示1月，所以做+1处理
//          today += mydate.getDate() + '日';   //返回日期today += mydate.getHours() + ':';if(mydate.getMinutes() < 10){var min = '0'+mydate.getMinutes();}else{var min = mydate.getMinutes();}today += min + ':';today += mydate.getSeconds();return today;
}

//设置滚动条高度

document.body.scrollTop = document.body.offsetHeight;

双击安卓返回键退出

//监听安卓返回键
var first = null;
mui.back = function() {if (!first) {first = new Date().getTime();mui.toast('再按一次退出应用');setTimeout(function() {first = null;}, 1000);} else {if (new Date().getTime() - first < 1000) {plus.runtime.quit();}}
}

QQ登录

//申请各个开发平台的开发者

微信: https://open.weixin.qq.com/

QQ: http://open.qq.com/

微博: http://open.weibo.com/

//设置 manifest.json -> SDK配置

//初始化QQ登录,微信登录,微博登录

var auths={};
mui.plusReady(function(){// 获取登录认证通道plus.oauth.getServices(function(services){for(var i in services){var service=services[i];auths[service.id]=service;}},function(e){outLine("获取登录认证失败："+e.message);});
});

//调用认证事件

// id 为 qq,weixin,weibo
function login(id){console.log("----- 登录认证 -----");var auth=auths[id];if(auth){var w=plus.nativeUI.showWaiting();document.addEventListener("pause",function(){setTimeout(function(){w&&w.close();w=null;},2000);}, false );auth.login(function(){w&&w.close();w=null;console.log("登录认证成功：");console.log(JSON.stringify(auth.authResult));userinfo(auth);},function(e){w&&w.close();w=null;console.log("登录认证失败：");console.log("["+e.code+"]："+e.message);plus.nativeUI.alert("详情错误信息请参考授权登录(OAuth)规范文档：http://www.html5plus.org/#specification#/specification/OAuth.html",null,"登录失败["+e.code+"]："+e.message);});}else{console.log("无效的登录认证通道！");plus.nativeUI.alert("无效的登录认证通道！",null,"登录");}
}
// 获取用户信息
function userinfo(a){console.log("----- 获取用户信息 -----");a.getUserInfo(function(){console.log("获取用户信息成功：");console.log(JSON.stringify(a.userInfo));var nickname=a.userInfo.nickname||a.userInfo.name;plus.nativeUI.alert("欢迎“"+nickname+"”登录！");},function(e){console.log("获取用户信息失败：");console.log("["+e.code+"]："+e.message);plus.nativeUI.alert("获取用户信息失败！",null,"登录");});
}
// 注销登录
function logoutAll(){console.log("----- 注销登录认证 -----");for(var i in auths){logout(auths[i]);}
}
function logout(auth){auth.logout(function(){outLine("注销\""+auth.description+"\"成功");},function(e){outLine("注销\""+auth.description+"\"失败："+e.message);});
}