html5android交互

⑴ android平台的app 手机客户端和后台服务器怎么进行数据交互的

首先不要管安卓端还是苹果端，现在一般都是响应式的app，你放到安卓或者苹果或者pc或者平板都是没有问题的。一般采用的是http接口通讯，或者socket连接。具体你要去查资料找Demo了。而且现在主流是采用html5开发或者混合开发了。所以最好是服务器提供appAPI接口，通过http访问服务器，获取数据，数据一般是json，或者xml，拿到后解析数据就可以了，然后再用UI框架或者其他框架或者自定义的UI封装下格式很漂亮了，至于cookie和session等，看你的习惯，网络验证和签名那些也自己看习惯，如果涉及到大数据，还需要引入第三方框架的，直接引入就可以了，不过推荐自己写，防止侵权。都是很通用的。

⑵ 手机app前端交互是用什么语言开发的

作者：涂鸦
链接：https://www.hu.com/question/20269059/answer/33226070
来源：知乎
着作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

1.比如说具体的应用在不同地方的形态。一款计算器：web app： 其实就是在网页上的应用。这个很广泛，只不过大家平时都不这么叫而已，你在 网页上使用一款计算器都可以称作web app。mobile web app：额，就是能在手机浏览器中打开使用的计算器，只不过根据手机的屏幕，调整了 自己的按键大小，布局等等。mobile app： 你在应用商店下载了一个计算器。2.比如说如何用代码编写：web前端：基本上就是html+css+javascript。至于html5，css3什么的就是具体到你应该用什么规则的代码去写了。这个如果楼主想要入门学习的话，推荐w3school 在线教程（中文）。mobile web 前端：其实还是那套东西，但是加入了一个叫做响应式设计的东西。而且据我了解，这个概念还要从html 5标准的普及说起，说通俗点就是屏幕多大的时候布局，字体是什么样的。网上有很多前端模板都提供了这个功能。比如比较火的Bootstrap中文网（中文）深层次点，比如通过html5的API调用手机的硬件等。mobile 前端：这个目前还分两大阵营，一个是Android，一个是iOS。而且就我的了解，web前端有专门的岗位叫前端攻城师，但是很少听说过只写mobile前端的移动工程师，至少我至今没有听到过。Android：静态的话就是xml，动态的话就是android的layout那堆东西。https://developer.android.com/guide/topics/ui/declaring-layout.html(可能需要翻墙)比较简单的layout，比如:Linear Layout(可能需要翻墙)FrameLayout | Android Developers(可能需要翻墙)，想学习的话可以参考下。还有一些动画效果。https://developer.android.com/guide/topics/graphics/index.htmll(可能需要翻墙)当然，提到Android的UI，不得不提的是那坑爹的适配。只能说，学习Android UI需谨慎。iOS：UIKit那套东西，其实现在感觉如果不是太复杂，.xib直接拖界面也还可以。UIKit Framework Reference 。storyboard就算了，不是太推荐。简单的页面还可以，想试也可以试试。反正我用的不是很舒服。当然还有一些动画效果。Graphics and Animation3.比如说其他区别：其实最显着的区别就是，web app是不依赖于具体的设备的，通用性较强，只要手机或PC有相应内核的浏览器就基本OK。而mobile的app则依赖于具体的设备，一旦更换设备，需要重新下载才能继续使用。暂时就想到这么多，以后想到了再补充吧。

⑶ html5怎么与android交互

Android中构建HTML5应用
使用WebView控件,与其他控件的使用方法相同在layout中使用一个标签,WebView不包括导航栏，地址栏等完整浏览器功能，只用于显示一个html.
在WebView中加载Web页面:
（1）注意在manifest文件中加入访问互联网的权限：
<</SPAN>uses-permission android:name="android.permission.INTERNET" />
在Android中点击一个链接，默认是调用应用程序来启动，因此WebView需要代为处理这个动作通过WebViewClient。
（2）在布局文件中(main.xml),添加标签WebView的id
[html] view plainprint?
<</SPAN>WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />
（2）在onCreate()中使用loadUrl(...)加载html。
[java] view plainprint?
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

