H5页面如何跟APP应用交互？

Question

做一个活动，在app里嵌入一个H5页面。

如何让用户点击H5页面上的按钮跳转到APP的另一个页面？

比如说点击H5页面上的充值按钮，跳转到充值界面（这个页面是APP原生的），点击立即抢购按钮，跳转到商品页面（这个页面是APP原生的）。

H5与APP端是如何进行数据交互的？

后台该如何写？

有没有例子？

请大牛之支招。

Answer 1

stackoverflow上看到的,你看行不行.

webview.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void openActivity(String activity){
        Intent i = new Intent(Intent.ACTION_VIEW, Uri.parse(activity));
        mContext.startActivity(i);
    }
}, "android");

<a href="javascript:void(0)" onclick="alert(android.openActivity('Recharge'))">充值</a>
<a href="javascript:void(0)" onclick="alert(android.openActivity('Goods'))">抢购</a>

Answer 2

Android端，WebView加载H5，H5中js代码可以这样：

<script type="text/javascript">
        function jumpToAppPages(){
            toActivity.OpenLinkH5("https://www.baidu.com");
        }
</script>

在当前WebView所在Activity这样写：

mWebViewContent.addJavascriptInterface(new JumpAppInterFace(mContext),"toActivity");

其中，JumpAppInterFace 就是你需要注入的跳转到另一Activity的类，大致长这样：

public class JumpAppInterFace {
    private static final String TAG = "JumpAppInterFace";

        private android.content.Context Context;


        public JumpAppInterFace(android.content.Context Context) {
            this.Context = Context;

        }
        @JavascriptInterface
        public void OpenLinkH5(String url){
            if (!TextUtil.isEmpty(url)){
                Intent intent=new Intent(Context, AnotherActivity.class);
                intent.putExtra("url",url);
                Context.startActivity(intent);
            }

        }

}

Answer 3

上面几个方法都挺不错的。但其实只是单纯跳转问题，不用搞得那么复杂。
从webview中抓取跳转信息，然后android端和前段商量好接口，就直接处理就好了。
例如：web中有个跳转

<a href="example://jumpToSettings">跳转设置</a>

点击后会出发webview中的shouldOverrideUrlLoading函数，Android端：

webView.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, String url) {
                L.i(url); // 获取到 example://jumpToSettings ，然后接下来就是字符串处理了
                optionUrl(url); // 判断如果是跳转字符串，进行跳转
                return true; // 消费，不让网页跳转
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {
//                super.onPageStarted(view, url, favicon);
            }
        });

Answer 4

JavaScriptCore网上很多例子的，apple文档也很详细