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/ ...
随机推荐
- Eclipse中Tomcat的配置
1.Window-Preferences-Server-Runtime Environments 2.点击Add,选择相应的Tomcat版本,我的是7.0的所以我选择这个.并勾选Create a ne ...
- Collection中的List,Set的toString()方法
代码: Collection c = new ArrayList(); c.add("hello"); c.add("world"); ...
- Vue.js Is Good, but Is It Better Than Angular or React?
Vue.js is a JavaScript library for building web interfaces. Combining with some other tools It also ...
- [BZOJ 4763]雪辉
[BZOJ 4763] 雪辉 题意 给定一棵 \(n\) 个点的无根树, 点带权. \(q\) 次询问, 每次给定树上的若干路径, 求这些路径上的点共有多少种不同权值以及这些点的权值组成的集合的 \( ...
- redis在.net架构中的应用(2)--并发和原子操作不可兼得
在上一篇文章中,我主要向大家介绍了利用servicestack连接redis以及一些redis的基本数据类型,传送门 本文中,我将通过一个具体应用场景为大家介绍redis中的并发和原子操作 其中用到的 ...
- Dubbo -- 系统学习 笔记 -- 目录
用户指南 入门 背景 需求 架构 用法 快速启动 服务提供者 服务消费者 依赖 必需依赖 缺省依赖 可选依赖 成熟度 功能成熟度 策略成熟度 配置 Xml配置 属性配置 注解配置 API配置 示例 启 ...
- python不要使用可变对象作为参数的默认值
幽灵乘客例子: . 如上:如果为空时,bus2和bus3引用的是相同的一个list,就会造成粗错误 实际工作中,如果不想改变某个参数值,那么通过以上这种赋值也会改变 解决方式self.passenge ...
- selenium自动化环境搭建(Windows)
参考内容:虫师<selenium2自动化测试实战-基于python语言> 一.selenium介绍 selenium主要用于web应用程序的自动化测试,还支持所有基于web的管理任务自动化 ...
- 计算机视觉-sift(2)代码理解
之前结合不同人的资料理解了sift的原理,这里通过opencv中的代码来加深对sift的实现的理解. 使得能够从原理性理解到源码级的理解.不过该博文还是大量基于<赵春江, opencv2.4.9 ...
- js倒计时,页面刷新时,不会从头计时
最近不忙,瞎鼓捣...哈哈 这里利用了H5的本地存储 localStorage,取秒数直接用了php的time()方法,就懒得用js取了. 把第一次访问页面时的时间存在客户端,然后再刷新的时候,比较用 ...