博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第十章 kotlin与H5混合开发
阅读量:780 次
发布时间:2019-03-24

本文共 9268 字,大约阅读时间需要 30 分钟。

第十章 kotlin与H5混合开发


文章目录


前言

kotlin与H5混合开发。


一、Kotlin与H5通信方式一(H5主动)

1.H5调用Kotlin方法

H5调用Kotlin方法

@JavascriptInterface //安卓4.2以后,不加上@JavascriptInterface,H5不能调用kotlin方法    fun showToast(json:String){
//Toast.makeText(mContext,json,Toast.LENGTH_SHORT).show() //Toast方法1 mContext?.let {
it.toast(json) } //Toast方法2 }

二、Kotlin与H5通信方式二(Kotlin主动)

1.Kotlin调用H5方法

Kotlin调用H5方法

private inner class MyWebViewClient : WebViewClient() {
//页面加载完成调用 override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url) var json = JSONObject() json.put("name","Kotlin") mWebView.loadUrl("javascript:showMessage($json)") //Kotlin与H5通信方式二(Kotlin主动) } }

三、Kotlin与H5通信方式三(callback)

H5 callback调用kotlin方法:H5通知Kotlin获取数据,然后Kotlin回传数据给H5

1.示例1

代码:

@JavascriptInterface    fun getStudentData(){
// println("获取学生数据") //异步操作,子线程请求服务器 doAsync {
var url = URL("http://192.168.0.103:8080/Test1/student.json") //变成字符串 val result = url.readText() println("获取学生数据="+result) //callback步骤2:回传数据给H5 //调用js方法必须在主线程 mContext?.let {
it.runOnUiThread {
mWebView?.let {
// it.loadUrl("javascript:receiveStudentData("+result+")") it.loadUrl("javascript:receiveStudentData($result)") } } } } }

2.示例2

代码:

/**     * Kotlin与H5通信方式三(callback)     */    @JavascriptInterface    fun getStudentData2(json:String){
var jsJson = JSONObject(json) var callback = jsJson.optString("callback") //异步操作,子线程请求服务器 doAsync {
var url = URL("http://192.168.0.103:8080/Test1/student.json") //变成字符串 val result = url.readText() println("获取学生数据="+result) //callback步骤2:回传数据给H5 //调用js方法必须在主线程// mContext?.let {
// it.runOnUiThread {
// mWebView?.let {
// it.loadUrl("javascript:$callback($result)")// }// }// } callbackJavaScript(callback, result) } } /** * 统一管理所有kotlin回调js方法 */ private fun callbackJavaScript(callback: String?, result: String) {
mContext?.let {
it.runOnUiThread {
mWebView?.let {
it.loadUrl("javascript:$callback($result)") } } } }

四、Kotlin与H5通信-完整代码

1.Kotlin与H5通信-完整代码

Kotlin与H5通信-完整代码

\webapps\Test1\indexForJSAndKotlin.html

	
test For JS And Kotlin
H5网页区域:

\webapps\Test1\student.json

{
"status":"success", "gender":"男", "name":"张三", "age":"20", "height":"180厘米", "city":"北京市", "weight":"60公斤", "phone":"10086", "class":"2班", "Interest":"篮球"}

\app\src\main\java\com\example\testkotlin1\WebTestActivity.kt

import android.os.Bundleimport android.webkit.WebChromeClientimport android.webkit.WebViewimport android.webkit.WebViewClientimport androidx.appcompat.app.AppCompatActivityimport kotlinx.android.synthetic.main.activity_web_test.*import org.jetbrains.anko.sdk27.coroutines.onClickimport org.json.JSONObject/** * Kotlin与H5混合开发练习-知识点: * * Kotlin与H5通信的三种方式 * H5 callback调用Kotlin * 本地模板动态刷新页面 * 自定义Kotlin与H5通信接口协议 */class WebTestActivity : AppCompatActivity() {
//懒加载:使用了才初始化 private val mWebView: WebView by lazy {
webview } override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState) setContentView(R.layout.activity_web_test) tv_title.setText("测试") //直接写View的id(tv_title)即可 //button.onClick { } setWebView() } //lambda表达式-示例 //var add = {a:Int,b:Int -> a + b} var setWebView = {
//1.开启Kotlin与H5通信开关 mWebView.settings.javaScriptEnabled = true //2.设置2个WebViewClient mWebView.webViewClient = MyWebViewClient() mWebView.webChromeClient = MyWebChromeClient() //Kotlin与H5通信方式1:H5调用Kotlin方法 //设置Kotlin与H5通信桥梁类 //mWebView.addJavascriptInterface(对象,字符串):对象.方法名, 字符串:就是参数1对象的别名 mWebView.addJavascriptInterface(JavaScriptMethods(this,mWebView),"jsInterface") //3.加载网页:在线模板,便于调试// mWebView.loadUrl("http://192.168.0.103:8080/Test1/indexForJSAndKotlin.html") //本地模板:网页保存到assets目录,提高加载速率 mWebView.loadUrl("file:///android_asset/kotlin/indexForJSAndKotlin.html") } private inner class MyWebViewClient : WebViewClient() {
//页面加载完成调用 override fun onPageFinished(view: WebView?, url: String?) {
super.onPageFinished(view, url) //Kotlin与H5通信方式2:Kotlin调用H5方法 //mWebView.loadUrl("javascript:方法名(参数)") var json = JSONObject() json.put("name","Kotlin")// mWebView.loadUrl("javascript:showMessage("+json.toString()+")")//方法1 mWebView.loadUrl("javascript:showMessage($json)")//方法2 //Kotlin与H5通信方式二(Kotlin主动) } } private class MyWebChromeClient : WebChromeClient() {
//加载进度条 }}

\app\src\main\java\com\example\testkotlin1\JavaScriptMethods.kt

import android.content.Contextimport android.content.Intentimport android.net.Uriimport android.webkit.JavascriptInterfaceimport android.webkit.WebViewimport org.jetbrains.anko.alertimport org.jetbrains.anko.doAsyncimport org.jetbrains.anko.runOnUiThreadimport org.jetbrains.anko.toastimport org.json.JSONObjectimport java.net.URL/** * Kotlin与H5通信桥梁类 */class JavaScriptMethods {
private var mContext: Context? = null private var mWebView: WebView? = null constructor(context: Context?){
this.mContext = context } constructor(context: Context?,webView: WebView){
this.mContext = context this.mWebView = webView } @JavascriptInterface //安卓4.2以后,不加上@JavascriptInterface,H5不能调用kotlin方法 fun showToast(json:String){
//Toast.makeText(mContext,json,Toast.LENGTH_SHORT).show() //方法1// mContext?.toast(json) mContext?.let {
it.toast(json) } //方法2 } /** * Kotlin与H5通信方式三(callback) */ @JavascriptInterface fun getStudentData(){
// println("获取学生数据") //异步操作,子线程请求服务器 doAsync {
var url = URL("http://192.168.0.103:8080/Test1/student.json") //变成字符串 val result = url.readText() println("获取学生数据="+result) //callback步骤2:回传数据给H5 //调用js方法必须在主线程 mContext?.let {
it.runOnUiThread {
mWebView?.let {
// it.loadUrl("javascript:receiveStudentData("+result+")") it.loadUrl("javascript:receiveStudentData($result)") } } } } } /** * Kotlin与H5通信方式三(callback) */ @JavascriptInterface fun getStudentData2(json:String){
var jsJson = JSONObject(json) var callback = jsJson.optString("callback") //异步操作,子线程请求服务器 doAsync {
var url = URL("http://192.168.0.103:8080/Test1/student.json") //变成字符串 val result = url.readText() println("获取学生数据="+result) //callback步骤2:回传数据给H5 //调用js方法必须在主线程// mContext?.let {
// it.runOnUiThread {
// mWebView?.let {
// it.loadUrl("javascript:$callback($result)")// }// }// } callbackJavaScript(callback, result) } } /** * 统一管理所有kotlin回调js方法 */ private fun callbackJavaScript(callback: String?, result: String) {
mContext?.let {
it.runOnUiThread {
mWebView?.let {
it.loadUrl("javascript:$callback($result)") } } } } //底部弹出拨号对话框 @JavascriptInterface fun showPhoneDialog(phone:String){
println("js传递="+phone) //设置号码到对话框 mContext?.let {
it.alert("你要拨打电话${phone}吗?", "拨打电话") {
positiveButton("ok" ) {
mContext?.let {
callPhone(phone) } } negativeButton("cancel") {
} }.show() } } /** * lambda表达式:调用系统拨号功能 */ var callPhone = {
//phone:String -> Unit phone:String -> var intent = Intent() intent.action = "android.intent.action.VIEW" intent.action = "android.intent.action.DIAL" intent.addCategory("android.intent.category.DEFAULT") intent.addCategory("android.intent.category.BROWSABLE") intent.setData(Uri.parse("tel:"+phone)) mContext?.let {
it.startActivity(intent) } }}

\app\src\main\res\layout\activity_web_test.xml

\app\src\main\AndroidManifest.xml

本地模板 - 网页保存到assets目录,提高加载速率:

本地模板:网页保存到assets目录,提高加载速率
APP截屏:
APP截屏


总结

以上就是今天要讲的内容,本文仅仅简单介绍了kotlin与H5混合开发知识。

转载地址:http://xxlkk.baihongyu.com/

你可能感兴趣的文章