WebView mWebView = (WebView)findViewById(R.id.webview);
// mWebView.getSettings().setJavaScriptEnabled(true);
// mWebView.setWebChromeClient(new WebChromeClient());
mWebView.loadUrl("file:///android_asset/www/NewFile.html");
}
(3)实现android与js交互
默认情况下WebView中的js是禁用的，通过将WebSettings附加到WebView中启动js，可以用getSettings()检索WebSettings,然后用setJavaScriptEnabled()启动js。
mWebView.getSettings().setJavaScriptEnabled(true);
mWebView.setWebChromeClient(new WebChromeClient());
（4）在JS中调用Android的函数方法
把本类的一个实例添加到js的全局对象window中，这里是"injs"。
mWebView.addJavascriptInterface(new JavaScriptInterface(),"injs");
实现JavaScriptInterface()类，这里在该类中定义一个方法public void runOnAndroidJavaScript(final String str){...}
在js中调用java函数
windows.injs.runOnAndroidJavaScript(str);//调用android的函数

⑷ webview 与html5有几种交互方式

对于android初学者应该都了解webView这个组件。之前我也是对其进行了一些简单的了解，但是在一个项目中不得不用webview的时候，发现了webview的强大之处，今天就分享一下使用webview的一些经验。

1、首先了解一下webview。
webview介绍的原文如下：A View that displays web pages. This class is the basis upon which you can roll your own web browser or simply display some online content within your Activity. It uses the WebKit rendering engine to display web pages and includes methods to navigate forward and backward through a history, zoom in and out, perform text searches and more.
从上面你应该了解到了基本功能，也就是显示网页。之所以我说webview功能强大是因为它和js的交互非常方便，很简单就可以实现。

2、webview能做什么？
①webView可以利用html做界面布局，虽然目前还比较少人这么使用，不过我相信当一些客户端需要复杂的图文（图文都是动态生成）混排的时候它肯定是个不错的选择。
②直接显示网页，这功能当然也是它最基本的功能。
③和js交互。（如果你的js基础比java基础好的话那么采用这种方式做一些复杂的处理是个不错的选择）。

3、如何使用webview？
这里直接用一个svn上取下的demo，先上demo后讲解。demo的结构图如下：

WebViewDemo.java

package com.google.android.webviewdemo;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.util.Log;
import android.webkit.JsResult;
import android.webkit.WebChromeClient;
import android.webkit.WebSettings;
import android.webkit.WebView;

/**
* Demonstrates how to embed a WebView in your activity. Also demonstrates how
* to have javascript in the WebView call into the activity, and how the activity
* can invoke javascript.
* <p>
* In this example, clicking on the android in the WebView will result in a call into
* the activities code in {@link DemoJavaScriptInterface#clickOnAndroid()}. This code
* will turn around and invoke javascript using the {@link WebView#loadUrl(String)}
* method.
* <p>
* Obviously all of this could have been accomplished without calling into the activity
* and then back into javascript, but this code is intended to show how to set up the
* code paths for this sort of communication.
*
*/
public class WebViewDemo extends Activity {

private static final String LOG_TAG = "WebViewDemo";

private WebView mWebView;

private Handler mHandler = new Handler();

@Override
public void onCreate(Bundle icicle) {
super.onCreate(icicle);
setContentView(R.layout.main);
mWebView = (WebView) findViewById(R.id.webview);

WebSettings webSettings = mWebView.getSettings();
webSettings.setSavePassword(false);
webSettings.setSaveFormData(false);
webSettings.setJavaScriptEnabled(true);
webSettings.setSupportZoom(false);

mWebView.setWebChromeClient(new MyWebChromeClient());

mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

mWebView.loadUrl("file:///android_asset/demo.html");
}

final class DemoJavaScriptInterface {

DemoJavaScriptInterface() {
}

/**
* This is not called on the UI thread. Post a runnable to invoke
* loadUrl on the UI thread.
*/
public void clickOnAndroid() {
mHandler.post(new Runnable() {
public void run() {
mWebView.loadUrl("javascript:wave()");
}
});

}
}

/**
* Provides a hook for calling "alert" from javascript. Useful for
* debugging your javascript.
*/
final class MyWebChromeClient extends WebChromeClient {
@Override
public boolean onJsAlert(WebView view, String url, String message, JsResult result) {
Log.d(LOG_TAG, message);
result.confirm();
return true;
}
}
}

demo.html

<html>
<script language="javascript">
/* This function is invoked by the activity */
function wave() {
alert("1");
document.getElementById("droid").src="android_waving.png";
alert("2");
}
</script>
<body>
<!-- Calls into the javascript interface for the activity -->
<a onClick="window.demo.clickOnAndroid()"><div style="width:80px;
margin:0px auto;
padding:10px;
text-align:center;
border:2px solid #202020;" >
<img id="droid" src="android_normal.png"/><br>
Click me!
</div></a>
</body>
</html>

