在 ios 与 android 同时支持js功能，即web与app的交互功能的实现

最新推荐文章于 2021-08-31 14:07:09 发布

原创最新推荐文章于 2021-08-31 14:07:09 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ios #android #app-与web交互

app开发专栏收录该内容

1 篇文章

订阅专栏

本文详细阐述了如何在App中实现Web与原生App之间的交互，包括服务器端、iOS、Android客户端的实现方法及注意事项，特别强调了在不同平台下进行JS与本地代码间的调用策略，旨在提升用户体验并优化应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前在app中需要实现web与原生app的交互，经过查相关资料和api，大概的功能实现如下；
首先是服务器的代码：服务器使用的是php;

/*
* cmd --> 参数的key
* parm --> 参数的value
*/
function sendConment(cmd,parm){
    var url = ":darling:click_tel:darling:"+cmd+":darling:"+parm;
    document.loction = url;
    client_click.click_tel(parm);
}

在ISO客户端中使用：比较简单，就是判断用户点击的串，然后通过截取判断字符串，然后根据和服务器定义好的字典，进行不同的行为；

- (BOOL) webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSURL *url = [request URL];
    NSString *requestString = [url absoluteString];
    NSArray *components = [requestString componentsSeparatedByString:@":darling:"];
    if (components.count > 1) {
        NSString *identifier = components[1];//目标行为
        NSString *argsKey = components[2];//参数名称
        NSString *argsValue = components[3];//参数的值
        if ([identifier isEqualToString:@"click_tel"]) {
            //浏览器不进行跳转
            return NO;
          }
        }
    return YES;
  }

在java客户端中使用：android官方提供了与js交互的接口；
在5.0之后，程序员需要显式的在类名前申明@SuppressLint("JavascriptInterface")

@SuppressLint("JavascriptInterface")
public class WebInfoActivity extends BaseClientActivity {
    ...
}

然后在webView初始化的时候；

//在初始化的时候进行js的申明；
//第一个参数为本地的下文中的内部类，第二个参数为服务器使用的方法名；
webView.addJavascriptInterface(new OrderInfo(), "client_click");

然后在

public final class OrderInfo {
    //JavaScript调用此方法跳到订单详情页
    @JavascriptInterface
    public void click_tel(final String parms) {
        AlertDialog.Builder builder = new AlertDialog.Builder(WebInfoActivity.this);
        builder.setTitle("拨打电话");
        builder.setMessage(parms);
        builder.setPositiveButton("呼叫", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {
                Intent intent = new Intent();
                intent.setAction(Intent.ACTION_CALL);
                intent.setData(Uri.parse("tel:" + parms)); 
                startActivity(intent);
            }
        });
        builder.setNegativeButton("取消", new DialogInterface.OnClickListener() {
            @Override
            public void onClick(DialogInterface dialog, int which) {

                }
            });
            builder.create();
            builder.show();
        }
    }

在android中为了更好的用户体验，需要在WebViewClient的shouldOverrideUrlLoading中进行如下的阻止跳转；

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url != null && url.contains(":darling:")) {//表示是与app的交互
            return true;
        }else{
           return false; 
        }
    }