• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >HBuilder教程 > mui开发app之联网应用传输数据

mui开发app之联网应用传输数据

作者:教程 字体:[增加 减小] 来源:互联网 时间:2017-05-31

本文主要包含mui开发app,mui开发app案例,mui开发app教程,mui app,mui打包app等相关知识,教程希望在学习及工作中可以帮助到您
"); </div> 手机的app分为,在线和单机,在线就是类似于C/S模式,能与服务器与他人共享数据的程序,单机就是在没有网络下可以玩转的app。

目前互联网盛行的时代,99%的程序都是联网环境下工作的。那么如何开发本地app并且能通过网络将数据上传至服务器共享成为了在线app的开发重点。

首先请理解B/S的工作模式,在web程序中,我们只是向http服务器请求了地址,服务器(无论是apache,tomcat,nginx这些都是实现了http socket的程序)返回给我们html文件,浏览器呢,对html进行解释,生成可视化的交互界面。
mui开发app之联网应用传输数据
上面的图画的比较简易,也隐藏了大量的封装组件,事实上整个过程要比我们的图复杂的多,而作为初级开发者,我们只需要知道这些,无论是javaee,asp.net MVC,或者php类型网站的建设都有了基本的套路了!

笔者之前其实没有做过app的开发,更加没有接触过google的android sdk,虽然略知一二,但是对xml文件配置深深的厌恶感使我始终都不愿意走上原生android的开发

笔者这几年一直做的web开发,从LAMP环境到asp.net再到javaee,横跨三大平台,两大操作系统,可以说是web开发的钉子户,研究app的开发时,所以带有html5情结的我自然更加热衷于发挥html5+的开发能力

那么html5开发app和网站开发有什么区别呢?

可以说,本质上没有!你完全可以使用html5开发出与原生媲美的app,在html5不断优化的未来,html5移动开发必然是大势所趋,这得益于其快速高效的开发环境,简单易入门的特点。在线html5 app开发套路且看下图:

mui开发app之联网应用传输数据

 

是不是感觉没变什么呀?确实,所以说本质上没什么区别,这就是为什么大部分网站开发者转行进入app开发更加的简单(一天不到的事情),只要你懂html5,js,css3以及些许前端框架就能动手了!

等等,请先知道一件事!

跨区请求

即,不在同一个域名下进行数据/文件的传输,当你使用浏览器浏览网页的时候并不会遇到这种问题,因为浏览器是从服务器下同一个域名下获取html,也是向这个网站返回数据文件的

但是,html5开发的app,文件是放在本地手机的,这是为了提高访问体验,手机不会向服务器请求完整的html文件,这就造成了要跨域交换数据的问题,即手机本地是一个域,服务器是另一个域!

这有什么问题吗?有啊,浏览器默认会阻止跨域请求的,没想到吧?为什么?为了安全啊!

万一有人发了一个帖子,帖子链接到别的网站下,而这个链接的js实现了将你在这个网站获取的个人资料传送到链接网站的功能,那么你点进去以后你登陆的个人资料会被另一个网站获取,这是不可能的,浏览器会使用同源策略阻止这个事情发生,毕竟这太危险了!

同理app请求的网站不应该把自己域的数据发送给另一个域(你的手机),浏览器认为数据给了别人!

解释清楚了,那么我们需要解决这个“bug”实现app与服务器的通信,其实默认的mui已经为我们解决了这个问题,用hbuilder打包的app并不存在同源策略问题,可以跨域请求数据,这种事情只会出现在浏览器访问罢了

早期,我在使用jquery mobile开发的时候,由于没有hbuilder这样的基架,不能及时打包app(开发过程都是在手机浏览器中测试写的html文件,每过一个阶段,上传到phonegap打包成本地app)

所以使用jquery mobile的朋友们,也许会遇到这样的问题,下面网上有一个小办法解决手机浏览器测试app并访问其他网站数据,这也是我以前使用的方法

 

  1. js之前,jquery.js之后)*/ 
  2. $(document).on("mobileinit",function(){ 
  3.     //支持域名ajax加载 B5教程网 www.bcty365.com 
  4.     $.support.cors=true; 
  5.     $.mobile.allowCrossDomainPages=true; 
  6.     $.mobile.pushState=false; 
  7. }); 

这样在手机浏览器里测试h5 app就不成问题了,实际打包成phonegap之后,是不需要的,因为phonegap使用file协议来发送请求,并且本身不会有同源策略

Phonegap wiki里面说: ”The cross-domain security policy does not affect PhoneGap applications. Since the html files are called by webkit with the file:// protocol, the security policy does not apply.”

但是,根据我前年jquery mobile开发app的经验,jquery mobile根本不适合app的开发,这里没有黑jquery mobile,他本身的特性就是为wap而生的,就是适合手机页面开发,不适合打包为app,因为他没有完整的打包环境,即不好使用html5+!

且jquery mobile本身也比较臃肿!虽然功能强大,但是却不涉及5+,不能使用5+的app不是完整的app!所以以后我可能会用jqmobile开发wap页面,建议放在微信开发当

您可能想查找下面的文章:

  • mui开发app之多图压缩与上传
  • mui开发app之联网应用传输数据
  • mui开发app之自定义事件以更新其他页内容
  • mui开发App - 申请苹果开发者账号教程分享
  • MUI开发注意事项
  • mui数百精选案例分享

相关文章

  • 2017-05-31hbuilder mui 开发心得(收藏)
  • 2017-05-31hbuilder mui如何监听搜索框点击清除按钮
  • 2017-05-315+APP优化技巧之硬件加速
  • 2017-05-31PHP解决mui前端框架中的ajax请求跨域问题
  • 2017-05-31Hbuilder MUI如何增加自定义icon图标
  • 2017-05-31mui框架如何实现页面间传值
  • 2017-05-31mui如何根据Geolocation获得的坐标获取所在城市?
  • 2017-05-31mui 日期控件DtPicker怎么设置默认值?
  • 2017-05-31选项卡切换+下拉刷新+动态获取数据
  • 2017-05-31Hbuilder MUI 收回弹出的软键盘

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Hbuilder编辑器怎么格式化代码?
    • mui中popover顶部弹出菜单位置不准确以及无法收回的问题
    • HBuilder mui 创建子页面
    • hbuilder边改边看模式能不能像H5+一样支持跨域ajax
    • HBuilder mui ajax
    • mui.toast样式风格及位置修改教程
    • mui开发app之多图压缩与上传
    • Hbuilder移动app 开发微信支付-前后端要点
    • Android集成HTML5+SDK,Runtime方式离线打包,空项目讲解
    • HBuilder mui 关闭页面

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有