javascript - H5頁面如何跟APP應用程式互動?

WBOY
發布: 2016-09-27 14:18:11
原創
1268 人瀏覽過

做一個活動,在app裡嵌入一個H5頁面。

如何讓使用者點擊H5頁面上的按鈕跳到APP的另一個頁面?

比如說點擊H5頁面上的儲值按鈕,跳到儲值介面,點選立即搶購按鈕,跳到商品頁面。

H5與APP端是如何進行資料互動的?

後台該如何寫?

有沒有例子?

請大牛之支招。

回覆內容:

做一個活動,在app裡嵌入一個H5頁面。

如何讓使用者點擊H5頁面上的按鈕跳到APP的另一個頁面?

比如說點擊H5頁面上的儲值按鈕,跳到儲值介面,點選立即搶購按鈕,跳到商品頁面。

H5與APP端是如何進行資料互動的?

後台該如何寫?

有沒有例子?

請大牛之支招。

上面幾個方法都還挺不錯的。但其實只是單純跳轉問題,不用搞得那麼複雜。
從webview中抓取跳轉訊息,然後android端和前段商量好接口,就直接處理就好了。
例如:web中有個跳轉

<code><a href="example://jumpToSettings">跳转设置</a></code>
登入後複製

點選後會出發webview中的shouldOverrideUrlLoading函數,Android端:

<code>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);
            }
        });</code>
登入後複製

JavaScriptCore網上很多例子的,apple文檔也很詳細

Android端,WebView載入H5,H5中js程式碼可以這樣:

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

在目前WebView所在Activity這樣寫:

<code>mWebViewContent.addJavascriptInterface(new JumpAppInterFace(mContext),"toActivity");
</code>
登入後複製

其中,JumpAppInterFace 就是你需要注入的跳到另一Activity的類,大致長這樣:

<code>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);
            }

        }

}</code>
登入後複製

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

<code>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></code>
登入後複製
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板