H5-3.01webapp与jquerymobile

一. 原生App和WebApp的比较

原生(Native)App指：

iOS: Object-C swift
Android: java
webApp指

使用HTML5编写的移动Web应用，一个webapp几乎可以不加修改的运行在PC/Android/iOS等。

优势：一套代码到处运行
劣势：某些底层功能缺失，运行速度不如原生的App

二. 使用eclipse创建安卓应用并安装到手机

1. 前提

    1）保证“我的电脑”中可以看到我的手机
    2）在安卓系统-》设置-》开发者选项-》启用USB调试

2. Android开发环境的搭建

    1） 下载并安装java程序的运行环境-JDK
   
           保证在命令行中输入java.exe可以运行

    2）下载并解压缩Android应用的开发环境-ADT(AndroidDeveloperTools)

    3) 启动ADT: eclipse/eclipse.exe

    4) 创建Android应用程序(创建应用时选择API19)，选择自定义图标，定制窗口中的内容，安装到手机

3. Android应用何设置一个全屏显示的窗口

     修改项目清单文件 AndroidManifest.xml

三. 把HTML5应用打包到Android手机中，创建一个HyBridApp,

 1. 混合app,像原生app一样有图标,点开后呈现一个原生app的窗口(成为activity)；
     此窗口中只有一个组件-一个浏览器内核(没有地址栏),可以限定此浏览器内核只显示特定的网页


 2. 创建webView组件-用于显示网页内容(即浏览器的核心)

     //创建浏览器核心对象
     WebView wv = new WebView(this);
     //窗体中体检webview组件
     this.setContentView(wv);

     注意： 只留一个oncreate方法，其他都删掉

 3. 使用webView加载APK文件中打包好的本地网页

      //出于安全考虑，webview默认禁用了js,必须要启用
      wv.getSettings().setJavaScriptEnabled(true);
    //加载本地的html文件
      wv.loadUrl("file:///android_asset/hybrid.html");

      所有的HTML/css/js都必须保存Android项目的assets目录下
     

  4. 使用webview加载web服务器上的网页

       //获取到网络使用权限
       
       wv.loadUrl("http:www.baidu.com");

在这说一下，使用eclipse会存在一个读取本地文件数据的跨域问题，在eclipse里面比较难解决，所以最好还是放在本地服务器上面，使用ip地址访问跨域解决，另外还推荐一种，使用hbuilder打包app，可以省一点事，会帮你解决跨域的问题。
四. 框架整理

1. jQuery是一个js函数库，简化了DOM操作，本质与DOM相同 

2. jQueryUI是一个HTML组件库，丰富了HTML功能

3. BootStrap是一个HTML/CSS/JS框架，简化了响应式网页的编写，提供了CSSReset+HTML组件

4. Google AngularJS是一个JS框架，改变了网页的编写方式，适用于以数据操作为主的SPA应用

5. jQueryMobile是一个HTML组件库，适用于App的开发

五. jQueryMobile

1.  jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

2. JQM主要分为四部分：
   
     页面&导航
     CSS框架
     组件
     表单控件


3 使用JQM的步骤
    
  1） 项目中引入jquery1.8+版本

  2)  项目创建jqm目录，引入jqm必需资源文件

        jquery-mobile.css
        jquery-mobile.js
        images/...

  3)  创建html文件，引入必需的css和js,并设置viewport

 
 一. JQueryMobile 
 1.  jQuery Mobile is a HTML5-based user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices.

2. JQM主要分为四部分：
   
     页面&导航
     CSS框架
     组件
     表单控件

3 使用JQM的步骤
    
  1） 项目中引入jquery1.8+版本

  2)  项目创建jqm目录，引入jqm必需资源文件

        jquery-mobile.css
        jquery-mobile.js
        images/...

  3)  创建html文件，引入必需的css和js,并设置viewport

         
 
 二. jqueryMobile-page跳转及过场动画 
  
  页面跳转可以使用a/button/input等，推荐使用a-会自动添加过场动画 
  可以跳转到外部的完整HTML页面；也可以跳转到当前HTML中的另一个page,如 
  
  1)跳转到外部完整的HTML页面

   

 2)跳转到当前HTML中的另一个page

   

 3) 已模态框形式打开另一个page

    
 
  
   JQM为页面切换添加了非常丰富的过渡动画，使用方法
 
 可用的动画效果有：
 fade:默认动画
 pop:弹出动画
 slide:滑动动画
 slideup:向上滑动动画
 trun:翻转动画
 flip:翻转动画
 flow:流动动画
 none:无动画
 
 
 
 
 三. jqueryMobile-按钮 
  
  可以使用A.button.input元素实现按钮的样式 
  可以使用data-role="button"属性实现按钮样式，也可以指定class实现按钮的样式，如ui-btn ui-corner-all ui-shadow 
  按钮默认是块级显示，可以使用ui-btn-inline实现行内按钮 
  按钮上可以有文字和图标，若存在图标，必须指定与文字的位置关系,可选值
 btn-icon-left
 btn-icon-right
 btn-icon-bottom
 btn-icon-top 
  
 设置纯图标的话，不能在设置图片的位置

创建带图标的按钮，图标功能：后退，前进，刷新，配置，用户，定位，主页，对勾....
 
  
  按钮可以放到page的header里 
  
  header中的第一个按钮默认处于左侧，第二个按钮处于右侧，一般只放两个
 
 

   按钮 默认就是按钮效果

 
 
 四. jqueryMobile-导航条 
   1. 基本结构

      
        
          

        

      

  2. 注意

      导航条中一般最多只能有五个项目，超过5个会在一行中显示2个

      导航条可以出现在page的Header/Main/Footer

      处于Header和Footer中的navbar默认会占满整行，并和标题字错开
 
 五. jqueryMobile-load加载器 
   显示加载器： $.mobile.loading("show");

  取消加载器：$.mobile.loading("hidden");
 
 六. jqueryMobile-panel(面板) 
   1) 面板在目前版本的jqp中只能放在page中，header之前和footer之后

     

          

          

          

              打开面板

          

          

          

     

  2) 面板组件可以指定出现位置和打开方式

     data-position="left/right"

     data-display = "reveal/overlay/push"


      
        标题字
        折叠的内容

H5-3.01webapp与jquerymobile

标题字

你可能感兴趣的:(H5-3.01webapp与jquerymobile)