混合APP開發的套路(四):在html頁面中開啟專案中的Activity
前面我們學習了android和 網頁(javascript)的互動,互相呼叫函式。
今天我們要來學習,如何在html頁面中開啟安卓專案中的Activity。
1、準備
做一個登入介面。
新建佈局檔案login.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="使用者名稱:"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="請輸入使用者名稱"
android:id="@+id/login_username"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="密碼:"
/>
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:inputType="textPassword"
android:text="請輸入密碼"
android:ems="10"
android:id="@+id/login_pwd"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="登入"
android:id="@+id/login_btn"
android:layout_gravity="center_horizontal"/>
</LinearLayout>
新建登入介面的Activity檔案LoginActivity.java
:
package com.example.dev.firtapp;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
public class LoginActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
// 設定佈局
this.setContentView(R.layout.login);
}
}
2、需要註冊,在全域性配置檔案裡
AndroidManifest.xml
加入下面內容:
<activity android:name=".LoginActivity">
<intent-filter>
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.DEFAULT" />
</intent-filter>
</activity>
3、來到webView的Activity,處理網頁介面邏輯。
WebViewActivity.java:
public class WebViewActivity extends AppCompatActivity {
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.setContentView(R.layout.webview); // 設定layout
// 建立一個webView元件
final WebView webView = new WebView(this);
setContentView(webView);
// 給webView新增一個js介面
webView.addJavascriptInterface(this,"www"); // "www"名字可隨意
// webView相關設定
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);
// 載入本地html
AssetManager assetManager = this.getAssets();
try {
InputStream inputStream = assetManager.open("index.html");
byte[] buffer = new byte[inputStream.available()];
inputStream.read(buffer);
// 讀取html內容
String htmlContent = new String(buffer,"utf-8");
inputStream.close();
// 載入到webView中
webView.loadData(htmlContent,"text/html","utf-8");
} catch (IOException e) {
e.printStackTrace();
}
}
@JavascriptInterface
public void openLogin(){ // 開啟登入框
this.runOnUiThread(new Runnable() {
@Override
public void run() {
Intent intent = new Intent();
// 當前是WebViewActivity類,需要開啟的是LoginActivity類
intent.setClass(WebViewActivity.this, LoginActivity.class);
startActivity(intent);
}
});
}
}
可以看出:我們載入了index.html這個網頁,並且寫了一個javascript的介面方法openLogin()
,該方法裡實現了開啟LoginActivity的業務。
4、在index.html裡
<script>
function login(){
// window.www.openLogin();
www.openLogin();
}
</script>
<button onclick="login()"> login</button>
相關文章
- Flutter與Native的混合開發之--Andriod專案呼叫Flutter專案頁面-初探Flutter
- Spring在開發專案中起的作用Spring
- 在 Laradock 中開發 Vue 專案Vue
- Android中Activity的四種啟動方式Android
- 基於Html對父頁面開啟子頁面Dialog()的使用HTML
- 原生App專案整合flutter混合開發詳細指南APPFlutter
- Cordova+vue 混合app開發(一)建立Cordova專案VueAPP
- Android開發教程 - 使用Data Binding(三)在Activity中的使用Android
- 測試驅動開發在專案中的實踐
- 在自己的 app 中使用 Sarfari 開發工具除錯 Web 頁面APP除錯Web
- Vue中在新視窗開啟頁面 及 Vue-routerVue
- Hybrid 混合App開發APP
- 用H5頁面開啟APPH5APP
- Vue專案中使用Html+Css使div在頁面中居中顯示(水平+垂直)VueHTMLCSS
- 現有Android專案中整合Flutter/Flutter混合開發實戰(一)AndroidFlutter
- 在Flutter專案中開發IOS桌面元件(WidgetExtension)FlutteriOS元件
- 在blender中開啟pmx檔案
- H5頁面開啟app的一些思考H5APP
- Android 網頁開啟App進入對應頁面Android網頁APP
- 基於.NetCore開發部落格專案 StarBlog - (7) 頁面開發之文章詳情頁面NetCore
- 20.原生專案和Flutter的混合開發(一)Flutter
- 21.原生專案和Flutter的混合開發(二)Flutter
- 22.原生專案和Flutter的混合開發(三)Flutter
- 統一為專案中的Activity新增Toolbar
- 00 在Windows環境中開發Cordova專案的準備工作Windows
- uni-app 混合開發APP
- Halo 開源專案學習(四):釋出文章與頁面
- [譯] 在小專案開發中,Roda 對比 Sinatra
- Ionic開發App中重要的部分APP
- 一種在 MediaWiki 頁面中引入 Vue 專案或者其他框架的辦法Vue框架
- webpack多頁面入口生產專案開發配置Web
- 專案管理——遊戲開發中的成本管理專案管理遊戲開發
- 專案開發過程中的管理規範
- web開發實戰教程:Apache Shiro在web專案中的應用WebApache
- Android開發_在Android Studio中搜尋專案中出現過的字串Android字串
- 理想中的專案管理app專案管理APP
- 電商專案app開發APP
- Android開發教程 - 使用Data Binding(四)在Fragment中的使用AndroidFragment
- VScode如何在瀏覽器中開啟html檔案VSCode瀏覽器HTML