快速入门Webapp

2017-02-28  本文已影响173人  我不叫奇奇

一. 原生App和WebApp的比较

  1. 原生(Native)App指：

    iOS: Object-C swift
    Android: java

  2. 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

   <application android:theme="@android:style/Theme.NoTitleBar.FullScreen">

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

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

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

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

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

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

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

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

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

        //获取到网络使用权限
    <uses-permission android:name="android.permission.INTERNET"/>
    wv.loadUrl("http:www.baidu.com");

四. 框架整理

  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

         <meta name="viewport" content="width=device-width,initial-scale=1>

  4) body中data-role="page"元素

注意：

上一篇 下一篇

猜你喜欢

热点阅读