javascript - How does the H5 page interact with the APP application?-PHP Tutorial-php.cn

javascript - How does the H5 page interact with the APP application?

WBOY

Release： 2016-09-27 14:18:11

Original

1291 people have browsed it

Create an activity and embed an H5 page in the app.

How to let users click the button on the H5 page to jump to another page of the APP?

For example, click the recharge button on the H5 page to jump to the recharge interface, click the Buy Now button to jump to the product page.

How do H5 and APP interact with data?

How to write the background?

Are there any examples?

Please give me some advice.

Reply content:

Create an activity and embed an H5 page in the app.

How to let users click the button on the H5 page to jump to another page of the APP?

For example, click the recharge button on the H5 page to jump to the recharge interface, click the Buy Now button to jump to the product page.

How do H5 and APP interact with data?

How to write the background?

Are there any examples?

Please give me some advice.

The above methods are all pretty good. But in fact it’s just a simple jump problem, it doesn’t need to be so complicated.
Grab the jump information from the webview, and then the Android end and the front-end discuss the interface and handle it directly.
For example: there is a jump in the web

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

Copy after login

After clicking, the shouldOverrideUrlLoading function in the webview will be launched, Android side:

<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>

Copy after login

JavaScriptCoreThere are many examples on the Internet, and Apple’s documentation is also very detailed

On the Android side, WebView loads H5, and the js code in H5 can be like this:

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

Copy after login

Write this in the Activity where the current WebView is located:

<code>mWebViewContent.addJavascriptInterface(new JumpAppInterFace(mContext),"toActivity");
</code>

Copy after login

Among them, JumpAppInterFace is the class you need to inject to jump to another Activity. It looks roughly like this:

<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>

Copy after login

Saw this on stackoverflow, see if it works.

<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>

Copy after login