signed

QiShunwang

“诚信为本、客户至上”

Android +H5混合开发

2020/12/27 17:57:16   来源:

开发之前

大约从去年开始吧, 也可能是前年 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!, 你懂得

开始开发

案例预览

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

 

WeiChatFriends.gif

案例分析

说混合开发, 其实就是在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>

实体类准备

本例中用于封装json数据

public class FriendsZone {

private String name;

private String icon;

private String content;


//getter和setter...

}

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;

}


@JavascriptInterface

public String getJson(){

return json;

}


@JavascriptInterface

public void showToast(String str) {

Toast.makeText(mContext, str, Toast.LENGTH_SHORT).show();

}

}

@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);

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");

}

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

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

@Override

public void onBackPressed() {

if (mWebView.canGoBack()) {

mWebView.goBack();

} else {

super.onBackPressed();

}

}

Html和js部分

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

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

 

Paste_Image.png

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

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

<img id="head_background" src="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>

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

至此案例代码梳理完毕.