移动开发

【来源地址】 http://www.cnblogs.com/pifoo/archive/2011/05/28/webkit-webapp.html http://classjs.com/tag/%E7%A7%BB%E5%8A%A8%E7%AB%AF%E5%BC%80%E5%8F%91/ http://java-mans.iteye.com/blog/1639503 http://www.zhangxinxu.com/wordpress/?p=2568 一、 移动WebApp简单介绍 WebApp 简介 Web app是一种通过网络（如互联网或内联网）访问的应用程序；也可以指计算机软件承载在浏览器支持环境下或使用浏览器支持语言（如JavaScript）并依赖于web 浏览器来渲染的应用程序。Web app的流行归功于网页浏览器的普及，以及使用这一轻薄客户端方便的用户体验。不必下载安装就可以实现更新和维护，具有支持跨平台的内在属性，是web app开始流行的关键原因。典型的web app产品包括web邮箱、web商店、wikis等等。 WebApp的优点 ◆通过兼容性浏览器实现配置而不需要任何复杂的“转出”步骤； ◆浏览器应用程序几乎不需要客户端上的磁盘空间； ◆新功能从服务器自动传递给用户，用户自己不必升级程序； ◆可以轻松整合进入其他服务类web程序； ◆跨平台的兼容性

必须给父容器div定义css属性display:box，其子容器才可以进行划分(如果定了display:box则该容器定义为内联元素，使用margin让其居中是无效的，可以在其父元素设置text-align:center让其居中); 子元素属性： box-flex:比例值; 目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)。 注： 如果子元素设置了固定宽度和margin，则该子元素直接应用宽度值，其它没有设置的则在父容器的宽度基础上减去子容器设置的固定宽度和margin值，在剩下的宽度基础上按一定比例进行划分分配。 代码块： <div> <p id="p1">web</p> <p id="p2">css</p> </div> 对子元素进行设置 效果 获取更多的文章，欢迎关注微信公众号 来源： CSDN 作者： 海生_php和web前端 链接： https://blog.csdn.net/zhs45656/article/details/52101420

原文链接： http://blog.csdn.net/lovelyelfpop/article/details/50425744 本插件有2个版本号：sencha touch 版本号和 extjs6 modern 版本号（不支持extjs6.2+） 联系我的时候。请说明你用的是什么框架。 请看演示样例图，仿照的QQ的列表横滑删除。 支持Ext.dataview.List和Ext.dataview.DataView。 本功能是Sencha touch插件类（不是Cordova插件），能够在不论什么list上使用。 用法也非常easy。仅仅要在你须要加入横滑操作功能的list上。添加一个plugins配置就能够了。 临时不公开源代码，须要的请联系我QQ（本文下方）。 我群里一位程序猿朋友应用上了我的插件类，效果例如以下： 欢迎增加Sencha Touch + Phonegap交流群 1群： 194182999 (满) 2群： 419834979 共同学习交流（博主QQ： 479858761 ） 来源： CSDN 作者： weixin_34342905 链接： https://blog.csdn.net/weixin_34342905/article/details/85916873

如果你是一名前端er,又想在移动设备上开发出自己的应用，那怎么实现呢？幸好，webkit内核的浏览器能帮助我们完成这一切。接触 webkit webApp的开发已经有一段时间了，现把一些技巧分享给大家 ： 1. viewport： 也就是可视区域。对于桌面浏览器，我们都很清楚viewport是什么，就是出去了所有工具栏、状态栏、滚动条等等之后用于看网页的区域， 这是真正有效的区域。由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个： width - // viewport 的宽度 （范围从200 到10,000，默认为980 像素） height - // viewport 的高度 （范围从223 到10,000） initial-scale - // 初始的缩放比例 （范围从>0 到10） minimum-scale - // 允许用户缩放到的最小比例 maximum-scale - // 允许用户缩放到的最大比例 user-scalable - // 用户是否可以手动缩 (no,yes) 那么到底这些设置如何让Safari 知道？其实很简单，就一个meta，形如： <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> //编码 <meta

一、 样式一 我们要实现上图中的效果，需要如下的操作： 从工具栏上的“Smobiler Components”拖动一个SliderView控件到窗体界面上 修改SliderView的属性 Items属性 获得和设置标签视图集合，打开集合编辑器，并点击“添加”，分别填写ResourceID属性（菜单项图片名称），Text（菜单项文本），Value（内部值，不在界面上显示），如图1、图 2； 图 1设置界面1 图 2设置界面2 Location属性 让控件显示在合适的位置（0, 15），如图 3； 图 3设置界面 Mode属性 获取或设置获取图像模式，默认设置为“File”， 表示直接从文件中读取图像，如图 4； 图 4设置界面 若将该属性设置为“Customize”，表示可以从自定义的接口中获取图像的二进制数据。 Size属性 让SliderView控件大小为（120, 38），如图 5； 图 5设置界面 SizeMode属性 设置如何显示图片，默认设置为“Zoom”，即极速显示图片，如图 6； 图 6设置界面 若SizeMode属性设置为“StretchImage”时，图片可以按图片框的大小比例缩放显示。 Visible属性 设置控件是否显示，将Visible属性设置为“True”，如图 7； 图 7设置界面 若将Visible属性设置为“False”，控件则无法显示。

