Android混合开发之仿微信朋友圈
bn6102
9年前
<h2><strong>开发之前</strong></h2> <p>大约从去年开始吧, 也可能是前年 Html5好像火得不得了, 不得了...总能从网上听说到 XXX混合开发, 为了紧跟潮流(虽然有点儿晚了), 咱们也看看Android+Html5混合开发是怎样的!</p> <p>今天带来的案例是微信的朋友圈, 因为我觉得是微信把H5给"捧红了". 不过丑话说在前头, 咱们的仿朋友圈可是"低仿", 只是把混合开发的大致流程说说, 界面可能不堪入目...见谅..</p> <h3><strong>开发环境</strong></h3> <ul> <li> <p>Android Studio 2.2.2</p> </li> <li> <p>JDK1.7</p> </li> <li> <p>API 24</p> </li> <li> <p>Gradle 2.2.2</p> </li> <li> <p>jQuery v3.1.1</p> </li> </ul> <h3><strong>相关知识点</strong></h3> <ul> <li> <p>webView的使用</p> </li> <li> <p>Json的解析和生成(本案例使用GSON)</p> </li> <li> <p>Html和js基础(为方便, 本案例使用了jQuery)</p> </li> <li> <p>Java和js的交互</p> </li> </ul> <p>我觉得上述Android方面知识点对大家应该不算困难. 在H5和js方面我了解的也不是特别深入, 会用用基本的就够了, 实在不行就 w3school !, 你懂得</p> <h2><strong>开始开发</strong></h2> <h3><strong>案例预览</strong></h3> <p>上面说了, 请原谅界面的不堪入目....</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/f5bd58523e290e50e7328b883f832436.gif"></p> <p style="text-align:center">WeiChatFriends.gif</p> <h3><strong>案例分析</strong></h3> <p>说混合开发, 其实就是在WebView上显示本地的Html文件, 所以我们要解决的问题就是如何将Java的数据传送到Html文件中并且通过JS进行动态的显示.</p> <p>本案例的思路是, 在Activity中生成Json数据(这些Json数据都是假数据, 在项目可以直接从网络中获取Json数据), Json数据通过与JS的交互, 在JS中接收到消息, 然后动态生成Html的Item显示在WebView上! 并且每个item都有相应的点击事件, 点击后回调Android系统的Toast, 弹出当前点击内容.</p> <h3><strong>搭建布局</strong></h3> <p>额..其实就是一个WebView</p> <pre> <code class="language-java"><?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></code></pre> <h3><strong>实体类准备</strong></h3> <p>本例中用于封装json数据</p> <pre> <code class="language-java">public class FriendsZone { private String name; private String icon; private String content; //getter和setter... }</code></pre> <h3><strong>JS 支持类</strong></h3> <p>这个类用于和JS进行交互.</p> <pre> <code class="language-java">/** * 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(); } }</code></pre> <p>@JavascriptInterface这个注解说明,该方法可以在js中调用.</p> <p>上述代码中的两个方法, 在后面的Js可以通过window调用.</p> <p>这个两个方法刚好能够演示了, Java向JS传递数据和JS回传数据给Java代码</p> <h3><strong>WebView的准备</strong></h3> <p>WebView的使用有很多需要注意的地方, 咱们分步来说:</p> <p>step1: 在Activity中初始化WebView</p> <pre> <code class="language-java">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);</code></pre> <p>Note: assets文件的路径大家先不用管 后面会说.</p> <p>上面的addJson()方法接下来会说</p> <p>step2: addJson()方法, 生成Json数据 传给JsSupport类</p> <pre> <code class="language-java">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"); }</code></pre> <p>Note: Json数据传到JsSupport类之后, 内部会有一个getJson()方法可被js调用, 完成数据传递</p> <p>step3: 这一步算是一个小细节, 对于咱们的案例没啥大用处. 就是当你的网页跳转后, 用户按返回键会返回到上一个页面而不是退出整个Activity</p> <p>重写onBackPressed()方法</p> <pre> <code class="language-java">@Override public void onBackPressed() { if (mWebView.canGoBack()) { mWebView.goBack(); } else { super.onBackPressed(); } }</code></pre> <h3><strong>Html和js部分</strong></h3> <p>这个地方算是今天一个重点了, 接下来分步骤来说如何在Android工程中创建Html和js文件</p> <p>step1: 在src/main目录下 创建 assets 文件夹, 在创建好的文件夹中创建index.html文件(名字随意), 接着可以创建你想要的文件或文件夹, 如图所示</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/0a35826a1ded1c364b65442f0c1ccb6c.png"></p> <p style="text-align:center">Paste_Image.png</p> <p>Note: js目录下存放是jquery库, 不要忘记添加.</p> <p>在这里就可以解释webView中path = "file:///android_asset/index.html"; 这是固定代码格式, 官方文档中有写</p> <p>step2: 完成index.html文件, 实现与Android系统数据交互</p> <pre> <code class="language-java"><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></code></pre> <p>Note: 在这里我只列出了部分核心代码, CSS样式没有放在上面.</p> <p>其实该文件中主要是用js来实现动态添加item 并且 给相应的item设置监听...</p> <p>至此案例代码梳理完毕.</p> <h2>总结</h2> <p>看到最后大家也许会想, 啥混合开发这不是so easy! 额..看上去是不难, 毕竟我这只是Demo, 简单的数据传递. 希望能抛砖引玉, 得到大神的指导.</p> <p>来自：http://www.jianshu.com/p/0cc665503324</p> <p> </p>