Android H5 与原生交互那点事

鉴于 H5 丰富的表现力，产品决定将项目中的某个详情页改为 H5 展示，评论、点赞仍由原生实现，于是便需要原生与 H5 交互。之前对于这块少有涉及，恰巧合作的前端同事对于这块也不太熟悉，所以耗时良久。现在功能做得差不多了，稍微记录一下。

原生

先看下 WebView 的设置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
class VygWebView(context: Context, attr: AttributeSet) : BaseWebView(context, attr) {

    private var callback: JSCallback? = null
    private var isDestroyed: Boolean = false

    init {
        addJavascriptInterface(VygJavaScriptInterface(), "voyagerApp")
        setWebContentsDebuggingEnabled(true)
        settings.allowFileAccess = true
        settings.allowFileAccessFromFileURLs = true
        settings.allowUniversalAccessFromFileURLs = true
    }

    /**
     * 注册js回调监听器
     */
    fun registerJSCallback(callback: JSCallback) {
        this.callback = callback
    }

    /**
     * 将消息发送给 WebView 来处理
     */
    fun sendMessageToWeb(message: String) {
        if (isDestroyed) {
            return
        }
        if (Config.isDebug()) {
            LogUtils.e("MessageParser", "sendMessageToWeb:$message")
        }
        val function = "javascript:window.receiveMessage($message)"
        if (MainThreadUtils.isMainThread()) {
            loadUrl(function)
        } else {
            MainThreadUtils.post(Runnable {
                if (isDestroyed) {
                    return@Runnable
                }
                loadUrl(function)
            })
        }
    }

    override fun destroy() {
        super.destroy()
        isDestroyed = true
        callback = null
    }

    inner class VygJavaScriptInterface {
        @JavascriptInterface
        fun sendMessage(message: String) {
            if (isDestroyed) {
                return
            }
            callback?.onReceiveWebMessage(message)
        }
    }

    interface JSCallback {
        fun onReceiveWebMessage(message: String)
    }
}

所有的交互全部通过 Json 字符串来进行，双端协定对 Json 的解析规则。本地通过添加 VygJavaScriptInterface 实现 sendMessage 方法，来接受 H5 传递过来的消息，通过 sendMessageToWeb 向 H5 发送消息。
定义消息体如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
class MessageEntity : Serializable {
    /**
     * 消息id
     */
    var id: String? = null
    /**
     * 消息类型
     */
    var type: String? = null
    /**
     * 版本号
     */
    var version: Int? = null

    /**
     * 消息内容
     */
    var content: Any? = null

    /**
     * 额外透传信息
     */
    var extraData: String? = null

    fun toJSONString(): String {
        return JSON.toJSONString(this)
    }
}

下面来看消息解析：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
abstract class MessageParser(private val activity: VygBaseActivity, private val webView: VygWebView,
                             private val listener: MessageParser.MessageHandedListener?) : VygWebView.JSCallback {

    private val TAG = "MessageParser"

    override fun onReceiveWebMessage(message: String) {
        if (StringUtils.isEmpty(message)) {
            return
        }
        if (Config.isDebug()) {
            LogUtils.e(TAG, message)
        }
        parse(message)
    }

    private fun parse(message: String) {
        Config.execute {
            try {
                doParse(message)
            } catch (t: Throwable) {
                LogUtils.e(TAG, t.localizedMessage)
            }
        }
    }

    /**
     * 这个json可能很大，放到异步去处理
     */
    @Throws(JSONException::class)
    private fun doParse(message: String) {
        val obj = JSON.parseObject(message)
        val type = obj.getString("type")
        if (StringUtils.isEmpty(type)) {
            return
        }

        val version = try {
            obj.getInteger("version")
        } catch (t: Throwable) {
            1
        }

        val e = getEvents(type)
        if (e == null) {
            MainThreadUtils.post(Runnable {
                if (activity.hasDestroyed()) {
                    return@Runnable
                }
                if (version != null && version > NATIVE_WEB_VERSION) {
                    // 提示更新
                    notifyUpdateApp()
                } else {
                    // 什么也不做
                }
            })
            return
        }

        val entity = MessageEntity()
        entity.type = type
        try {
            entity.id = obj.getString("id")
        } catch (t: Throwable) {
        }

        entity.version = version
        try {
            entity.extraData = obj.getString("extraData")
        } catch (t: Throwable) {
        }

        var content: String? = null
        try {
            content = obj.getString("content")
        } catch (t: Throwable) {
        }

        if (StringUtils.isEmpty(content) || e.clazz == null) {
            entity.content = null
        } else {
            // Content 为字符串类型直接赋值
            if (String::class.java.isAssignableFrom(e.clazz)) {
                entity.content = content
            } else {
                try {
                    entity.content = JSON.parseObject(content, e.clazz)
                } catch (t: Throwable) {
                    LogUtils.e(TAG, t.localizedMessage)
                }
            }
        }
        if (activity.hasDestroyed()) {
            return
        }
        MainThreadUtils.post(Runnable {
            if (activity.hasDestroyed()) {
                return@Runnable
            }
            MessageHandler(e, entity, activity, webView).handle()
            listener?.onMessageHanded(entity)
        })
    }

    protected abstract fun getEvents(type: String): Events?

    /**
     * 提示更新app
     */
    private fun notifyUpdateApp() {

    }

    interface MessageHandedListener {
        fun onMessageHanded(message: MessageEntity)
    }
}

getEvents 为根据消息 type 来取得具体的消息体 Content 类型及处理消息的类：

1
2
3
4
5
6
7
8
9
10
11
12
13
public final class Events {

    public final String eventName;
    public final Class<?> clazz;
    public final Class<? extends MessageHandler.HandleCallback> callback;

