mui框架(三)
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框架(三)的更多相关文章
- 跨平台移动端APP开发---简单高效的MUI框架
MUI是dcloud(数字天堂)公司旗下的一款跨平台开发移动APP的框架产品,在学习MUI框架之前,最先接触了Hbuilder代码编辑器,它带给我的第一感觉是快,这是HBuilder的最大优势,通过完 ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
- mui框架上下拉加载
mui框架被定位为“最接近原生体验的移动App的UI框架”. 写下mui框架中常用的两个功能,下拉刷新和上拉加载,没有后台交互,用js写假数据模拟,下面直接上代码. <!DOCTYPE html ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
- mui框架(二)
1.底部导航切换界面 HTML部分: <nav class="mui-bar mui-bar-tab"> <a id="defaultTab" ...
- MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前 言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
- 【MUI框架】学习笔记整理 Day 2
参考整理自MUI官网 http://dev.dcloud.net.cn/mui/ui/ (1)numbox(数字输入框) mui提供了数字输入框控件,可直接输入数字,也可以点击“+”.“-”按钮变换当 ...
- 【MUI框架】学习笔记整理 Day 1
MUI 框架之 [原生UI] (1)accordion(折叠面板) 由二级列表演化而来 <ul class="mui-table-view"> 2 <li cla ...
- MUI框架-14-使用自定义icon图标、引入阿里巴巴矢量图标
MUI框架-14-使用自定义icon图标.引入阿里巴巴矢量图标 首先介绍介绍一下,前端必备的非常强大的 阿里巴巴矢量图标库:地址是:http://www.iconfont.cn/ 这里有丰富,精美,且 ...
- MUI框架-13-使用百度地图 API(图文教程)
MUI框架-13-使用百度地图 API(图文教程) 后面有实例,转载请注明出处 一.申请百度地图权限 1.打开 百度地图开放平台:http://lbsyun.baidu.com/apiconsole/ ...
随机推荐
- OpenGL超级宝典笔记——画三角形(转)
http://my.oschina.net/sweetdark/blog/161002 学习了画线的知识,我们可以使用GL_LINE_LOOP来画闭合的多边形.但是使用这种方式画出来的只有线框,多边形 ...
- 当DATABASE进入了suspect模式以后
一个VM的错误就造成了sql2012的脱序.很多一般看不到的模式陆续登场 诸如 recovery pending, suspect, EMERGENCY. 以下脚本可以帮助恢复,如果文件没有损坏的话. ...
- css清楚浮动
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 浮动会使当前标签产生向上浮的效 ...
- SDN2017 第三次实验作业
实验目的 在给定如上实验拓扑情况下,用vlan得到下列虚拟网段 h1--h4互通 h2--h5互通 h3--h6互通 其余主机间无法通信 实验步骤 1. 创建拓扑 #! /usr/bin/python ...
- 面向对象程序设计__Task6_Calculator1.6.2
The 4th part of the Calculator program _ Interface 题目链接:第六次作业(计算器第四步) github链接:Calculator_1.6.2 第六次作 ...
- BZOJ3998:[TJOI2015]弦论(SAM)
Description 对于一个给定长度为N的字符串,求它的第K小子串是什么. Input 第一行是一个仅由小写英文字母构成的字符串S 第二行为两个整数T和K,T为0则表示不同位置的相同子串算作一个. ...
- 【转】jQuery属性过滤选择器
属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素. [attribute] 选取用次属性的元素 [attribute=value] 选取属性值为value的元素 [attribute ...
- PAT A1009 Product of Polynomials (25 分)——浮点,结构体数组
This time, you are supposed to find A×B where A and B are two polynomials. Input Specification: Each ...
- Python2.7-io
io 模块,用于处理流数据,在 python2 下,是内置 file 对象的另一种选择,在 python3 下,此模块是默认的文件和流数据的接口. 1.模块继承关系 IOBase--RawIOBase ...
- POJ3468(线段树区间求和+区间查询)
https://vjudge.net/contest/66989#problem/C You have N integers, A1, A2, ... , AN. You need to deal w ...