Android嵌入Udesk即时通讯网页插件（一、入门）

作者：张振琦

Android 系统上实现Udesk即时通讯，除了使用Udesk提供的原生sdk以外还可以嵌入Udesk提供的即时通讯网页插件。Udesk即时通讯网页插件的内容，大家可以参考《Udesk即时通讯（IM）网页插件入门》 的内容。

如果业务需要同时使用网页即时通讯与移动端即时通讯，Android 嵌入desk即时通讯网页插件有一个很大的优点就是，相对于使用移动SDK单独实现移动端即时通讯，嵌入网页插件可以减少一定的维护成本，只需要维护即时通讯网页插件即可。

Udesk即时通讯网页插件除了使用代码还提供了一个专用连接，Android 嵌入Udesk即时通讯网页插件的核心思路就是，使用Android 的 WebView 打开这个专用连接。下面直接演示如果实现。

新建一个Project，选择Empty Activity，名称为UseWebIM，开发语言Java。

删除主页面中默认的Hello World! 文本，添加一个按钮，名为”打开WebIM联系客服“

activity_mian.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/btn_webim"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/webim"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

strings.xml

<resources>
    <string name="app_name">UseWebIM</string>
    <string name="webim">打开WebIM联系客服</string>
</resources>

在包名处点击鼠标右键，添加一个空的Activity，名称为WebIMActivity，语言Java


给新建的WebIMActivity页面中添加WebView控件
activity_web_i_m.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".WebIM">

    <WebView
        android:id="@+id/wv_webim"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:layout_editor_absoluteX="0dp"
        tools:layout_editor_absoluteY="0dp" />

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity中给按钮添加点击事件，并实现跳转到WebIMActivity中
MainActivity.java

package com.example.usewebim;

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button btn = findViewById(R.id.btn_webim);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent=new Intent(MainActivity.this, WebIMActivity.class);
                startActivity(intent);
            }
        });
    }
}

WebIMActivity中，获取WebView控件并设置参数，打开我们的Udesk即时通讯网页插件的专用链接。
WebIMActivity.java

package com.example.usewebim;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class WebIMActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_i_m);

        WebView webView = (WebView) findViewById(R.id.wv_webim);

        WebSettings mWebSettings = webView.getSettings();
        mWebSettings.setJavaScriptCanOpenWindowsAutomatically(true);//设置js可以直接打开窗口，如window.open()，默认为false
        mWebSettings.setJavaScriptEnabled(true);//是否允许JavaScript脚本运行，默认为false。设置true时，会提醒可能造成XSS漏洞
        mWebSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放。大视图模式
        mWebSettings.setLoadWithOverviewMode(true);//和setUseWideViewPort(true)一起解决网页自适应问题
        mWebSettings.setAppCacheEnabled(true);//是否使用缓存
        mWebSettings.setDomStorageEnabled(true);//开启本地DOM存储
        mWebSettings.setLoadsImagesAutomatically(true); // 加载图片

        //覆盖WebView默认使用第三方或系统默认浏览器打开网页的行为
        webView.setWebViewClient(new WebViewClient(){
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                view.loadUrl(url);
                return true;
            }

        });

        webView.loadUrl("你的Udesk即时通讯网页插件专用链接");
    }
}

在AndroidManifest.xml中添加权限

<uses-permission android:name="android.permission.INTERNET"/>

至此代码就完成了，运行看下效果。

点击按钮

功能顺利完成。除了发送文字内容，也会有需要发送照片的业务需求，后续会介绍。