    public Events(String name, Class<?> clazz,
            Class<? extends MessageHandler.HandleCallback> callback) {
        this.eventName = name;
        this.clazz = clazz;
        this.callback = callback;
    }
}

看到消息处理类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class MessageHandler(private val events: Events, private val entity: MessageEntity, private val activity: VygBaseActivity, private val webView: VygWebView) {

    private val TAG = "MessageHandler"

    fun handle() {
        try {
            events.callback?.newInstance()?.handleMessage(entity, entity.content, activity, webView)
        } catch (t: Throwable) {
            LogUtils.e(TAG, t.localizedMessage)
        }
    }

    interface HandleCallback {
        fun handleMessage(entity: MessageEntity, obj: Any?, activity: VygBaseActivity, webView: VygWebView)
    }
}

举例一个具体的消息处理类：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
class LoadImageHandler : MessageHandler.HandleCallback {

    private val TAG = "LoadImageHandler"

    override fun handleMessage(entity: MessageEntity, obj: Any?, activity: VygBaseActivity, webView: VygWebView) {
        if (obj != null && obj is LoadImageEntity) {
            if (UriUtils.isNetUrl(obj.url)) {
                AsImage.downloadFile(obj.url).loadListener(object : ImageLoadListener<File> {
                    override fun onLoadingStarted(imageUri: String?, view: View?) {
                        LogUtils.e(TAG, "onLoadingStarted:$imageUri")
                    }

                    override fun onLoadingFailed(imageUri: String?, view: View?, t: Throwable?): Boolean {
                        LogUtils.e(TAG, "onLoadingFailed:$imageUri")
                        return true
                    }

                    override fun onLoadingComplete(imageUri: String?, view: View?, loaded: File?): Boolean {
                        loaded?.let {
                            obj.uri = "file://" + it.absolutePath
                            webView.sendMessageToWeb(entity.toJSONString())
                        }
                        return true
                    }
                }).download()
            }
        }
    }
}

根据修改页面的业务，定义所有的 Event：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
object ArticleEvents {

    private val events = HashMap<String, Events>()

    operator fun get(eventName: String): Events? {
        return events[eventName]
    }

    init {
        events[HTML_FINISH_LOAD] = Events(HTML_FINISH_LOAD, null, HtmlFinishLoadHandler::class.java)
        events[CONTENT_FINISH_LOAD] = Events(CONTENT_FINISH_LOAD, null, ContentFinishLoadHandler::class.java)

        events[PROTOCOL] = Events(PROTOCOL, String::class.java, ProtocolHandler::class.java)
        events[PLAY_VIDEO] = Events(PLAY_VIDEO, String::class.java, PlayVideoHandler::class.java)
        events[IMAGE_BROWSE] = Events(IMAGE_BROWSE, String::class.java, ImageBrowseHandler::class.java)
        events[LOAD_IMAGE] = Events(LOAD_IMAGE, LoadImageEntity::class.java, LoadImageHandler::class.java)
    }

    object EventName {
        const val HTML_FINISH_LOAD = "htmlFinishLoad"           // H5 加载完
        const val LOAD_ARTICLE_CONTENT = "articleContent"       // 发送 Content 给 H5 填充
        const val CONTENT_FINISH_LOAD = "contentFinishLoad"     // Content 加载完
        const val UPDATE_COMMENT_COUNT = "updateCommentCount"   // 更新回复数

        const val PROTOCOL = "ProtocolPageJump"                 // 协议
        const val PLAY_VIDEO = "playVideo"                      // 播放视频
        const val IMAGE_BROWSE = "imgBrowse"                    // 大图浏览
        const val LOAD_IMAGE = "loadImg"                        // 加载图片
    }
}

消息解析这一套流程便完成了，根据 type 找到对应的消息处理类，然后传入 Content 进行处理。

H5

H5 除了界面渲染之外，还需要根据约定实现相关的方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
getNativeData: function() {
    var me = this;
    window.receiveMessage = function(data) {
        var type = data.type;
        var content = data.content;

        if (type == 'articleContent') {
            me.handleArticleData(content);
        } else if (type == 'loadImg') {
            me.handleImgData(content);
        } else if (type == 'updateCommentCount') {
            me.handleReplyCount(content);
        }else if(type == 'changeOffset'){
            me.handleUploadImg(content)
        }
    }
}

然后调用原生方法时，也是组装好 Message，然后调用 sendMessage 方法即可：

1
2
3
4
5
6
7
8
9
// 个人中心
$('[data-type="user"]').click(function() {
    var uid = $(this).attr('data-uid');
    var wxToken = $(this).attr('data-wxToken');
    var link = `https://voyager.nav.cn/user/homePage?id=${uid}&wxToken=${wxToken}`;
    var params = JSON.stringify({ id: 1, type: 'ProtocolPageJump', content: link });

    voyagerApp.sendMessage(params);
})

至此两端的交互体系大体完成。

小坑

  1. 最好使用本地 html 文件来完成交互，可以比较方便的加载本地图片，前缀加上”file://“，同时 WebView 需要设置（具体效用尚未研究）：
    1
    2
    3
    settings.allowFileAccess = true
    settings.allowFileAccessFromFileURLs = true
    settings.allowUniversalAccessFromFileURLs = true
  2. H5 调用本地方法需要 voyager.sendMessage，iOS 则是 voyager_sendMessage。

参考

  1. Android：最全面的 Webview 详解
  2. Android：你要的WebView与 JS 交互方式 都在这里了
  3. Android：你不知道的 WebView 使用漏洞

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    2、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: true
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

小小程序猿一枚<br><br>good good study<br>day day up!