1.Ajax-get请求

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

2.Ajax-post请求

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

3.照相机

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/“ 为保存文件名

4.访问相册

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

5.蜂鸣提示音

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

6.手机震动

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

7.弹出菜单

弹出菜单的原理主要是通过锚点进行的,如果需要多个弹出菜单,可以在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>

8.设备信息

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每英寸像素数

9.手机信息

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()]; 

10.发送短信

<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 );

11.拨打电话

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

12.发送邮件

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

13.本地存储

//设置
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');

14.图片上传

//初始上传地址
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;
//转换成json
var 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();
}

15.地理位置

//直接获取地理位置
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'
);
}

16.设置IOS状态栏

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

17.手机通讯录

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});
});
)};

18.启动页设置

设置手动关闭启动页:

manifest.json -> plus -> autoclose 改为 false

关闭启动页:

plus.navigator.closeSplashscreen();

mui框架(三)的更多相关文章

  1. 跨平台移动端APP开发---简单高效的MUI框架

    MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...

  2. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP

      前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...

  3. mui框架上下拉加载

    mui框架被定位为“最接近原生体验的移动App的UI框架”. 写下mui框架中常用的两个功能,下拉刷新和上拉加载,没有后台交互,用js写假数据模拟,下面直接上代码. <!DOCTYPE html ...

  4. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

  5. mui框架(二)

    1.底部导航切换界面 HTML部分: <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" ...

  6. MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)

    出处:http://www.cnblogs.com/jerehedu/p/7832808.html  前  言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...

  7. 【MUI框架】学习笔记整理 Day 2

    参考整理自MUI官网 http://dev.dcloud.net.cn/mui/ui/ (1)numbox(数字输入框) mui提供了数字输入框控件,可直接输入数字,也可以点击“+”.“-”按钮变换当 ...

  8. 【MUI框架】学习笔记整理 Day 1

    MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 <ul class="mui-table-view"> 2 <li cla ...

  9. MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标

    MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...

  10. MUI框架-13-使用百度地图 API(图文教程)

    MUI框架-13-使用百度地图 API(图文教程) 后面有实例,转载请注明出处 一.申请百度地图权限 1.打开 百度地图开放平台:http://lbsyun.baidu.com/apiconsole/ ...

随机推荐

  1. def chi(*food,**kw):

    def chi(*food,**kw): print(food,kw)chi("cong","蒜",'姜','可乐',"J=Juice",a ...

  2. 【转】为什么Github没有记录你的Contributions

    【转】为什么Github没有记录你的Contributions 字数985 阅读0 评论0 喜欢0 记录下为什么github 提交的时候,没有记录到 github 的那个日历上。 Paste_Imag ...

  3. 《面向对象程序设计》六 GUI

    git传送门 我这无药可救的拖延症和懒癌orz 主界面 文件读取界面 提示界面 最初选择vs+mfc,发现许多自动生成的代码读不懂(不须懂),尝试qt后感觉人生迎来了希望,看了推荐的视频与教程稍微了解 ...

  4. Beta阶段第三次冲刺

    Beta阶段第三次冲刺 严格按照Git标准来,组员有上传Git的才有贡献分没有的为0 代码签入图 1.part1 -站立式会议照片 2.part2 -项目燃尽图 3.part3 -项目进展 1.正在进 ...

  5. 团队作业——Alpha冲刺2/12

    团队作业--Alpha冲刺 冲刺任务安排 杨光海天 今日任务:主要学习JAVA语言,以及加入了Android开发内容的学习. 明日任务:安装Android Studio以及通过观看视频和阅读材料的形式 ...

  6. Scala学习之路 (四)Scala的数组、映射、元组、集合

    一.数组 1.定长数组和变长数组 import scala.collection.mutable.ArrayBuffer object TestScala { def main(args: Array ...

  7. 2.2.2 RelativeLayout(相对布局)

    本节引言 在上一节中我们对LinearLayout进行了详细的解析,LinearLayout也是我们 用的比较多的一个布局,我们更多的时候更钟情于他的weight(权重)属性,等比例划分,对屏幕适配还 ...

  8. java通过http服务执行shell命令

    服务端代码/** * 执行shell命令 * @param command 执行命令 * @return */public String exeCommandByPath( String comman ...

  9. python不要使用可变对象作为参数的默认值

    幽灵乘客例子: . 如上:如果为空时,bus2和bus3引用的是相同的一个list,就会造成粗错误 实际工作中,如果不想改变某个参数值,那么通过以上这种赋值也会改变 解决方式self.passenge ...

  10. DFT scan chain

    现代集成电路的制造工艺越来越先进,但是在生产过程中的制造缺陷也越来越难以控制,甚至一颗小小的PM2.5就可能导致芯片报废,为了能有效的检测出生产中出现的废片,需要用到扫描链测试(scan chain) ...