main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/intro"
android:padding="4dip"
android:textSize="16sp"
/>

<WebView
android:id="@+id/webview"
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
/>

</LinearLayout>

4、如何交互？
①android如何调用js。
调用 形式：
mWebView.loadUrl("javascript:wave()");

其中wave（）是js中的一个方法，当然你可以把这个方法改成其他的方法，也就是android调用其他的方法。
②js如何调用android。
调用形式：
<a onClick="window.demo.clickOnAndroid()">

代码中的“demo”是在android中指定的调用名称，即
mWebView.addJavascriptInterface(new DemoJavaScriptInterface(), "demo");

代码中的clickOnAndroid()是“demo”对应的对象：new DemoJavaScriptInterface() 中的一个方法。
③双向交互。
当然是把前面的两种方式组合一下就可以了。

5、讲解demo。
现在你一定了解了android和js的交互了。是时候分析一些demo了，根据上面讲的你也应该比较清楚了。具体交互流程如下：
①点击图片，则在js端直接调用android上的方法clickOnAndroid()；
②clickOnAndroid()方法（利用线程）调用js的方法。
③被②调用的js直接控制html。

个人总结：利用webView的这种方式在有些时候UI布局就可以转成相应的html代码编写了，而html布局样式之类有DW这样强大的工具，而且网上很多源码，很多代码片。在UI和视觉效果上就会节省很多时间，重复发明轮子没有任何意义。

⑸ 怎样实现android应用向网页发送数据，在网页中用php代码接收所发来的数据

不知道楼主懂不懂 javascript ，会php js应该不赖哈 哈哈！
android已经给你提供了 javascript 调用接口！
我这里就不写网页程序了啊 ，懒的敲的

就是使用webview加载网页，然后android本地程序和webview网页里面的js进行交互
实力话一个WebVIew 比如对象名为：webview 调用其中的方法 setJavascritEnable(true);
1：android客户端程序 调用webview里面的js程序
webview.loadUrl("javascripot:test()");

这个时候他就会调用你网页里面javascript代码当中的test方法

2:通过网页中的javascript代码进行调用本地 android程序

mWebView.addJavascriptInterface(new Object() {

public void heiHei() {

mHandler.post(new Runnable() {

public void run() {

Toast.makeText(Test.this, "测试调用java", Toast.LENGTH_LONG).show();

}

});

}

}, "demo");
括号里面demo 就是伪造的一个dom对象的名字
然后通过 window.demo.heiHei()方法 就可以调用 本地android中代码了
如：
<div id='b'><a onclick="window.demo.clickOnAndroid()">b.c</a></div>

最后：传参我就不说了 ，相信你如果看懂以上的，基本你就可以实现你说的，传参也一样！

亲,给分儿吧！手敲的啊！

⑹ H5必知必会之与App交互

奇技指南

2018年11月26日发表的“360 AI音箱H5开发实践”一文中，曾简单提到“与Native交互”。本文将就此主题深入探讨H5与App交互的几种常见模式。

本文内容如下：

H5，在中国被专门用来指代开发内嵌于手机应用中的网页的技术，外国好像并没有这个说法。从技术上讲，H5是HTML5即Hyper Text Markup Language（超文本标记语言）第5版的简称。而HTML只是开发网页要用到的多种技术之一。除了HTML，还要用CSS设计界面，用JavaScript实现交互，甚至要用Node.js实现服务端逻辑。为什么H5会被用来笼统地指代这些技术呢？我猜一是因为它简单，二是移动端网页开发技术又恰好需要这么一个概念。

移动端网页运行在手机应用内嵌的浏览器引擎中，这个没有UI的内核容器统称WebView，即iPhone的UIWebView（iOS 2.0–12.0）、WKWebView（iOS 8.0+，macOS 10.10+）和Android的WebView。总之，WebView就是在手机应用中运行和展示网页的界面和接口（神奇的是，英文Interface，既可以翻译成“界面”也可以翻译成“接口”）。

H5与原生应用的交互都是通过原生应用中的WebView实现的。通过这个环境，H5可以调用原生应用注入其中的原生对象的方法，原生应用也可以调用H5暴露在这个环境中的JavaScript对象的方法，从而实现指令与数据的传输。

比如，在Android应用中，WebView类有一个公有方法addJavascriptInterface，签名为：

