【一起来烧脑】读懂WebApp知识体系

2019-07-16 15:41:38 浏览数 (1)

背景

很多小白知道什么是app,但是却不知道什么是webapp呢,webapp是指用HTML5编写的移动web应用

一个webapp可以在pc端,Android端,ios端进行运行

webapp开发的优点就是一套代码到处运行,缺点就是某些底层功能缺失,运行速度不如原生APP。

WebApp 创建安卓应用

保证电脑中可以看到手机。

在安卓系统中设置开发者选项为启用USB调试。

WebApp 打包HTML5

创建webView组件-用于显示网页内容

代码语言:javascript复制
//创建浏览器核心对象   
WebView wv = new WebView(this);     
//窗体中体检webview组件     
this.setContentView(wv);

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

代码语言:javascript复制
//出于安全考虑,webview默认禁用了js,必须要启用    
wv.getSettings().setJavaScriptEnabled(true);          
//加载本地的html文件     
wv.loadUrl("file:///android_asset/hybrid.html");
代码语言:javascript复制
//获取到网络使用权限    
<uses-permission android:name="android.permission.INTERNET"/>
wv.loadUrl("http:www.baidu.com");

WebViewClient框架

代码语言:javascript复制
wv.setWebViewClient(new WebViewClient(){        
    @Override      
public boolean shouldOverrideUrlLoading(WebView view, String url) {         
    view.loadUrl(url);           
    return super.shouldOverrideUrlLoading(view, url);
    }
});

WebApp 框架

jQuery框架

jQuery是一个js函数库

jQueryUI框架

jQueryUI是一个HTML组件库

Bootstrap框架

BootStrap是一个HTML/CSS/JS框架

AngularJS框架

Google AngularJS是一个JS框架,改变了网页的编写方式

jQueryMobile框架

jQueryMobile是一个HTML组件库

WebApp jQueryMobile

jQuery Mobile 可以应用于智能手机与平板电脑 jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页

代码语言:javascript复制
<meta name="viewport" content="width=device-width,initial-scale=1>

jqm的html文件中,body中必须至少有一个page,若用户未提供,jqm自动添加。

jqm中的所有的网页内容不能直接至于body中,必须至于page中。

0 人点赞