WebApp的设计彩民之家论坛9066777

2019-09-18 21:47 来源:未知

三. 把HTML5应用打包到Android手提式有线电话机中,创设二个HyBridApp

  1. 混合app,像原生app一样有Logo,点开后展现二个原生app的窗口(成为activity);此窗口中独有三个零部件-贰个浏览器内核,能够界定此浏览器内核只体现特定的网页

  2. 始建webView组件-用于体现网页内容

     //创建浏览器核心对象 WebView wv = new WebView; //窗体中体检webview组件 this.setContentView; 注意: 只留一个oncreate方法,其他都删掉
    
  3. 运用webView加载APK文件中打包好的地方网页

     //出于安全考虑,webview默认禁用了js,必须要启用 wv.getSettings().setJavaScriptEnabled; //加载本地的html文件 wv.loadUrl("file:///android_asset/hybrid.html"); 所有的HTML/css/js都必须保存Android项目的assets目录下
    
  4. 选择webview加载web服务器上的网页

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

一. 原生App和WebApp的比较

2.27读书经历分享#

Bruce_Zhu于2017.2.27


一、使用Eclipse创制安卓行使并设置到手提式无线电话机

  1. Android开荒条件的搭建

    1) 下载并安装java程序的周转条件-JDK,保证在命令行中输入java.exe能够运营

    2)下载并解压缩Android应用的开辟条件-ADT(AndroidDeveloperTools)

    1. 启动ADT: eclipse/eclipse.exe

    2. 创设Android应用程序(创制应用时选拔API19),选用自定义Logo,定制窗口中的内容,安装到手提式有线话机

  2. Android应用何设置贰个全屏展现的窗口

    修改项目清单文件 AndroidManifest.xml

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

二、把HTML5应用打包到Android手提式有线电电话机中,成立一个HyBridApp

  1. 混合app,像原生app同样有Logo,点开后表现二个原生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服务器上的网页

    //获取到网络使用权限
     <uses-permission android:name="android.permission.INTERNET"/>
    

    wv.loadUrl("http:www.baidu.com");

  5. 消除机关跳转到手提式有线电话机浏览器难题

    首先引进WebViewClient框架

    wv.setWebViewClient(new WebViewClient(){
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, String url) {
        view.loadUrl(url);
        return super.shouldOverrideUrlLoading(view, url);
        }
     });
    

三、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"元素

注意: jqm的html文件中,body中必需至少有贰个page,若客商未提供,jqm自动抬高

body中得以注解多个page,但暗中同意独有第多个能够来得

jqm中的全数的网页内容不可能平昔有关body中,必需至于page中

jqm中的全数样式都以经过预定义class来安装的,开垦者能够钦点成分的class,也可以为因素内定data-*扩展属性来促成让jqm增加class的作用

二、使用eclipse成立安卓行使并设置到手提式有线电话机

1、Android开荒情状的搭建

1) 下载并安装java程序的运行环境-JDK 保证在命令行中输入java.exe可以运行2)下载并解压缩Android应用的开发环境-ADT(AndroidDeveloperTools)3) 启动ADT: eclipse/eclipse.exe4) 创建Android应用程序(创建应用时选择API19),选择自定义图标,定制窗口中的内容,安装到手机

2、Android应用何设置一个全屏展现的窗口

修改项目清单文件 AndroidManifest.xml <application android:theme="@android:style/Theme.NoTitleBar.FullScreen">
  1. 运用webview加载web服务器上的网页

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

四. jQueryMobile

  1. jQuery Mobile是一个遵照HTML5的客户分界面系统,目的在于使全部智能手提式有线话机,华为平板和台式机设备上都能访谈的响应式网址和利用。

  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"元素 注意: jqm的html文件中,body中必须至少有一个page,若用户未提供,jqm自动添加 body中可以声明多个page,但默认只有第一个可以显示 jqm中的所有的网页内容不能直接至于body中,必须至于page中 jqm中的所有样式都是通过预定义class来设置的,开发者可以指定元素的class,也可以为元素指定data-*扩展属性来实现让jqm添加class的功能
  1. 前提
    1)保证“作者的Computer”中能够见见自个儿的无绳话机
    2)在安卓系统-》设置-》开垦者选项-》启用USB调节和测验
  2. Android开垦处境的搭建
    1) 下载并设置java程序的运作景况-JDK
    确认保障在命令行中输入java.exe能够运转
    2)下载并解压缩Android应用的支出条件-ADT(AndroidDeveloperTools)