调用这个方法可以向WebView中以指定的名称name注入指定的Java对象object。这样，WebView中的JavaScript就可以通过name调用object的方法。比如：

在iOS或macOS中，需要通过创建WKWebView类的实例在应用中嵌入网页，交互过程类似。

所谓基础接口，就是首先要规定原生应用和JS分别在WebView里注入/暴露一个什么对象：

并约定在这两个对象上分别可以调用什么方法：

顾名思义，NativeBridge.callNative是由JS调用向Native传递指令或数据的方法，而JSBridge.callJS则是由Native调用向JS传递指令或数据的方法。方法签名中的参数含义如下：

基础接口只有两个对象和两个方法，JS与App间的互操作则通过action和params来扩展和定义。

对于JS而言，虽然这里只定义了一个对象一个方法，但实践中，可以把action对应方法的实现附加到JSBridge上，只要把callJS实现为一个分发方法即可，比如：

这样，所有对callJS的调用，都会转化成对JSBridge上相应action方法的调用，优点是只需一行代码。

另一种实现方式是通过switch...case语句实现调用分发，比如:

这样实现的优点是所有方法一目了然，当然同样也是把所有相关接口都附加到同一个JSBridge对象上。

以上两种实现模式各有利弊。

由JS发起的单向调用App的操作，主要涉及加载URL和切换到原生界面，可对应如下action：

loadUrl调用的参考协议如下：

这里NativeBridge是App的原生对象，其callNative方法被调用时，会收到一个对象（字典/映射）参数。根据这个参数的action属性的值，App可知需要执行的操作是加载URL。于是再取得params属性中的url，发送请求即可。

loadContent调用的参考协议如下：

同上，这里通过params向App传递了必要参数，App负责切换到相应的原生界面。

由App发起的单向调用JS的操作，主要涉及用户点击后退按钮（<），可对应如下action：

can_back调用的参考协议如下：

此调用返回的值示例如下：

顾名思义，can_back用于App询问JS：在返回上一级界面前，是否弹窗提示用户？

返回值中的can如果是true，则直接返回，不提示；如果是false，则弹出一个确认框，请用户确认。另一个值target是与App约定的返回目标，比如prev表示返回上一级，top表示返回顶级，等等。

双向调用是JS先调用App，然后App在完成操作后再调用JS，双向通常都需要传递数据。双向调用主要涉及JS调用App原生组件和用户点击右上角按钮，可对应如下action：

loadComponent的参考协议如下：

在这个例子中，涉及JS调用App显示其实现的城市选择组件：type: 'location'，用户选择完城市之后，App再调用set_location，将用户选择的城市名称传给JS：

JS根据拿到的值更新界面，完成一次双向调用。另一个例子是JS调用原生的日期选择组件，与此类似。

为什么叫displayNextButton？因为根据具体业务场景，可能存在如下三种情况：

displayNextButton协议的参考实现如下：

以上代码示例表明，JS调用App，告诉App显示“下一步”按钮，但是要禁用变灰，因为enable: false。如果传递的是enable: true，那么用户就可以点击“下一步”按钮了。点击之后，App再调用JS的save_form。最后，如果不想显示按钮，可以传递name: ''。

下面重点说一下用户点击“下一步”按钮，App调用save_form的场景。此时也分两种情况：

如果是JS通过App保存数据——可能因为App端实现了数据写入必需的加密机制——那么，JS可以在App调用save_form时将约定好的数据返回给App，由App去保存数据。

如果是JS直接保存数据，比如通过Ajax，那么在保存完数据之后，则还需要调用前面所说的App暴露的loadUrl或loadComponent方法，以告知App切换界面。当然这种情况下会出现第三次调用，但仍然属于双向调用。

本文介绍了JS与App交互的几种模式，而且只讨论了JS端的实现。在开发实践中，团队各端总会面临哪一端主导的问题。本文展示的参考实现就是H5端主导的一种实现形式。H5主导的特点是把主要业务逻辑都封装到WebView中，App主要协同配合，而优点是业务逻辑的变更不会蔓延到App。毕竟相对于H5，App的安装部署模式会造成多版本共存问题，需要尽可能控制新版本。假如由App端主导，将逻辑封装在App端，势必造成版本不受控，给整个项目或产品埋下隐患。

当然，事无绝对。具体情况还要具体分析。而且，哪方主导有时候也取决多方面因素。实践中还是要因人、因时、因势制宜。