WebView和jQueryMobile
2017-02-27 本文已影响0人
Kagashino
WebView
WebView是Java的一个Package，可以让安卓终端解释运行HTML页面
使用Eclipse或者Android Studio创建一个空项目时，软件会自动生成一个默认活动页面Hello World，但是这个页面是有导航条的，如果我们要生成一个不带导航条的活动，需要在创建项目下的AndroidManifest.XML文件进行修改：
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.hybrid"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="19"
android:targetSdkVersion="19" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@android:style/Theme.Black.NoTitleBar.Fullscreen" >//修改这一行：意为
//黑色不带导航条的全屏活动
<activity
android:name="com.example.hybrid.MainActivity1"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
在主Java文件中，去掉不必要的代码，导入WebView包获取：
package com.example.hybrid;
import android.app.Activity;
import android.app.ActionBar;
import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.webkit.WebView;//导入这个
import android.os.Build;
public class MainActivity1 extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
WebView wv = new WebView(this);
this.setContentView(wv);
wv.loadUrl("file:///android_assets/index.html");
}
}
jQuery Mobile
讲咁多做咩啊，直接上骨架，看看都需要导入什么文件和元素属性的写法
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>这里是题头</h1>
</div>
<div data-role="main" class="ui-content">
<p>主题部分</p>
</div>
<div data-role="footer">
<h1>页脚</h1>
</div>
</div>
</body>
</html>
