使用Android Studio 封裝WebApp

一、 安裝 Android Studio

方式一

安裝包下載地址 里面有帶jdk的安裝包

http://www.android-studio.org/

方式二 ( 需要翻墻 )

自行下載 jdk 和 Android Studio 安裝包

jdk 下載地址
http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Android Studio 下載地址
https://developer.android.com/studio/index.html


二、 下載 gradle構(gòu)建工具

下載頁(yè)面 地址
https://gradle.org/gradle-download/

Gradle 3.2.1 版本下載地址
https://services.gradle.org/distributions/gradle-3.2.1-bin.zip


三、配置 gradle 環(huán)境變量

解壓后把gradle 下的bin文件夾 的目錄路徑 添加到 系統(tǒng)環(huán)境中
例如 我的 bin目錄地址 D:\Program Files\gradle-3.2.1-bin\gradle-3.2.1\bin
怎么添加到 系統(tǒng)環(huán)境變量 請(qǐng)自行百度。。。

四、創(chuàng)建項(xiàng)目

創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目

創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目

創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目

創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目

五、界面簡(jiǎn)述

創(chuàng)建項(xiàng)目
創(chuàng)建項(xiàng)目

六 、目錄結(jié)構(gòu)


|--- app
    |--- manifests
    |---|--- AndroidManifest.xml  主配置文件
    
    |--- java
    |---|--- com.test.licationName 包名稱或者說(shuō)是項(xiàng)目名
    |---|---|---| MainActivity 主Activity 文件
    
    |--- res 
    |---|--- layout 布局文件 存儲(chǔ)目錄
    |---|---|--- activity_main.xml  主Activity 界面配置文件
    
    |---|--- mipmap 
    |---|---|---|--- ic_launcher.png  文件夾 下面存儲(chǔ)著不同 dpi的應(yīng)用圖標(biāo)
    
    |---|--- values 各種配置文件
    

七、創(chuàng)建webApp資源文件 存儲(chǔ)目錄

需要在 res 的同級(jí)目錄下創(chuàng)建一個(gè)啊assets 文件夾 用來(lái)存儲(chǔ) webapp的資源文件
創(chuàng)建這個(gè)文件需要在系統(tǒng)的資源管理器中創(chuàng)建,不可以在編輯器中直接創(chuàng)建

怎么打開(kāi)文件夾?
怎么打開(kāi)文件夾?

在同級(jí)目錄下創(chuàng)建 assets 文件夾 并把 已經(jīng)寫好的 webapp資源文件復(fù)制進(jìn)來(lái)


復(fù)制后的目錄結(jié)構(gòu)
復(fù)制后的目錄結(jié)構(gòu)

八、創(chuàng)建webview控件 并 實(shí)例化控件 以及開(kāi)啟javascript渲染

打開(kāi) app/res/layout/activity_main.xml
并取消默認(rèn)的內(nèi)邊距屬性
新建一個(gè)webview控件
設(shè)置webview控件的ID為mWebView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.chen_blog.chen.MainActivity">
    <!--
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    -->
   <!-- <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!" />
    -->

    <WebView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/mWebView">
    </WebView>
</RelativeLayout>

修改 /app/java/com.chen_blog.chen/MainActiviy 文件

導(dǎo)入 webview 組件

import android.webkit.WebView;
import android.webkit.WebViewClient;

定義類屬性

private WebView mWebView;

實(shí)例化組件

mWebView = (WebView) findViewById(R.id.mWebView);

使用loadurl方法 引入首頁(yè)

mWebView.loadUrl("file:///android_asset/index.html");

最終實(shí)現(xiàn)代碼


package com.chen_blog.chen;

import android.app.Activity;
import android.os.Bundle;

import android.webkit.WebView;
import android.webkit.WebViewClient;


public class MainActivity extends Activity {

    private WebView mWebView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // 實(shí)例化
        mWebView = (WebView) findViewById(R.id.mWebView);
        
        // 開(kāi)啟javascript 渲染
        mWebView.getSettings().setJavaScriptEnabled(true);
        mWebView.setWebViewClient(new WebViewClient());
        
        // 載入內(nèi)容
        mWebView.loadUrl("file:///android_asset/index.html");

//  測(cè)試遠(yuǎn)程的    mWebView.loadUrl("http://www.itxdl.cn");
    
    }

}

九、配置網(wǎng)絡(luò)權(quán)限

打開(kāi) app/manifests/AndroidManifest.xml
再 manifset 標(biāo)簽 下面 新增一行

    <!-- 申請(qǐng) 網(wǎng)絡(luò)權(quán)限-->
    <uses-permission android:name="android.permission.INTERNET"/>

最終效果

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.chen_blog.chen">
<!-- 申請(qǐng) 網(wǎng)絡(luò)權(quán)限-->
    <uses-permission android:name="android.permission.INTERNET"/>

<application .......省略余下內(nèi)容

十、創(chuàng)建 并運(yùn)行 測(cè)試用的安卓虛擬環(huán)境

創(chuàng)建按鈕
創(chuàng)建按鈕

創(chuàng)建按鈕
創(chuàng)建按鈕

選擇手機(jī)類型
選擇手機(jī)類型

選擇系統(tǒng)環(huán)境
選擇系統(tǒng)環(huán)境

創(chuàng)建完成
創(chuàng)建完成

十一、測(cè)試

點(diǎn)擊運(yùn)行按鈕
點(diǎn)擊運(yùn)行按鈕

選擇運(yùn)行的模擬環(huán)境
選擇運(yùn)行的模擬環(huán)境

模擬環(huán)境的界面效果
模擬環(huán)境的界面效果

打開(kāi)自己app
打開(kāi)自己app

app打開(kāi)效果
app打開(kāi)效果

十二、導(dǎo)出apk安裝包

(1)Android Studio菜單 Build->Generate Signed APK

(2)彈出窗口

(3)創(chuàng)建密鑰庫(kù)及密鑰,創(chuàng)建后會(huì)自動(dòng)選擇剛創(chuàng)建的密鑰庫(kù)和密鑰(已擁有密鑰庫(kù)跳過(guò))
點(diǎn)擊“Create new...”按鈕創(chuàng)建密鑰庫(kù)


Key store path:密鑰庫(kù)文件的地址
Password/Confirm:密鑰庫(kù)的密碼
Key:
Alias:密鑰名稱
Password/Confirm:密鑰密碼
Validity(years):密鑰有效時(shí)間
First and Last Name:密鑰頒發(fā)者姓名
Organizational Unit:密鑰頒發(fā)組織
City or Locality:城市
Country Code(XX):國(guó)家

(4)選擇已存在密鑰庫(kù)及密鑰(在(3)中創(chuàng)建密鑰庫(kù)后跳過(guò)此步驟)
點(diǎn)擊“Choose existing...”按鈕找到密鑰庫(kù)文件
Key store password輸入已選擇的密鑰庫(kù)文件的密碼
點(diǎn)擊Key alias后的“...”按鈕,選擇或者創(chuàng)建一個(gè)密鑰


選中“Use an existing key”,在后面的選擇框中選擇密鑰
選中“Create a new key”,創(chuàng)建新的密鑰,詳見(jiàn)(3)
點(diǎn)擊OK按鈕
Key passowrd輸入選擇的密鑰的密碼

(5)點(diǎn)擊“Next”按鈕,選擇保存路徑后,點(diǎn)擊“Finish”按鈕完成

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容