新闻手机客户端内嵌式开发记录

如何创建webview,先看Activity方法:

public class Hello extends Activity {

/** Called when the activity is first created. */

private WebView webview;

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

webview= new WebView(this);

setContentView(webview);

webview.loadUrl("http://www.imf7.com/webapp/");

//设置支持JavaScript脚本

WebSettings webSettings = webview.getSettings();

webSettings.setJavaScriptEnabled(true);

//设置可以访问文件

webSettings.setAllowFileAccess(true);

//设置不支持缩放

webSettings.setBuiltInZoomControls(false);

//设置滚动条样式,去掉滚动条白边

webview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

//设置WebViewClient

// 在WebView中而不是默认浏览器中显示页面 取消地址栏

webview.setWebViewClient(new WebViewClient() {

public boolean shouldOverrideUrlLoading(WebView view, String url) {

view.loadUrl(url);

return true;

}

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

}

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

super.onPageStarted(view, url, favicon);

}

});

}

//设置回退

//覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法

@Override

public void onBackPressed() {

if (webview.canGoBack()) {

webview.goBack();

} else {

super.onBackPressed();

}

}

}

另外,AndroidManifest.xml中必须添加<uses-permission android:name="android.permission.INTERNET" />进行许可,放在<uses-sdk android:minSdkVersion="8" />下面就行。

Webview创建成功后我们来说一下开发过程中遇到的知识点:

1、取消APP标题:this.requestWindowFeature(Window.FEATURE_NO_TITLE);

2、让APP全屏:搜索一下,网上有方法,我这里因为项目不需要全屏就不贴了;

3、启用JS:【我们开发的是web项目,JS是必须的】

WebSettings webSettings = webview.getSettings();

webSettings.setJavaScriptEnabled(true);

4、滚动条白边问题:设置滚动条样式可解决

webview.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);

5、禁止缩放功能:有些手机本身webview带有缩放

webSettings.setBuiltInZoomControls(false);

6、禁止横评:

AndroidManifest.xml里面的activity标签配置这样的参数:android:screenOrientation="portrait" //(landscape是横向,portrait是纵向)

7、取消链接点击后的黄圈圈:

本地程序办法:【不推荐】

利用是聚焦点来取消webview中链接点击后的黄圈圈:webview.setFocusable(false);

理由:如果页面中有表单输入框请不要使用此方法,webview失去焦点后软键盘将无法唤出,因此建议新打开一个webview来展现输入框。

CSS办法:【推荐】

a,div,p,ul,li,dl,dt,dd,input,span,em,strong,img { -webkit-tap-highlight-color:rgba(0,0,0,0);}

8、设置WebViewClient,让链接在WebView中而不是默认浏览器中显示,并取消链接跳转时的地址栏【顶部代码中的setWebViewClient方法】

9、覆盖Activity类的onKeyDown(int keyCoder,KeyEvent event)方法,让webview中的网页间支持返回功能【顶部代码有示例】

10、手指点击链接变换背景的方法:

ontouchstart和onmousedown时设置className

ontouchmove和onmouseup时移除添加的className

11、页面中的焦点图和图集展示采用Iscroll4来实现

12、webview中的字体加粗问题:

采用阴影来模拟加粗:text-shadow:0px 0px 1px #000;

13、表单为了漂亮用背景图片模拟

14、loading动画问题:

用CSS3写的loading会严重影响页面其他图片渲染的清晰度『但对内存和CPU没有太多影响』

使用GIF图片超级损耗CPU,尽可能不的要用,我的手机从0一下蹦到33%,直接红色报警了

最终的图片选择无动画的提示图片【等性能好的时候再加动画吧】

15、显示过多大图时内存持续升高,暂时没找到解决办法【不知道webview能不能清除不显示图片所占用的内存,可能我太弱了。。。】

16、所有图片利用初始显示no_default来实现惰性加载,以避免占用太多流量:<img data-url="file/253top_1628_1340242333.jpg" src="img/no_default.png" />

17、所有的列表采用滚动到最底部自动加载3次,之后点击更多加载【下拉滚动Iscroll4有案例,但不想整个列表都用这家伙,据说性能没保障,自己再研究研究怎么实现下拉刷新吧】

18、图集浏览:

通过更改URL锚点来解决当前图片刷新、分享、收藏等问题;

通过检测window.hashchange来修正无刷新浏览图片的后退功能;

19、CSS3帮了大忙,例如图片居中、自适应盒模型、阴影、圆角、简单的动画效果等等,但动画效果不宜过多,低配置的手机没那么强大。

最后:有记录会随时更新的!

Comments are closed.