Android 混合开发之仿微信朋友圈

开发之前

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

开发环境

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

开始开发

案例预览

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

案例分析

说混合开发, 其实就是在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;}@JavascriptInterfacepublic String getJson(){return json;}@JavascriptInterfacepublic 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文件(名字随意), 接着可以创建你想要的文件或文件夹, 如图所示

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>

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

至此案例代码梳理完毕.

完整代码

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

总结

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

Android 混合开发之仿微信朋友圈相关推荐

混合开发之仿微信朋友圈
转载于:Android 混合开发之仿微信朋友圈 - CSDN博客 https://blog.csdn.net/u013144863/article/details/53230786 开发之前大约从去 ...
Android自定义弹窗模仿微信,Android 仿微信朋友圈点赞和评论弹出框功能
本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多&q ...
Android 仿微信朋友圈添加图片
github地址(欢迎下载Demo) https://github.com/zhouxu88/WXCircleAddPic 老习惯,先上图,着急用的朋友,直接带走Demo,先拿来用吧,毕竟老板催的紧, ...
android 仿微信朋友圈评论,2020年android 仿微信朋友圈评论
2020年android 仿微信朋友圈评论 1.如果有人问我:那些艰难的岁月你是怎么熬过来的?我想我只有一句话回答:我有一种强大的精神力量支撑着我,这种力量名字叫"想死又不敢" ...
Android仿微信朋友圈7实现点赞功能
前言: 之前一直有朋友问我点赞怎么实现?今天趁着休息时间整理出来,其实点赞的功能和用户评论差不多,都是显示一个用户列表,只不过评论有评论内容和回复评论功能.实现点赞的思路如下: 1.当用户点击点赞按钮 ...
Android仿微信朋友圈4实现评论动态时输入框和软键盘自动定位到内容下面
最近做完朋友圈功能后,测试提出一个功能优化,在某些发布的动态下评论时软键盘和输入框遮当内容了,这个用户体验感觉不是很好,于是根据今日头条和其他热门的App评论时软键盘和输入框都是在内容下面.Scrol ...
android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件，支持点击图片全屏预览大图...
AssNineGridView 仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图(可自定义). 写在前面这是一个九宫格控件,本来是很久之前就写好了,现在才开源出来,也是看了很多优秀 ...
android com.mylhyl,Android 高仿微信朋友圈拍照上传功能
模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. photopicker的使用这是一个支持选择多张图片,点击图片放大,图片之间 ...
Android 实现仿微信朋友圈九宫格图片+NineGridView+ImageWatcher(图片查看:1.预览，2.拖动，3.放大，4.左右滑动，5.长按保存到手机)的功能
一.测试实现: 二.添加依赖包: implementation 'androidx.appcompat:appcompat:1.1.0'implementation 'androidx.recycl ...

Android 混合开发之仿微信朋友圈

开发之前

开发环境

相关知识点

开始开发

案例预览

案例分析

搭建布局

实体类准备

JS 支持类

WebView的准备

Html和js部分

完整代码

总结

Android 混合开发之仿微信朋友圈相关推荐

最新文章

热门文章