AndroidのWebViewでAngularで作成したWebページからアプリへデータを渡す
- Angular側のソース
以下を宣言する
top.component.ts
declare global {
interface Window {
android: any;
}
}
アプリへデータを渡す箇所(抜粋)
top.component.ts
let model : TicketModel = new TicketModel();
model.id = "00001";
model.name = "テスト";
let jsonStr : string = JSON.stringify(model);
window.android.showMessage(jsonStr);
TicketModelクラスは以下の通り
ticket.model.ts
export class TicketModel {
id? : string;
name? : string;
}
- Android側のソース
(activiti_main.xmlにWebViewを定義し、idをwebViewとしているものとする)
MainActivity.kt
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val webView :WebView = findViewById(R.id.webView)
webView.setWebViewClient(WebViewClient());
webView.getSettings().javaScriptEnabled = true;
webView.getSettings().allowFileAccess = true;
//http://localhostにアクセスできるよう設定
WebView.setWebContentsDebuggingEnabled(true);
val webAppInterface = WebAppInterface(this@MainActivity)
webView.addJavascriptInterface(webAppInterface, "android");
//localhostで起動したAngularを表示する
webView.loadUrl("http://localhost:4200")
}
}
Angularからのデータを受け取る
WebAppInterface.kt
class WebAppInterface(private val context:Context) {
@JavascriptInterface
fun showMessage(message:String):String {
//JSON形式の文字列で受けてデコードする
val model:TicketModel = Json.decodeFromString<TicketModel>(message)
//受け取ったデータをToastで表示
Toast.makeText(context, model.id + ":" + model.name, Toast.LENGTH_LONG).show();
return message;
}
}
TicketModelクラスは以下の通り
TicketModel.kt
@Serializable
data class TicketModel(
val id:String = "",
val name:String = ""
)