开发之前

大约从去年开始吧, 也可能是前年 Html5好像火得不得了, 不得了…总能从网上听说到 XXX混合开发, 为了紧跟潮流(虽然有点儿晚了), 咱们也看看Android+Html5混合开发是怎样的!
今天带来的案例是微信的朋友圈, 因为我觉得是微信把H5给”捧红了”. 不过丑话说在前头, 咱们的仿朋友圈可是”低仿”, 只是把混合开发的大致流程说说, 界面可能不堪入目…见谅..

开发环境

• Android Studio 2.2.2
• JDK1.7
• API 24
• Gradle 2.2.2
• jQuery v3.1.1

相关知识点

• webView的使用
• Json的解析和生成(本案例使用GSON)
• Html和js基础(为方便, 本案例使用了jQuery)
• Java和js的交互

我觉得上述Android方面知识点对大家应该不算困难. 在H5和js方面我了解的也不是特别深入, 会用用基本的就够了, 实在不行就w3school!, 你懂得

开始开发

案例预览

上面说了, 请原谅界面的不堪入目….

案例分析

说混合开发, 其实就是在WebView上显示本地的Html文件, 所以我们要解决的问题就是如何将Java的数据传送到Html文件中并且通过JS进行动态的显示.
本案例的思路是, 在Activity中生成Json数据(这些Json数据都是假数据, 在项目可以直接从网络中获取Json数据), Json数据通过与JS的交互, 在JS中接收到消息, 然后动态生成Html的Item显示在WebView上! 并且每个item都有相应的点击事件, 点击后回调Android系统的Toast, 弹出当前点击内容.

搭建布局

额..其实就是一个WebView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:orientation="vertical"xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.lulu.weichatfriends.MainActivity"><WebView
        android:id="@+id/main_web_view"android:layout_width="match_parent"android:layout_height="match_parent"/>
</LinearLayout>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16

实体类准备

本例中用于封装json数据

public class FriendsZone {private String name;private String icon;private String content;//getter和setter...
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

JS 支持类

这个类用于和JS进行交互.

/*** Created by Lulu on 2016/10/27.* JS支持类*/
public class JsSupport {private Context mContext;private String json;public JsSupport(Context context) {mContext = context;}public void setJson(String json) {this.json = json;}@JavascriptInterfacepublic String getJson(){return json;}@JavascriptInterfacepublic void showToast(String str) {Toast.makeText(mContext, str, Toast.LENGTH_SHORT).show();}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28

@JavascriptInterface这个注解说明,该方法可以在js中调用.
上述代码中的两个方法, 在后面的Js可以通过window调用.
这个两个方法刚好能够演示了, Java向JS传递数据和JS回传数据给Java代码

WebView的准备

WebView的使用有很多需要注意的地方, 咱们分步来说:

step1: 在Activity中初始化WebView

mWebView = (WebView) findViewById(R.id.main_web_view);
//解决点击链接跳转浏览器问题
mWebView.setWebViewClient(new WebViewClient());
//js支持
WebSettings settings = mWebView.getSettings();
settings.setJavaScriptEnabled(true);
//允许访问assets目录
settings.setAllowFileAccess(true);
//设置WebView排版算法, 实现单列显示, 不允许横向移动
settings.setLayoutAlgorithm(WebSettings.LayoutAlgorithm.SINGLE_COLUMN);
//assets文件路径
String path = "file:///android_asset/index.html";
//添加Json数据
addJson();
//加载Html页面
mWebView.loadUrl(path);

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

Note: assets文件的路径大家先不用管 后面会说.
上面的addJson()方法接下来会说

step2: addJson()方法, 生成Json数据 传给JsSupport类

private void addJson() {JsSupport jsSupport = new JsSupport(this);List<FriendsZone> zones = new ArrayList<>();for (int i = 0; i < 100; i++) {zones.add(new FriendsZone("鹿鹿" + i, "images/icon.png", "这里是Html测试数据, 这里是Html测试数据, 这里是Html测试数据" + i));}Gson gson = new Gson();String json = gson.toJson(zones);Log.d(TAG, "addJson: json => " + json);jsSupport.setJson(json);//添加js交互接口, 并指明js中对象的调用名称mWebView.addJavascriptInterface(jsSupport, "weichat");
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

Note: Json数据传到JsSupport类之后, 内部会有一个getJson()方法可被js调用, 完成数据传递

step3: 这一步算是一个小细节, 对于咱们的案例没啥大用处. 就是当你的网页跳转后, 用户按返回键会返回到上一个页面而不是退出整个Activity
重写onBackPressed()方法

@Override
public void onBackPressed() {if (mWebView.canGoBack()) {mWebView.goBack();} else {super.onBackPressed();}
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

Html和js部分

这个地方算是今天一个重点了, 接下来分步骤来说如何在Android工程中创建Html和js文件

step1: 在src/main目录下 创建 assets 文件夹, 在创建好的文件夹中创建index.html文件(名字随意), 接着可以创建你想要的文件或文件夹, 如图所示

Note: js目录下存放是jquery库, 不要忘记添加.
在这里就可以解释webView中path = “file:///android_asset/index.html”; 这是固定代码格式, 官方文档中有写

step2: 完成index.html文件, 实现与Android系统数据交互

<img id="head_background" src="data:images/background.jpg" />
<script>var json = window.weichat.getJson();var infos = eval(json);for(var i = 0; i < infos.length; i++) {info = infos[i];var img = info.icon;var userName = info.name;var content = info.content;$("#head_background").after("<div ><div id='nav'><img src=" + img + " /></div><div id='info'><div id='userName'>" + userName + "</div><p id='content'>" + content + "</p></div></div>");$("#userName").click(function() {var str = $(this).text();window.weichat.showToast(str);})$("#content").click(function() {var str = $(this).text();window.weichat.showToast(str);})}
</script>

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26

Note: 在这里我只列出了部分核心代码, CSS样式没有放在上面.
其实该文件中主要是用js来实现动态添加item 并且 给相应的item设置监听…

至此案例代码梳理完毕.

完整代码

代码已经上传到Github, 欢迎大家Clone.

总结

看到最后大家也许会想, 啥混合开发这不是so easy! 额..看上去是不难, 毕竟我这只是Demo, 简单的数据传递. 希望能抛砖引玉, 得到大神的指导. 欢迎大家对本文进行指正和修改. 谢谢 ^v^