當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

android studio+webapi+easyui混合开发

發布時間：2024/3/24 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 android studio+webapi+easyui混合开发小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

近日做了個android小例子，我是個初學者，新手上路，請多多指教。

一. 創建一個H5頁面，UI使用easyui

? ? 創建assets目錄，用來存放前端資源

?下載easyui資源包，復制CSS、資源和js文件。

?把easyui文件直接復制到目錄下

? 這個路徑就是 easyuif/……，下面這一步可以查看路徑

這就是要引用的路徑

參考easyui demo創建h5網頁

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" type="text/css" href="easyuif/themes/default/easyui.css" /><link rel="stylesheet" type="text/css" href="easyuif/themes/mobile.css" /><link rel="stylesheet" type="text/css" href="easyuif/themes/icon.css" /><link rel="stylesheet" type="text/css" href="easyuif/themes/color.css" /><script type="text/javascript" src="easyuif/jquery.min.js"></script><script type="text/javascript" src="easyuif/jquery.easyui.min.js"></script><script type="text/javascript" src="easyuif/locale/easyui-lang-zh_CN.js"></script><style>.nihong{/* 要把陰影與大小配合好，一般來說大小都是偏大時采用 */font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;text-transform: uppercase;/* 全開大寫 */font-size: 24px;color: orangered;text-shadow: 0 8px 9px #c4b59d, 0px -2px 1px #fff;font-weight: bold;letter-spacing: -4px;/*background: linear-gradient(to bottom, #ece4d9 0%,#e9dfd1 100%);*/}</style> </head> <body onload="iniatialize()"> <div style="margin:20px 0;"><a class="nihong" style="">RCS參數下發_測試用例</a> </div> <div><ul class="m-list"><li><span style="font-size:12px;color:gray">請求編號(RequestCode:string):</span><br><input id="RequestCode" class="easyui-textbox" prompt="...（選填）" style="width:100%;height:30px"></li><li><span style="font-size:12px;color:gray">任務類型(taskType:string):</span><br><select id="state" class="easyui-combobox" name="state" style="width:100%;height:30px"><option value="AL">產線上線</option><option value="AK">立庫出庫</option><option value="AZ">產線下線</option></select></li><li><span style="font-size:12px;color:gray">任務號(taskNo:string):</span><br><input id="taskNo" class="easyui-textbox" prompt="..." style="width:100%;height:30px"></li><li><span style="font-size:12px;color:gray">狀態(taskState:string):</span><br><input id="taskState" class="easyui-textbox" prompt="..." style="width:100%;height:30px"></li><li><span style="font-size:12px;color:gray">接收位置(begin_location:string):</span><br><input id="beginlocation"? class="easyui-textbox" prompt="例如301-101" style="width:100%;height:30px"></li><li><span style="font-size:12px;color:gray">送達位置(target_location:string):</span><br><input id="targetlocation"? class="easyui-textbox" prompt="例如301-103" style="width:100%;height:30px"></li><li><span style="font-size:12px;color:gray">下一工序產線編碼(To_Line_Code:string):</span><br><input id="ToLineCode"? class="easyui-textbox" prompt="..." style="width:100%;height:30px"></li><li><span style="font-size:12px;color:gray">請求操作時間(RequestTime:string)</span><br><input id="RequestTime"? class="easyui-textbox" prompt="..." style="width:100%;height:30px"></li><li><span style="font-size:12px;color:gray">托盤號(PalletCode:string):</span><br><input id="PalletCode"? class="easyui-textbox" prompt="例如：P2100056" style="width:100%;height:30px"></li><li><span style="font-size:12px;color:gray">部件總數量(TotalQuantity:int):</span><br><input id="TotalQuantity"? class="easyui-textbox" prompt="請輸入正整數" style="width:100%;height:30px"></li><li><span style="font-size:12px;color:gray">部件集合(PartSets:集合):(PartSets:ArrayList):</span><br><input id="PartSets" class="easyui-searchbox" data-options="prompt:'null(選填)',searcher:doSearch" style="width:100%;height:30px"></li></ul><a href="javascript:quest();" class="easyui-linkbutton c3" style="width:100%;height:40px">提交</a> </div>  <div id="win" class="easyui-window" title="部件編輯" closed="true" style="top:40%;width:90%;height:40%;"><form id="frm" style= "padding:1px 1px 1px 1px;"><table id="dg" class="easyui-datagrid" style="width:100%;height:auto"data-options="iconCls: 'icon-edit',singleSelect: true,toolbar: '#tb',onClickCell: onClickCell,onEndEdit: onEndEdit"><thead><tr><th data-options="field:'SequenceNumber',width:40,align:'center',editor:'textbox'">順序</th><th data-options="field:'ProductionBatchCode',width:80,align:'center',editor:'textbox'">批次號</th><th data-options="field:'PartSerialNumber',width:80,align:'center',editor:'textbox'">條碼號</th><th data-options="field:'TaskNumber',width:80,align:'center',editor:'textbox'">任務單</th><th data-options="field:'PartMaterialCode',width:80,align:'center',editor:'textbox'">物料號</th><th data-options="field:'status',align:'middle',width:40,align:'center',editor:{type:'checkbox',options:{on:'P',off:''}}">狀態</th></tr></thead></table><div id="tb" style="height:auto"><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true" onclick="append()">添加</a><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-remove',plain:true" onclick="removeit()">刪除</a><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-clear',plain:true" onclick="removeall()">清空</a><a href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-cancel',plain:true" onclick="closewin2()">關閉</a></div></form> </div>  <div id="win2" class="easyui-window" title="系統消息" closed="true" style="top:60%;width:90%;height:30%;"><form id="frm2" style= "padding:10px 10px 10px 10px;"><div style="width:100%;height:90%"><div style="width:100%;height:5%"><p style="font-size:14px"><label id="typename">sdfsdfsdfsdg</label></p></div><div style="width:100%;height:95%"><p style="font-size:12px;color:darkgray;padding:5px 5px 5px 5px;"><label id="msgtxt" style="word-break:break-all;">asdasdasd</label></p></div></div><div style="width:100%;top:90%;height:5%"><p><a href="javascript:closewin()" class="easyui-linkbutton c4" style="left:60%;width:20%;height:40px">確定</a></p></div></form> </div> <script type="text/javascript">function quest(){var RequestCode_ =$("#RequestCode").textbox('getText');var taskType_ =$("#state").combobox('getText');var taskNo_ = $("#taskNo").textbox('getText');var taskState_ = $("#taskState").textbox('getText');var beginlocation_ = $("#beginlocation").textbox('getText');var targetlocation_ = $("#targetlocation").textbox('getText');var ToLineCode_ = $("#ToLineCode").textbox('getText');var date = new Date();var datm=dateTimeToString(date).toLocaleString();$('#RequestTime').textbox('setValue', datm);var RequestTime_ = $("#RequestTime").textbox('getText');var PalletCode_ = $("#PalletCode").textbox('getText');var TotalQuantity_ = parseInt($("#TotalQuantity").textbox('getText'));var msginfo=getTable();var PartSets_;if(msginfo==''){PartSets_ = null;$('#PartSets').textbox('setValue', 'null');}else{PartSets_ = getTable();var numcou=PartSets_.length;$('#PartSets').textbox('setValue', 'data['+String(numcou)+']');}var datax={?????????????????????? RequestCode:RequestCode_,taskType:taskType_,taskNo:taskNo_,taskState:taskState_,begin_location:beginlocation_,??????????????????? target_location:targetlocation_,To_Line_Code:ToLineCode_,RequestTime:RequestTime_,PalletCode:PalletCode_,TotalQuantity:TotalQuantity_,PartSets:PartSets_};android.showToast(JSON.stringify(datax));}function ShowMsg(str,datx){document.getElementById('typename').innerHTML =datx;document.getElementById('msgtxt').innerHTML = JSON.stringify(str);openmsg();}function iniatialize(){$('#RequestCode').textbox('setValue', 'testRCS_001');$('#taskState').textbox('setValue', '下發');$('#taskNo').textbox('setValue', 'Task001');var date = new Date();var datm=dateTimeToString(date).toLocaleString();$('#RequestTime').textbox('setValue', datm);$('#ToLineCode').textbox('setValue', '8A27A001004');$('#TotalQuantity').textbox('setValue', '0');$('#PartSets').textbox('setValue', 'null');}function dateTimeToString(date) {var y = date.getFullYear();var M = date.getMonth() + 1;var d = date.getDate();var H = date.getHours();var m = date.getMinutes();var s = date.getSeconds();return y + '-' + (M < 10 ? ('0' + M) : M) + '-' + (d < 10 ? ('0' + d) : d) + " " + (H < 10 ? ('0' + H) : H) + ":" + (m < 10 ? ('0' + m) : m) + ":" + (s < 10 ? ('0' + s) : s);}function getTable(){var list= [];var checkedItems = $('#dg').datagrid('getRows');$.each(checkedItems, function(index, item){var _SequenceNumber=parseInt(item.SequenceNumber);var _ProductionBatchCode=item.ProductionBatchCode==null?'':item.ProductionBatchCode;var _PartSerialNumber=item.PartSerialNumber==null?'':item.PartSerialNumber;var _TaskNumber=item.TaskNumber==null?'':item.TaskNumber;var _PartMaterialCode=item.PartMaterialCode==null?'':item.PartMaterialCode;var datax={SequenceNumber:_SequenceNumber,ProductionBatchCode:_ProductionBatchCode,PartSerialNumber:_PartSerialNumber,TaskNumber:_TaskNumber,PartMaterialCode:_PartMaterialCode};list.push(datax);});return list;}function doSearch(value){openlogin();}var editIndex = undefined;function endEditing(){if (editIndex == undefined){return true}if ($('#dg').datagrid('validateRow', editIndex)){$('#dg').datagrid('endEdit', editIndex);editIndex = undefined;return true;} else {return false;}}function onClickCell(index, field){if (editIndex != index){if (endEditing()){$('#dg').datagrid('selectRow', index).datagrid('beginEdit', index);var ed = $('#dg').datagrid('getEditor', {index:index,field:field});if (ed){($(ed.target).data('textbox') ? $(ed.target).textbox('textbox') : $(ed.target)).focus();}editIndex = index;} else {setTimeout(function(){$('#dg').datagrid('selectRow', editIndex);},0);}}}function onEndEdit(index, row){var ed = $(this).datagrid('getEditor', {index: index,field: 'ProductionBatchCode'});row.ProductionBatchCode = $(ed.target).combobox('getText');}function append(){if (endEditing()){$('#dg').datagrid('appendRow',{status:'P'});editIndex = $('#dg').datagrid('getRows').length-1;$('#dg').datagrid('selectRow', editIndex).datagrid('beginEdit', editIndex);}}function removeit(){if (editIndex == undefined){return}$('#dg').datagrid('cancelEdit', editIndex).datagrid('deleteRow', editIndex);editIndex = undefined;}function removeall(){$('#dg').datagrid('loadData',[]);}function accept(){if (endEditing()){$('#dg').datagrid('acceptChanges');}}function reject(){$('#dg').datagrid('rejectChanges');editIndex = undefined;}function getChanges(){var rows = $('#dg').datagrid('getChanges');alert(rows.length+' rows are changed!');}function openlogin(){$('#win').window('open');}function openmsg(){$('#win2').window('open');}(function($){function getParentMenu(rootMenu, menu){return findParent(rootMenu);function findParent(pmenu){var p = undefined;$(pmenu).find('.menu-item').each(function(){if (!p && this.submenu){if ($(this.submenu)[0] == $(menu)[0]){p = pmenu;} else {p = findParent(this.submenu);}}});return p;}}$.extend($.fn.menubutton.methods, {enableNav: function(enabled){var curr;$(document).unbind('.menubutton');if (enabled == undefined){enabled = true;}if (enabled){$(document).bind('keydown.menubutton', function(e){var currButton = $(this).find('.m-btn-active,.m-btn-plain-active,.l-btn:focus');if (!currButton.length){return;}if (!curr || curr.button != currButton[0]){curr = {menu: currButton.data('menubutton') ? $(currButton.menubutton('options').menu) : $(),button: currButton[0]};}var item = curr.menu.find('.menu-active');switch(e.keyCode){case 13:? // enteritem.trigger('click');break;case 27:? // esccurrButton.trigger('mouseleave');break;case 38:? // upvar prev = !item.length ? curr.menu.find('.menu-item:last') : item.prevAll('.menu-item:first');prev.trigger('mouseenter');return false;case 40:? // downvar next = !item.length ? curr.menu.find('.menu-item:first') : item.nextAll('.menu-item:first');next.trigger('mouseenter');return false;case 37:? // leftvar pmenu = getParentMenu(currButton.data('menubutton') ? $(currButton.menubutton('options').menu) : $(), curr.menu);if (pmenu){curr.menu = pmenu;item.triggerHandler('mouseleave');} else {var prev = currButton.prevAll('.l-btn:first');if (prev.length){currButton.trigger('mouseleave');prev.focus();}}return false;case 39:? // rightif (item.length && item[0].submenu){curr.menu = $(item[0].submenu);curr.button = currButton[0];curr.menu.find('.menu-item:first').trigger('mouseenter');} else {var next = currButton.nextAll('.l-btn:first');if (next.length){currButton.trigger('mouseleave');next.focus();}}return false;}});}}});})(jQuery);$(function(){$.fn.menubutton.methods.enableNav();$(document).keydown(function(e){if (e.altKey && e.keyCode == 87){$('#btn-home').focus();}})});//顯示消息let timer;var inter=0;function clock() {if(inter<3) {$("#msginfo").css("visibility","visible");$("#msginfo").css("display","block");inter++;}else{endclock();$("#msginfo").css("visibility","hidden");$("#msginfo").css("display","none");}}function endclock() {clearInterval(timer);}function closewin() {$(".panel-tool-close").click();}function closewin2() {$(".panel-tool-close").click();var PartSets_ = getTable();var numcou=PartSets_.length;if(numcou==0){$('#PartSets').textbox('setValue', 'null');}else{$('#PartSets').textbox('setValue', 'data['+String(numcou)+']');}} </script> </body> </html> 前端網站至此創建完畢，我們繼續配置android端后臺。二. 配置網絡權限設置Layout布局 AnddoirdManifest文件里必須開通網絡權限。  <uses-permission android:name="android.permission.INTERNET"></uses-permission>  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />  <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />  <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"></uses-permission>  <uses-permission android:name="android.permission.CHANGE_WIFI_STATE" /> 在布局文件里修改手機UI布局。拖放webview，給他一個id，布局需要設置Margin還需要指定布局大小。我們做的是一個混合開發的APP，結合webview互操作前臺與后臺，原理與HbuilderX的nui和mui是一樣的，也是現在開發的主流，網絡api請求不指定平臺，一般有idea和.net,soap+。前端其實一般前端制作工具編輯好設計好，再遷移到android studio，我用的是intellij idea，很方便測試。編輯前端的時候我們再前端預留了2個js函數，方便android互操作。前端按鈕按下調用前端quest()。

? ? ? ??操作android原生后臺函數android.showToast(參數)。

ShowMsg是顯示一個彈窗，當后臺請求數據成功后，H5顯示彈窗UI就沒有違和感。

當提交按鈕提交時，后臺請求webapi，返回消息，后臺控制webview加載彈窗，提示一個消息。

三. 后臺代碼

程序寫三個類，MainActivity是主線程首先創建一個webapi請求的類requestApi，我們一直在糾結為什么要這么復雜使用后臺，而不直接使用前臺操作，js能一步到位。這個其實就是一個水很深的領域，是現存最大問題，前端有他的局限性，他會考慮跨域問題、內置瀏覽器端口限制問題，為了修復這個問題，需要配置瀏覽器還要配置API服務器支持瀏覽器，往往我們API來自不通領域，不僅僅是java開發的，瀏覽器訪問需要考慮跨域問題，但是api是網絡協議，不該有過多的限制，所以我們還是用后端做一些數據處理比較恰當。 package com.example.productlinetest;import org.json.JSONException; import org.json.JSONObject; import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net.HttpURLConnection; import java.net.MalformedURLException; import java.net.URL; public class requestApi {public String getSapData(String ptd) throws JSONException {URL wsUrl;int errCode=0;JSONObject resultJson=new JSONObject();String result="";try {wsUrl = new URL("http://xxx.xxx.xxx.xxx:6000/Mes/IssueTask?requestCommand=1");HttpURLConnection conn = (HttpURLConnection) wsUrl.openConnection();conn.setDoInput(true);conn.setDoOutput(true);conn.setRequestMethod("POST");conn.setRequestProperty("Content-Type", "application/json; charset=utf-8");conn.setConnectTimeout(50000);conn.setReadTimeout(50000);OutputStream os = conn.getOutputStream();//請求體String soap = ptd.trim();os.write(soap.getBytes());InputStream is = conn.getInputStream();byte[] b = new byte[1024];int len = 0;String s = "";while((len = is.read(b)) != -1){String ss = new String(b,0,len,"UTF-8");s += ss+"\r\n";}result=s;is.close();os.close();conn.disconnect();} catch (MalformedURLException e) {// TODO Auto-generated catch blockSystem.out.println(e.toString());errCode=1;} catch (IOException e) {// TODO Auto-generated catch blockSystem.out.println(e.toString());errCode=2;}resultJson.put("errCode", errCode);resultJson.put("data", result);return resultJson.toString();} } 從上面就不難看出6000端口，那是Google限制端口，跟他內部沖突。主線程MainActivity添加代碼。 package com.example.productlinetest; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.os.Handler; import android.os.Message; import android.webkit.WebView; import android.webkit.WebViewClient; import android.widget.Toast; public class MainActivity extends AppCompatActivity{public static Handler mHandler;public WebView webview;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);//實例化webviewwebview=this.findViewById(R.id.webviewa);//設置WebView屬性，能夠執行Javascript腳本webview.getSettings().setJavaScriptEnabled(true);//添加與js的交互接口,起的名稱與js代碼中的接口名稱要一致webview.addJavascriptInterface(new JavaScriptinterface(this), "android");// 使WebView的網頁跳轉在WebView中進行，而非跳到瀏覽器webview.setWebViewClient(new WebViewClient() {public boolean shouldOverrideUrlLoading(WebView view, String url) {view.loadUrl(url);return true;}});//加載頁面try {//設置打開的頁面地址webview.loadUrl("file:///android_asset/mhx.html");} catch(Exception ex) {ex.printStackTrace();Toast toast=Toast.makeText(this,"加載服務器失敗",Toast.LENGTH_SHORT);toast.show();}//訂閱靜態傳值對象mHandler = new Handler(){@Overridepublic void handleMessage(Message msg) {super.handleMessage(msg);//msg.what對應子線程中msg的標簽，在子線程中進行賦值if(msg.what==1){//操作js方法，顯示消息String datax=msg.obj.toString();String[] datm=datax.split("》");webview.loadUrl("javascript:ShowMsg('"+datm[1]+"','"+datm[0]+"');");}}};} } 從上面代碼來看，我們給webview注入了一個接口類變量。

? 給主窗口寫了一個傳值跨線程對象。

他是個靜態對象，這里只是為了圖方便，當然不建議用這種靜態方法。

JavaScriptinterface這個類繼承自主線程MainAcgtivity要調用靜態handler傳值。內部要寫一個@JavascriptInterface需要接收前端傳值。 package com.example.productlinetest; import android.content.Context; import android.os.Message; import android.webkit.JavascriptInterface; import org.json.JSONException; public class JavaScriptinterface extends MainActivity{Context context;public JavaScriptinterface(Context contextpara) {context= contextpara;}@JavascriptInterfacepublic void showToast(String ssss) {requestApi req=new requestApi();try {String str=req.getSapData(ssss);runOnUiThread(() -> {Message msg = new Message();msg.what = 1;msg.obj="接口調用成功》"+str;mHandler.sendMessage(msg);});} catch (JSONException e) {runOnUiThread(() -> {Message msg = new Message();msg.what = 1;msg.obj="接口請求異常:》erro unlinked";mHandler.sendMessage(msg);});}} } @JavascriptInterface是不能互操作后端的，需要寫一個線程單獨去刷新。 Android操作js也是要通過webview的。

? ? ? ? webview是主線程控件，子線程訪問需要刷新handler。

總結

以上是生活随笔為你收集整理的android studio+webapi+easyui混合开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。