前言:
很长时间一直思考什么时候需要原生应用于html5开发的web app结合去开发一个App;终于做了一个《立波育儿百科》的应用,才尝试了这种方式做一个App;
本文作者:心有灵犀鬼才心,blog地址:http://blog.csdn.net/changemyself ,微博地址:http://weibo.com/changeself
如要转载本文,请加上本文地址和作者名称,不得删除原文链接;
项目介绍:
这是 一个百科类的App,主要包含了育儿、养生、怀孕、饮食、母婴用品等方面的资料,这些资料有个特点,都是html格式,采用CSS将其分段存储在数据库里;
考虑到要做一个Android版本和Ios版本,所以尽量让网页内容得以在2个系统上共享,维护一份网页内容,使其在2个手机平台上使用;
在App的操作使用方面,主界面就是百科分类,然后用户进入分类就显示该分类下的标签项,用户通过标签项来进一步找到自己要看的百科文章;当然还有“文章收藏”和“文章搜索”的功能。
如图所示:
在文章页面展示上,采用了jquery mobile的UI风格:页面标题栏+内容栏,用户点击页面,会使页面标题栏会自动隐藏/显示,如果页面展示超过一屏,我在页面最右下角加了一个“回到顶部”的快捷方式;当然页面标题栏还有“返回”和“收藏”的2个按钮,分别帮助用户能够返回上一级的页面,收藏当前喜欢关注的文章。
如图所示:
原生和html5的交互界面介绍:
这个是本文的重点,
准备工作:首先我是用python和django template技术奖数据库的内容按照jquery ui做成的模板批量生成了静态html页面,大概20多M吧,我都直接扔到/asset目录下,好让webview加载使用。
代码设计:加载html5网页的webview会单独嵌入在一个Activity,我们称之为WebPageActivity;
我们还要增加一个类ActionHelper专门负责原生程序和JS直接的通信,包含以下功能:添加收藏,设置页面标题,关闭当前Activity
- package com.souapp.baike.yuer.js;
-
- import android.app.Activity;
- import android.os.Handler;
- import android.util.Log;
- import android.webkit.WebView;
-
- import com.souapp.baike.yuer.db.DBFavoriteOpeator;
- import com.souapp.baike.yuer.exception.DataIsExistException;
- import com.souapp.baike.yuer.favorite.FavoriteBean;
- import com.souapp.common.tools.DateTools;
-
-
-
-
-
-
- public class ActionHelper {
- private String TAG="ActionHelper";
- private Activity cxt;
- private WebView webview;
- private String callbackFunction;
- private ActionHelper(){}
- private static ActionHelper instance;
- private Handler handler;
- private String result="添加收藏成功.";
-
- public static ActionHelper getInstance(){
- if (instance==null){
- instance=new ActionHelper();
- }
- return instance;
- }
- public void setValue(Activity context,WebView wv,Handler ha){
- cxt=context;
- webview=wv;
- handler=ha;
- }
-
-
-
-
-
-
- public void saveBarcodeScanData(String data){
- try{
- webview.loadUrl("javascript:"+callbackFunction+"('"+data+"')");
- }catch(Exception e){
- Log.e(TAG, "",e);
- }
- }
-
-
-
-
- public void setBaikeTitle(final String name){
- try{
-
- handler.post(new Runnable() {
-
- public void run() {
-
- webview.loadUrl("javascript:setBaikeTitle('"+name+"')");
- }
- });
-
-
- }catch(Exception e){
- Log.e(TAG, "",e);
- }
- }
-
-
-
-
-
- public void viewDetail(final String savepath){
- try{
-
- Log.d(TAG, "=========viewDetail=========");
-
- }catch(Exception e){
- Log.e(TAG, "",e);
- }finally{
- handler.post(new Runnable() {
-
- public void run() {
-
- webview.loadUrl("file:///android_asset/static_mobile_baike"+savepath);
- }
- });
- }
- }
-
-
-
-
-
-
- public void addFavorite(final String title,final String category,final String tag,final String savepath){
-
- try{
-
- Log.d(TAG, "=========addFavorite=========");
- String savedate=DateTools.formatLong2Str(System.currentTimeMillis());
- FavoriteBean bean=new FavoriteBean();
- bean.setTitle(title);
- bean.setCategory(category);
- bean.setTag(tag);
- bean.setSavepath(savepath.substring(1));
- bean.setOrder(0);
- bean.setSavedate(savedate);
-
- DBFavoriteOpeator.saveFavorite(cxt,bean);
-
- result="成功添加到收藏夹";
- }catch(DataIsExistException e1){
- Log.e(TAG, "",e1);
- result="提示:"+e1.getMessage();
-
-
- }catch(Exception e){
- Log.e(TAG, "",e);
- result="错误:"+e.getMessage();
- }finally{
- handler.post(new Runnable() {
-
- public void run() {
-
- webview.loadUrl("javascript:callBack_echoMsg('"+result+"')");
- }
- });
- }
- }
-
-
-
-
-
- public void exitActivity(){
- try{
- if (cxt==null) return;
- cxt.finish();
- }catch(Exception e){
- e.printStackTrace();
- }
- }
-
-
-
-
- public void startBarCodeScanUI(String url,String invokeFunction){
-
-
-
-
-
-
-
-
-
-
-
- }
- }
目录浏览:当用户点击主页面的某个分类(例如:育儿百科),我会通过webview去加载一个分类展示页面,然后用户在分类展示页面再点击操作,那就是通过html相对链接的方式在跳转了;在分类展示页面会有一个“返回主页面”的按钮,这个按钮是通过JS调用原生程序来控制关闭webview的Activity
这个“返回主页面”是JS调用原生代码,那么还有一个操作是原生调用JS代码的地方:页面的标题,是根据主界面的分类传到WebPageActivtiy里然后显示在html5的页面上的。
我们看代码如下:
原生代码看上面ActionHelper.java里的setBaikeTitle方法,然后我们去看JS的代码如下:
设置百科文章标题的JS代码:
- <script type="text/javascript">
-
-
- function setBaikeTitle(name){
- console.log("setTitle:"+name);
-
- document.getElementById("baike_title").innerHTML=name;
-
- }
- </script>
关闭Activity的JS代码
- <script type="text/javascript">
-
-
-
- $(document).bind('pageinit', function() {
-
-
- $('#goback').bind('tap', function(e) {
-
-
-
- if(window.es){
- window.es.exitActivity();
- console.log("关闭当前百科页面");
- return;
- }
-
-
- });
- });
-
-
-
- </script>
这里的es是ActionHelper暴露给webview可以调用的对象看我在WebPageActivity里webview的定义代码:
- <span style="white-space:pre"> </span>WebView wv = (WebView) this.findViewById(R.id.webview);
- <span style="white-space:pre"> </span>WebSettings settings = wv.getSettings();
- settings.setJavaScriptEnabled(true);
- settings.setAllowFileAccess(true);
- wv.setScrollBarStyle(View.SCROLLBARS_INSIDE_OVERLAY);
-
-
- SOUAPP_URL="file:///android_asset/static_mobile_baike/";
-
-
- String baike_article=getIntent().getExtras().getString("baike_article");
- if(baike_article!=null){
-
- SOUAPP_URL+=baike_article+"?pageid=1";
- Log.d(TAG, "页面:"+SOUAPP_URL);
- }else{
-
- String baike_type=this.getIntent().getExtras().getString("baike_type");
- SOUAPP_URL+=baike_type+".html";
-
- baike_name=this.getIntent().getExtras().getString("baike_name");
- }
-
-
-
- ah=ActionHelper.getInstance();
- ah.setValue(this,wv,new Handler());
- wv.addJavascriptInterface(ah, "es");
- wv.loadUrl(S<span style="font-family: Arial, Helvetica, sans-serif;">OUAPP_URL</span>);
- wv.setBackgroundColor(0);
- wv.setBackgroundResource(R.drawable.loadpage);
这里呢,我省略了一些代码,例如:网页加载进度的显示的;
看一下html5页面的代码:
-
- <div data-role="page" id="main_page" data-dom-cache="true">
-
-
-
-
- <div data-theme="a" data-role="header" data-position="fixed" >
- <a id="goback" data-rel="back" data-role="button" data-icon="back">返回主页面</a>
- <h3>
- <div id="baike_title">怀孕百科</div>
- </h3>
- </div>
id为goback就是返回按钮,id为baike_title,其innerHTML内容会被替换。
这里不讲android webview如何与js进行通信,原理很简单大家如果不懂的话可以去查文章后再看本文。
收藏夹浏览:
这里面显示的都是用户收藏的百科文章,我使用sqllite数据库存在手机里;
界面上“删除”操作是原生代码操作,点击每行就是查看文章页面操作,这个其实还是调用WebPageActivity去load在
目录下的文章页面。
百科搜索:
在20多M的数据里进行全文搜索,只能放在服务器上了;如何中文分词、生成索引这些东西在这里不讲,原理就是用户输入关键字,会通过服务器返回一个html5页面;
这时候用户可以查看详细页面,直接调用手机里的静态页面展现。
最后说说jquery mobile的坑吧:
说是坑也不过分,Android4以下的手机使用,感觉速度慢,Android4以上的手机速度一般,iphone手机用起来还可以接受,体验还行;
对于 data-ajax="false" 这种使用呢可以解决闪屏的问题,但是无法记录用户上次打开的页面状态,我是被闪屏搞得太无语就使用了就把ajax给禁止了,有人会问啥叫闪屏?
就是你点一个按钮或者链接,它闪页面1~2次,才开始切换。
- <a data-ajax="false" href="./baike_type_4__category_4.html" data-cache="true" data-role="button" data-theme="b">孕前</a>
使用jquery moblie先把html页面再浏览器下调试没错误了,再嵌入webview
里,以免被折腾死,webview下调试不是很方便。