Android 原生浏览器标题栏功能与JS交互优化

作者: 叶子叔_ | 来源:发表于2017-08-28 11:03 被阅读0次

需求分析

APP内原生“BrowserActivity”（有WebView的界面），嵌入H5模块功能界面如在线商城等。

其中部分界面需要原生提供标题栏模块的功能：

下拉框选项
右边图片按钮
文本按钮

image

解决方案

将具体的需求抽象出来
实现相应的接口，预先提供相应的数据以及相应方法
在原生跳转“BrowserActivity”时传入 Provider（抽象出来的接口）

优点：

避免BrowserActivity类里面的代码膨胀
比较好的保证了通用界面独立性
降低后期开发升级维护的难度
产品更改需求我们只需要在Provider里面进行扩展即可
不同模块的扩展功能可以独立开，避免造成误改通用性代码

交互抽象类

/**
 * Des：交互抽象类
 * created by Zishu.Ye on 2017/6/12  10:27
 */
public interface IBrowserProvider<T> {

    /**
     * 绑定到相应的web 浏览器
     * @param context           context
     * @param webViewManager    manager
     */
    void bind(Context context, WebViewManager webViewManager);

    /**
     * webView 加载页面开始加载的回调
     * @param url 相应的url
     */
    void onPageStarted(String url);

    /**
     * webView 加载页面结束加载的回调
     * @param url 相应的url
     */
    void onPageFinished(String url);

    /**
     *  当webview 第一次收到 js 调用是进行回调
     * @param url url
     */
    void onJsCalled(String url);

    /**
     * web 浏览器在销毁的时候解绑
     */
    void unBind();

    /**
     * 根据与H5定义的交互分类
     * 返回h5桥接的需要展示弹窗分类的键值对
     *
     * @return 返回h5桥接的需要展示弹窗分类的数据
     */
    Map<String,List<DropDownBrowserBean<T>>> getDropTypeMap();

    /**
     * @param h5JSBridgeTypeKey     h5调用弹窗的类型
     * @param bean 下拉列表item点击事件
     */
    void onDropListItemClick(String h5JSBridgeTypeKey ,DropDownBrowserBean<T> bean);

    /**
     * @return 右边按钮需要显示的图标
     */
    Map<String,Integer> getRightImgBtnMap();

    /**
     * 右边按钮点击事件
     * @param h5JSBridgeTypeKey    h5调用按钮的类型
     */
    void onRightBtnClick(String h5JSBridgeTypeKey);

    /**
     * @return 右边文本按钮需要显示的文本
     */
    Map<String,String> getRightTextBtnMap();

    /**
     * 右边文本按钮点击事件
     * @param h5JSBridgeTypeKey    h5调用按钮的类型
     */
    void onRightTextBtnClick(String h5JSBridgeTypeKey);
}

下拉选项类型Bean

/**
 * Des：下拉浏览器 通用数据类
 * create by Zishu.Ye on 2017/6/12  10:24
 */
public class DropDownBrowserBean<T> {

    String key;     //索引
    String label;   //显示标签
    boolean isChioced;//是否选中
    T data;         //数据实体
    
}

Provider 的基类 BaseBrowserProvider

也可以不需要此基类，提供它好处在于可以统一处理一些通用的绑定界面等
继承此基类也不需要实现所有抽象的方法，可以根据具体需求选择实现提供

/**
 * Des：Provider 的基类 BaseBrowserProvider
 * create by Zishu.Ye on 2017/6/12  10:16
 */
public abstract class BaseBrowserProvider<T> implements IBrowserProvider<T>, Serializable {

    public Context mContext;
    public WebViewManager mWebViewManager;

    @Override
    public void bind(Context context, WebViewManager webViewManager) {
        this.mContext = context;
        this.mWebViewManager = webViewManager;
    }

    @Override
    public void unBind() {
        mContext=null;
        mWebViewManager=null;
    }

    @Override
    public void onPageStarted(String url) {}

    @Override
    public void onPageFinished(String url) {}

    @Override
    public void onJsCalled(String url) {}

    @Override
    public Map<String, String> getRightTextBtnMap() {
        return null;
    }

    @Override
    public void onRightTextBtnClick(String h5JSBridgeTypeKey) {}
}

具体业务需求实现类

在这里进行提供具体需求所需要的数据

/**
 * Des：具体业务需求实现类
 * create by Zishu.Ye on 2017/8/28  10:13
 */
public class SeriviceBrowserProvider extends BaseBrowserProvider<Bean> implements IView {

    private ServiceTypePresenter presenter;

    @Override
    public void bind(Context context, WebViewManager webViewManager) {
        super.bind(context, webViewManager);
        //做绑定的操作 比如初始化Presenter等
        presenter = new ServiceTypePresenter(this);
        presenter.getProductType(type);
    }

