2019-03-07

客户端Webview设计规范

客户端 Webview，即内嵌在手机端内部的网页内容。

结构

• 使用场景
• 界面规范
• 代码规范（Android篇）
• 交互设计规范

一. 使用场景

<font size="3">简介：描述 webview 会在App的何处出现,哪些功能采用此技术更方便，高效。我们需要定义出现在不同地方的 webview 在App的整体流程中处于一个怎样的位置。</font>

1.商城、积分模块

2.用户协议,声明,反馈介绍页面模块

3.广告模块（广告详情页）

4.游戏模块

5.活动模块

二. 界面规范

简介：规范 webview 的导航方式：页面标题，返回、刷新、退出（关闭）、出错操作。同时描述 webview 内部的宏观结构，如 header 区域、footer 区域等。

1.页面标题导航栏采用原生实现(如无，iOS无法做返回操作)；

image

2.打开webview，需要loading效果，效果最好原生实现。刷新效果前端定义。返回、退出需要关闭webview并销毁。
打开webview出错，需要给予一个出错view，此view原生定义实现。

3.header 区域、footer 区域如遇特殊需求，可以灵活使用。

三.代码基本规范（Android篇）

1:添加权限<uses-permission android:name="android.permission.INTERNET" />

2:布局文件

 <WebView
   android:id="@+id/webView"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />```
3:数据加载`webView.loadUrl("www.xxx.com/index.html");`
4:支持JavaScript,CSS样式与交互
5：网页栈返回
webview会默认把浏览过去的网页进行压栈存储，所以我们实现回退到上一目录。回到webview首页，点击返回，返回原生上一页面。连续点击两次，退出App;
```java
@Override
    public boolean onKeyDown(int keyCode, KeyEvent event) {
        if (keyCode == KeyEvent.KEYCODE_BACK) {
            if (webView.canGoBack()) {
                webView.goBack();//返回上一浏览页面
                return true;
            } else {
                finish();//关闭Activity
            }
        }
        return super.onKeyDown(keyCode, event);
    }```
6:关闭硬件加速

开启硬件加速强制使用GPU渲染，确实给app流畅度带来不小的提升，但是在使用过程中遇见webview闪烁，也有导致加载webView黑屏或者白屏。

`webView.setLayerType(View.LAYER_TYPE_SOFTWARE, null);`

#### 四.交互设计规范

如遇功能需求，需要webview与原生交互，个人认为需要统一规范，比如统一方法，统一定义返回类型。做到兼容Android与iOS。