一、原生App和WebApp的区别

1、Native App开发

Native App开垦即大家所称的价值观APP开荒形式(原生应用程式开拓情势),该开垦针对IOS、Android等不一致的手提式有线电话机操作系统要运用差异的言语和框架实行付出,该方式平日是由“云服务器数据 应用软件应用客商端”两部份构成,应用软件应用具备的UI成分、数据内容、逻辑框架均设置在三弟大终端上。

2、Web App开发

Web App开采就是一种框架型应用程式开辟格局(HTML5 APP框架开拓形式),该开垦具有跨平台的优势,该情势常常由“HTML5云网址 应用软件应用客商端”两部份构成,APP应用顾客端只需安装使用的框架部份,而选取的数码则是历次展开应用程式的时候,去云端取多少显现给手提式有线电电话机顾客。

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

  1. 原生(Native)App指:
    iOS: Object-C swift
    Android: java

  2. webApp指
    运用HTML5编辑的运动Web应用,贰个webapp大致能够不加修改的运作在PC/Android/iOS等。

    优势:一套代码随处运营
    缺点:有些底层功用缺点和失误,运转速度不及原生的App

      //出于安全考虑,webview默认禁用了js,必须要启用
      wv.getSettings().setJavaScriptEnabled(true);
      //加载本地的html文件
      wv.loadUrl("file:///android_asset/hybrid.html");
      所有的HTML/css/js都必须保存Android项目的assets目录下

3 使用JQM的步骤

1) 项目中引进jquery1.8 版本

  1. 启动ADT: eclipse/eclipse.exe
  2. 始建Android应用程序(创立应用时精选API19),选取自定义Logo,定制窗口中的内容,安装到手机
  1. jQuery是一个js函数库,简化了DOM操作,本质与DOM相同

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

  3. BootStrap是叁个HTML/CSS/JS框架,简化了响应式网页的编纂,提供了CSSReset HTML组件

  4. 谷歌AngularJS是叁个JS框架,改造了网页的编排方式,适用于以数量操作为主的SPA应用

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

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

  7. JQM首要分为四有的:
    页面&导航
    CSS框架
    组件
    表单控件

四. 框架整理

  1. Android应用何设置二个全屏显示的窗口
    修改项目清单文件 AndroidManifest.xml
    <application android:theme="@android:style/Theme.NoTitleBar.FullScreen">
    三. 把HTML5施用打包到Android手提式有线电电话机中,创造三个HyBridApp,

  2. 混合app,像原生app同样有Logo,点开后突显一个原生app的窗口(成为activity);此窗口中独有贰个零部件-一个浏览器内核(未有地址栏),能够界定此浏览器内核只显示特定的网页

  3. 成立webView组件-用于展现网页内容(即浏览器的为主)
    只保留三个oncreate内容
    //创制浏览器宗旨目的
    WebView wv = new WebView(this);
    //窗体中体格检查webview组件
    this.setContentView(wv);

      注意: 只留一个oncreate方法,其他都删掉
    
  4. 动用webView加载APK文件中打包好的地头网页

  1. 品类创设jqm目录,引进jqm必得能源文件
  1. 开创html文件,引进必得的css和js,并设置viewport
    <meta name="viewport" content="width=device-width,initial-scale=1>
  2. body中data-role="page"元素
    注意: jqm的html文件中,body中必需至少有叁个page,若客商未提供,jqm自动抬高
    body中可以证明四个page,但默许唯有第三个能够来得
    jqm中的全体的网页内容不能够一向有关body中,必得至于page中
    jqm中的全数样式都以经过预定义class来设置的,开荒者能够钦定成分的class,也得以为要素钦赐data-*庞大属性来达成让jqm增添class的功能

二. 使用eclipse创造安卓运用并安装到手提式有线电话机

版权声明:本文由彩民之家高手论坛发布于编程技术,转载请注明出处:WebApp的设计彩民之家论坛9066777