    @Override
    public void unBind() {
        super.unBind();
        if (presenter != null) {
            presenter.detachView();
        }
    }

    @Override
    public void onJsCalled(String url) {
        super.onPageFinished(url);
        mWebViewManager.loadUrl("javascript:method(par)");
    }

    @Override
    public Map<String, List<DropDownBrowserBean<Bean>>> getDropTypeMap() {
        Map<String, List<DropDownBrowserBean<Bean>>> map = new HashMap<>();
        return map;
    }

    @Override
    public void onDropListItemClick(String h5JSBridgeTypeKey, DropDownBrowserBean<Bean> bean) {
        switch (h5JSBridgeTypeKey) {
            case KEY:
                doSomething(bean);
                break;
            default:
                break;
        }
    }

    @Override
    public Map<String, Integer> getRightImgBtnMap() {
        return map;
    }

    @Override
    public void onRightBtnClick(String h5JSBridgeTypeKey) {
        switch (h5JSBridgeTypeKey) {
            case KEY:
                doSomething(h5JSBridgeTypeKey);
                break;
            default:
                break;
        }
    }

    @Override
    public Map<String, String> getRightTextBtnMap() {
        Map<String, String> map = new HashMap<>();
        return map;
    }

    @Override
    public void onRightTextBtnClick(String h5JSBridgeTypeKey) {
        switch (h5JSBridgeTypeKey) {
            case KEY:
                doSomething(h5JSBridgeTypeKey);
                break;
            default:
                break;
        }
    }
}

跳转BrowserActivity

Intent intent = new Intent(context, BrowserActivity.class);
intent.putExtra(URL_KEY, url);
intent.putExtra(KEY, seriviceBrowserProvider)
context.startActivity(intent);

BrowserActivity 部分的处理

/**
 * Des：标题栏功能浏览器
 * create by Zishu.Ye on 2017/6/13  10:57
 */
public class BrowserActivity extends BaseAppCompatActivity {
    
    private IBrowserProvider mBrowserProvider;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_browser);
        init();
        initView();
    }

    @Override
    protected void onDestroy() {
        if (mBrowserProvider != null) {
            mBrowserProvider.unBind();
        }
    }

    @Override
    protected void init() {
        mBrowserProvider = (IBrowserProvider) getIntent().getSerializableExtra(KEY);
    }

    @Override
    protected void initView() {
        if (mBrowserProvider != null)
            mBrowserProvider.bind(this, webViewManager);
    }
    
    @OnClick({R.id.iv_right, R.id.tv_right})
    void onClick(View v) {
        switch (v.getId()) {
            case R.id.iv_right://右边按钮点击事件
                if (mBrowserProvider != null)
                    mBrowserProvider.onRightBtnClick(curRightImgBtnType);
                break;
            case R.id.tv_right:
                if (mBrowserProvider != null)
                    mBrowserProvider.onRightTextBtnClick(curRightTextBtnType);
                break;
            default:
                break;
        }
    }
    
    /**
     * 收到JS 调用指定功能 进行相应的初始化界面控件
     * 设置右边按钮图片、文本  加载下拉弹窗等
     * @param javaScriptEvent e
     */
    @Subscribe(threadMode = ThreadMode.MAIN)
    public void onEventMainThread(final BusEvent.JavaScriptEvent javaScriptEvent) {
        if (mBrowserProvider != null) {
            Map<String, Object> map = (Map<String, Object>) javaScriptEvent.getT();
            doSetRightBtn(map, mBrowserProvider.getDropTypeMap(), mBrowserProvider.getRightImgBtnMap(), mBrowserProvider.getRightTextBtnMap());
        }
    }
    
    /**
     * 下拉弹窗item点击
     * @param event
     */
    @Subscribe(threadMode = ThreadMode.MAIN)
    public void onEventMainThread(DropDownBrowserEvent event) {
        if (event.getOrderTypeBeam() != null)
            mBrowserProvider.onDropListItemClick(event.getH5JSBridgeTypeKey(), event.getOrderTypeBeam());
    }

    BaseWebViewClient<XXX> baseWebViewClient = new BaseWebViewClient<XXX>() {

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            super.onPageStarted(view, url, favicon);
            if (mBrowserProvider != null)
                mBrowserProvider.onPageStarted(url);
        }

        @Override
        public void onPageFinished(WebView view, String url) {
            super.onPageFinished(view, url);
            if (mBrowserProvider != null)
                mBrowserProvider.onPageFinished(url);
        }
    };
    
}

最后

感谢观看，欢迎留言指导交流

网友评论

本文标题：Android 原生浏览器标题栏功能与JS交互优化

本文链接：https://www.haomeiwen.com/subject/qubwdxtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！