其实写这篇博客的想法在年前已经有了，但一直在犹豫要不要写，一是因为写出来肯定会有人骂的了，刚过完春节的，在自己地头找骂，实在是晦气；二是因为我对行业趋势的眼光向来不准，估计今天的想法也是十有八九会错，错了日后自己的看着也不爽。但是又觉得如果心里有想法，不记录下来，思绪就飘远了，年代久了之后，都忘记自己曾经也有过“看法”，应该会为自己的庸碌后悔吧？所以还是写了。写了归写了，请各位看官往下读之前，先整理好心情，做到：一是自己对世界有自己的看法；二是认同别人的看法可以跟自己不同；三是对别人的看法跟自己不同时不要生气因为气的是你自己别人替不了。如果做到了这三点，再往下读，因为下文的观点会很偏激、很有态度，我欢迎你留言讨论、发表不同的见解，如果纯粹是谩骂（或有很多脏词），建议你自己开一篇博客或发到你的微博，不要评论本文，因为我会删除“纯粹是谩骂（或有很多脏词）”的评论。 ActionScript/MXML其实就是说 Adobe Flash 平台不值得进入。在 2011 年，Flash 终于能够开发 iOS/Android 应用，再加上网页游戏市场火爆，估计很多人会想要进入这个平台。但我有不同的看法，列几点理由： 1、Adobe 是市场导向的，没有技术领袖气质。视频网站兴起后，Flash Player 的新版本就加强视频播放；网页游戏兴起后，新版本就加强图形渲染；移动设备开发兴起后

微信浏览器图片上传 　　一年前给公司写过一个手机端项目，一个基于vue框架的项目，主要适用手机浏览器、微信浏览器。遇到的最让人头疼，最麻烦的bug就是微信浏览器图片上传问题。选择图片的时候直接打开文件然后就到了这里： 这个时候再点图片点击之后关闭相册但是图片并不会填充到页面中。必须点左上角展开到这里，再选择相册才能成功上传： 　　这样对于用户来说体验自然是很差的。 　　一开始以为是vue的原因，后来经过研究发现所现所有的前端上传控件都是基于input的，并不会因为使用了vue框架出现问题。后来经过多次测试才发现这个问题只会出现在微信浏览器的应用分身中。现在的智能手机大部份都有应用分身功能，微信qq都是两个，第二个微信就会出现这种情况。 解决办法就是使用jssdk上传文件，首先判断是否是微信浏览器，如果是就采用jssk上传，否则就使用input上传。 ios设备层级问题： 　　position: fixed;相对于浏览器窗口定位，再其他设备中设置一个足够高的z-index就能使他显示在总高层级上。但是ios设备时如果它的父级有定位，不论给它多高的z-index，它都会显示在它的父级之下。 　　解决办法：避免position: fixed;的父级有定位 ios微信浏览器复制页面地址： 　　如图vue页面，在ios上点击复制链接只能复制到http://www.xxxxx.com域名

在了解了PhoneGap中都有哪些事件之后，本节将开始对这些事件的用法进行详细地介绍。本节要介绍的是程序加载事件，也就是deviceready、pause和resume这3个事件。 【范例4-2 程序加载事件的使用】 01 <!DOCTYPE html> 02 <html> 03 <head> 04 <meta charset="utf-8"> 05 <title>程序加载事件的使用</title> 06 <!--引入PhoneGap脚本文件--> 07 <script src="js/cordova-2.7.0.js" type="text/javascript"></script> 08 // 声明当设备加载完毕时的回调函数onDevieReay 09 document.addEventListener("deviceready", onDeviceReady, false); 10 // 当设备加载完毕后就会执行该函数 11 function onDeviceReady() { 12 // 当该函数执行后，弹出对话框告诉用户设备已经加载完毕了 13 alert("设备加载完毕！"); 14 // 一般来说需要保证在设备加载完毕之后再去执行其他操作 15 // 声明当程序被放置到后台暂停时执行的回调函数onPause 16 document.addEventListener(

之前本博连载过《构建跨平台APP：jQuery Mobile移动应用实战》一书，深受移动开发入门人员的喜爱。 从现在开始，连载它的孪生姐妹书phoneGap移动应用实战一书，希望曾经是小白的你们，已经变成了大白。 3.6 PhoneGap中的API能干什么 本章主要介绍进行PhoneGap开发前所需要做好的准备，那么现在是不是该介绍一些关于PhoneGap的事了呢？其实PhoneGap就是将HTML写成的页面显示出来，然后通过特定的JavaScript获取几组数据而已。 虽然说使用PhoneGap进行开发主要是依靠HTML各方面的知识，但对于一名PhoneGap开发者来说，最主要的还是PhoneGap各种API的用法。PhoneGap为开发者提供了电池状态、相机、联系人、文件系统、音频等API接口，本节将一一介绍它们的功能和用途。 1．Accelerometer（加速度传感器） Accelerometer也就是一般人们口中的重力感应，可以用它来获取手机各个方向的加速度。比如，可以利用重力加速度约等于10的特点来获取当前手机的方向，可以在一些游戏中利用它和一些算法实现体感操作（如说模拟用户对方向盘的操作）。 2．Camera（摄像头） Camera正如它的字面意思，可以通过它来获取摄像头采集到的信息，不过一般来说用处不大。 3．Capture（采集工具）

除了能够将HTML页面打包成可以直接安装运行的APP外，PhoneGap的一个最大优势在于可以通过JavaScript调用设备来访问设备上的硬件信息，从而实现一些原本只有依靠原生SDK才能够达到的目的。范例5-1就展示了一个利用API来获取设备信息的例子。 【范例5-1 利用PhoneGap获取设备信息】 <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script src="cordova.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript" charset="utf-8"> //设置触发器函数onDeviceReady() document.addEventListener("deviceready", onDeviceReady, false); // PhoneGap加载完毕，现在可以安全地调用PhoneGap方法 function onDeviceReady() { // 现在可以安全使用PhoneGap API //获取页面中id为deviceProperties的元素 var element =