WebView 在 APP 中的使用
博客专区 > 兔之 的博客 > 博客详情
WebView 在 APP 中的使用
兔之 发表于2年前
WebView 在 APP 中的使用
  • 发表于 2年前
  • 阅读 106
  • 收藏 6
  • 点赞 1
  • 评论 0

【腾讯云】新注册用户域名抢购1元起>>>   

微信的内嵌浏览器使用的是 WebView,当查看分享时打开的页面就是使用 WebView 呈现的。手机淘宝客户端也在页面中使用了 WebView。淘宝页面这种经常变化很大,对动画和流程性没要求的话,会优先使用 WebView。所以 App 的原则是经常变用 WebView,不经常变就 Native。

可以通过下列方式判断 APP 使用的哪种技术。打开开发者模式———显示布局边界。若是整块区域有边界,则是 WebView。如果每个元素都有边界,则不是。

输入图片说明

WebView 中请求页面

在微信朋友圈中查看分享时,会调到这样一个页面。其实就是在这个框架中去请求数据。

输入图片说明

下面模拟这种方案。

package timenull.friendcircle;

import android.os.Bundle;
import android.app.Activity;
import android.view.KeyEvent;
import android.webkit.WebView;

public class MainActivity extends Activity {
    private WebView webview;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        webview = new WebView(this);
        webview.getSettings().setJavaScriptEnabled(true);
        webview.loadUrl("http://fuzhii.com");
        //设置Web视图
        setContentView(webview);
    }

    @Override
    //设置回退
    //覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if ((keyCode == KeyEvent.KEYCODE_BACK) && webview.canGoBack()) {
            webview.goBack();
            return true;
        }
        return false;
    }
}

分为下面几步

1.在 Activity 中实例化 WebView 组件

webview = new WebView(this);

2.调用 WebView 的 loadUrl() 方法,设置 WebView 要显示的网页。

webview.loadUrl("http://fuzhii.com");

3.调用 Activity 的 setContentView() 方法显示网页视图

4.另外需要在 AndroidManifest.xml 文件中添加访问网络的权限

<uses-permission android:name="android.permission.INTERNET"/>

最后效果如下

输入图片说明

WebView 优点

  • 和前端 JS 无缝结合
  • 变更上线快,运营方便

参考

https://www.zhihu.com/question/35683612/answer/64628667

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 66
博文 244
码字总数 95573
作品 7
×
兔之
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: