客户端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。
网友评论