androidjsbridge

A. 安卓jsbridge是全局的吗

android.app.Application类和Activity,Service一样是Android框架的一个系统组件，当Android程序启动时系统会创建一个Application对象，用来存储系统的一些信息。 Android系统自动会为每个程序运行时创建一个Application类的对象且只创建一个，所以Application可以说是单例（singleton）模式的一个类。 通常我们是不需要指定一个Application的，系统会自动帮我们创建，如果需要创建自己的Application，那也很简单！创建一个类继承Application并在AndroidManifest.xml文件中的application标签中进行注册（只需要给application标签增加name属性，并添加自己的 Application的名字即可）。 启动Application时，系统会创建一个PID，即进程ID，所有的Activity都会在此进程上运行。那么我们在Application创建的时候初始化全局变量，同一个应用的所有Activity都可以取到这些全局变量的值，换句话说，我们在某一个Activity中改变了这些全局变量的值，那么在同一个应用的其他Activity中值就会改变。Application对象的生命周期是整个程序中最长的，它的生命周期就等于这个程序的生命周期。因为它是全局的单例的，所以在不同的Activity,Service中获得的对象都是同一个对象。因此可以通过Application来进行一些，如：数据传递、数据共享和数据缓存等操作。 测试示例： 1.创建自定义的application类：package com.example.context; import android.app.Application; import android.util.Log; /** * @author Rowand jj * *整个应用的上下文对象 */ public class MyApp extends Application { private static final MyApp instance = new MyApp(); /** * 全局变量 */ private String name = "Rowandjj"; /* * android应用程序真正入口。 * 此方法在所有activity，servie，receiver组件之前调用 * */ @Override public void onCreate() { super.onCreate();//必须调用父类方法 Log.i("CREATE","application created...."); } /** * 此方法方便在那些没有context对象的类中使用 * @return MyApp实例 */ public static MyApp getApplicationInstance() { return instance; } /* setter/getter 方法 */ public String getName() { return name; } public void setName(String name) { this.name = name; } }

B. jsbridge android 匹配无效 被断开什么原因

native向js的通信协议也需要制定，一个必不可少的元素就是返回值，这个返回值和js的参数做法一样，通过json对象进行传递，该json对象中有状态码code，提示信息msg，以及返回结果result，如果code为非0，则执行过程中发生了错误，错误信息在msg中，返回结果result为null，如果执行成功，返回的json对象在result中。下面是两个例子，一个成功调用，一个调用失败。

java

{

"code":500,

"msg":"method is not exist",

"result":null

}

Java

{

"code":0,

"msg":"ok",

"result":{

"key1":"returnValue1",

"key2":"returnValue2",

"key3":{

"nestedKey":"nestedValue"

"nestedArray":["value1","value2"]

}

}

}

那么这个结果如何返回呢，native调用js暴露的方法即可，然后将js层传给native层的port一并带上，进行调用即可，调用的方式就是通过WebView.loadUrl方式来完成，如下。

Java

1

mWebView.loadUrl("javascript:JSBridge.onFinish(port,jsonObj);");

关于JsBridge.onFinish方法的实现，后面再叙述。前面所提到了native层的方法必须遵循某种规范，不然就非常不安全了。在native中，我们需要一个JSBridge统一管理这些暴露给js的类和方法，并且能实时添加，这时候就需要这么一个方法

Java

JSBridge.register("jsName",javaClass.class)

这个javaClass就是满足某种规范的类，该类中有满足规范的方法，我们规定这个类需要实现一个空接口，为什么呢?主要作用就混淆的时候不会发生错误，还有一个作用就是约束JSBridge.register方法第二个参数必须是该接口的实现类。那么我们定义这个接口

Java

publicinterfaceIBridge{

}

类规定好了，类中的方法我们还需要规定，为了调用方便，我们规定类中的方法必须是static的，这样直接根据类而不必新建对象进行调用了（还要是public的），然后该方法不具有返回值，因为返回值我们在回调中返回，既然有回调，参数列表就肯定有一个callback，除了callback，当然还有前文提到的js传来的方法调用所需的参数，是一个json对象，在java层中我们定义成JSONObject对象；方法的执行结果需要通过callback传递回去，而java执行js方法需要一个WebView对象，于是，满足某种规范的方法原型就出来了。

Java

publicstaticvoidmethodName(WebViewwebview,JSONObjectjsonObj,Callbackcallback){

}

js层除了上文说到的JSBridge.onFinish(port,jsonObj);方法用于回调，应该还有一个方法提供调用native方法的功能，该函数的原型如下

Java

JSBridge.call(className,methodName,params,callback)

在call方法中再将参数组合成形如下面这个格式的uri

Java

jsbridge://className:callbackAddress/methodName?jsonObj

然后调用window.prompt方法将uri传递过去，这时候java层就会收到这个uri，再进一步解析即可。

万事具备了，只欠如何编码了，别急，下面我们一步一步的来实现，先完成js的两个方法。新建一个文件，命名为JSBridge.js

Java

(function(win){

varhasOwnProperty=Object.prototype.hasOwnProperty;

varJSBridge=win.JSBridge||(win.JSBridge={});

varJSBRIDGE_PROTOCOL='JSBridge';

varInner={

callbacks:{},

call:function(obj,method,params,callback){

console.log(obj+" "+method+" "+params+" "+callback);

varport=Util.getPort();

console.log(port);

this.callbacks[port]=callback;

varuri=Util.getUri(obj,method,params,port);

console.log(uri);

window.prompt(uri,"");

},

onFinish:function(port,jsonObj){

varcallback=this.callbacks[port];

callback&callback(jsonObj);

deletethis.callbacks[port];

},

};

varUtil={

getPort:function(){

returnMath.floor(Math.random()*(130));

},

getUri:function(obj,method,params,port){

params=this.getParam(params);

varuri=JSBRIDGE_PROTOCOL+'://'+obj+':'+port+'/'+method+'?'+params;

returnuri;

},

getParam:function(obj){

if(obj&typeofobj==='object'){

returnJSON.stringify(obj);

}else{

returnobj||'';

}

}

};

for(varkeyinInner){

if(!hasOwnProperty.call(JSBridge,key)){

JSBridge[key]=Inner[key];

}

}

})(window);

java层有一个空接口来进行约束暴露给js的类和方法，同时也便于混淆

Java

publicinterfaceIBridge{

}

首先我们要将js传来的uri获取到，编写一个WebChromeClient子类。

Java

{

@Override

publicbooleanonJsPrompt(WebViewview,Stringurl,Stringmessage,StringdefaultValue,JsPromptResultresult){

result.confirm(JSBridge.callJava(view,message));

returntrue;

}

}

之后不要忘记了将该对象设置给WebView

Java

WebViewmWebView=(WebView)findViewById(R.id.webview);

WebSettingssettings=mWebView.getSettings();

settings.setJavaScriptEnabled(true);

mWebView.setWebChromeClient(newJSBridgeWebChromeClient());

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

核心的内容来了，就是JSBridgeWebChromeClient中调用的JSBridge类的实现。前文提到该类中有这么一个方法提供注册暴露给js的类和方法

Java

JSBridge.register("jsName",javaClass.class)

该方法的实现其实很简单，从一个Map中查找key是不是存在，不存在则反射拿到对应的Class中的所有方法，将方法是public static void 类型的，并且参数是三个参数，分别是Webview，JSONObject，Callback类型的，如果满足条件，则将所有满足条件的方法put进去，整个实现如下

Java

publicclassJSBridge{

privatestaticMap>exposedMethods=newHashMap();

publicstaticvoidregister(StringexposedName,ClassextendsIBridge>clazz){

if(!exposedMethods.containsKey(exposedName)){

try{

exposedMethods.put(exposedName,getAllMethod(clazz));

}catch(Exceptione){

e.printStackTrace();

}

}

}

(ClassinjectedCls)throwsException{

HashMapmMethodsMap=newHashMap();

Method[]methods=injectedCls.getDeclaredMethods();

for(Methodmethod:methods){

Stringname;

if(method.getModifiers()!=(Modifier.PUBLIC|Modifier.STATIC)||(name=method.getName())==null){

continue;

}

Class[]parameters=method.getParameterTypes();

if(null!=parameters&parameters.length==3){

if(parameters[0]==WebView.class&&parameters[1]==JSONObject.class&&parameters[2]==JSCallback.class){

mMethodsMap.put(name,method);

}

}

}

returnmMethodsMap;

}

}

publicstaticStringcallJava(WebViewwebView,StringuriString){

StringmethodName="";

StringclassName="";

Stringparam="{}";

Stringport="";

if(!TextUtils.isEmpty(uriString)&uriString.startsWith("JSBridge")){

Uriuri=Uri.parse(uriString);

className=uri.getHost();

param=uri.getQuery();

port=uri.getPort()+"";

Stringpath=uri.getPath();

if(!TextUtils.isEmpty(path)){

methodName=path.replace("/","");

}

}

if(exposedMethods.containsKey(className)){

HashMapString,Method>methodHashMap=exposedMethods.get(className);

if(methodHashMap!=null&methodHashMap.size()!=0&&methodHashMap.containsKey(methodName)){

Methodmethod=methodHashMap.get(methodName);

if(method!=null){

try{

method.invoke(null,webView,newJSONObject(param),newCallback(webView,port));

}catch(Exceptione){

e.printStackTrace();

}

}

}

}

returnnull;

}

publicclassCallback{

privatestaticHandlermHandler=newHandler(Looper.getMainLooper());

_JS_FORMAT="javascript:JSBridge.onFinish('%s', %s);";

privateStringmPort;

;

publicCallback(WebViewview,Stringport){

mWebViewRef=newWeakReference(view);

mPort=port;

}

publicvoidapply(JSONObjectjsonObject){

finalStringexecJs=String.format(CALLBACK_JS_FORMAT,mPort,String.valueOf(jsonObject));

if(mWebViewRef!=null&mWebViewRef.get()!=null){

mHandler.post(newRunnable(){

@Override

publicvoidrun(){

mWebViewRef.get().loadUrl(execJs);

}

});

}

}

}

{

publicstaticvoidshowToast(WebViewwebView,JSONObjectparam,finalCallbackcallback){

Stringmessage=param.optString("msg");

Toast.makeText(webView.getContext(),message,Toast.LENGTH_SHORT).show();

if(null!=callback){

try{

JSONObjectobject=newJSONObject();

object.put("key","value");

object.put("key1","value1");

callback.apply(getJSONObject(0,"ok",object));

}catch(Exceptione){

e.printStackTrace();

}

}

}

(intcode,Stringmsg,JSONObjectresult){

JSONObjectobject=newJSONObject();

try{

object.put("code",code);

object.put("msg",msg);

object.putOpt("result",result);

returnobject;

}catch(JSONExceptione){

e.printStackTrace();

}

returnnull;

}

}

你可以往该类中扔你需要的方法，但是必须是public static void且参数列表满足条件，这样才能找到该方法。

不要忘记将该类注册进去

Java

JSBridge.register("bridge",BridgeImpl.class);

进行一下简单的测试，将之前实现好的JSBridge.js文件扔到assets目录下，然后新建index.html，输入

html>

head>

metacharset="utf-8">

title>JSBridgetitle>

metaname="viewport"

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, user-scalable=no"/>

scriptsrc="file:///android_asset/JSBridge.js"type="text/javascript">script>

scripttype="text/javascript">

script>

style>

style>

head>

body>

div>

h3>JSBridge测试h3>

div>

ulclass="list">

li>

div>

buttononclick="JSBridge.call('bridge','showToast',{'msg':'Hello JSBridge'},function(res){alert(JSON.stringify(res))})">

测试showToast

button>

div>

li>

br/>

ul>

body>

html>

C. 如何写一个JsBridge

Android JsBridge 就是用来在 Android app的原生 java 代码与 javascript 代码中架设通信（调用）桥梁的辅助工具。
原文地址点这里
github点这里
有问题请联系xesam

Javascript 运行在 WebView 中，而 WebView 只是 Javascript 执行引擎与页面渲染引擎的一个包装而已。
由于这种天然的隔离效应，我们可以将这种情况与 IPC 进行类比，将 Java 与 Javascript 的每次互调都看做一次 IPC 调用。 如此一来，我们可以模仿各种已有的 IPC 方式来进行设计，比如 RPC。本文模仿 Android 的 Binder 机制来实现一个 JsBridge。

D. Android混合开发该怎么搞

Cordova是一个广泛使用的Hybrid开发框架，它提供了一套js和Native交互规范

在Cordova的SystemWebViewEngine类中可以

看到私有静态void exposeJsInterface（WebView webView，CordovaBridge桥）{
if（（Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1））{
Log.i（TAG，“自Android版本以来已禁用addJavascriptInterface（）桥接。”）;
//错误是Java Strings不会自动转换为JS字符串。
//在JS方面解决这个问题并不困难，但是更容易
使用提示桥来代替。
返回;
}
webView.addJavascriptInterface（新SystemExposedJsApi（桥）， “_cordovaNative”）;
}

因此当Android系统高于4.2时，Cordova还是使用addJavascriptInterface这种方式，因为这个方法在高版本上安全而且简单，低于4.2的时候，用什么方法呢？

答案是WebChromeClient.onJsPrompt方法

WebView可以设置一个WebChromeClient对象，它可以处理js的3个方法

onJsAlert
onJsConfirm
onJsPrompt
这3个方法分别对应js的警告，确认，提示方法，因为只有提示接收返回值，所以js调用一个Native方法后可以等待Native返回一个参数。下面是cordova.js中的一段代码：

/ **
*实现ExposedJsApi.java的API，但使用prompt（）进行通信。
*这是在JellyBean之前使用的，其中addJavascriptInterface（）被禁用。
* /
mole.exports = {
exec：function（bridgeSecret，service，action，callbackId，argsJson）{
return prompt（argsJson，'gap：'+ JSON.stringify（[bridgeSecret，service，action，callbackId]））;
}，
setNativeToJsBridgeMode：function（bridgeSecret，value）{
prompt（value，'gap_bridge_mode：'+ bridgeSecret）;
}，
retrieveJsMessages：function（bridgeSecret，fromOnlineEvent）{
return prompt（+ fromOnlineEvent，'gap_poll：'+ bridgeSecret）;
}
};

然后只要在onJsPrompt方法中使用CordovaBridge来处理js的提示调用

/ **
*告诉客户端向用户显示提示对话框。如果客户端返回true，则WebView将假定客户端将处理提示对话框并调用相应的JsPromptResult方法。
* <p />
*由于我们出于自己的目的黑客提示，我们不应该为此目的使用它们，也许我们应该破解console.log来代替！
* /
@Override
public boolean onJsPrompt（WebView视图，String origin，String message，String defaultValue，final JsPromptResult result）{
//与@JavascriptInterface桥不同，此方法始终在UI线程上调用。
String processedRet = parentEngine.bridge.promptOnJsPrompt（origin，message，defaultValue）;
if（processedRet！= null）{
result.confirm（processedRet）;
} else {
dialogsHelper.showPrompt（message，defaultValue，new CordovaDialogsHelper.Result（）{
@
Override public void gotResult（boolean success，String value）{
if（success）{
result.confirm（value）;
} else {
result.cancel（ ）;
}
}
}）;
}
return true;
}

E. ios 用jsbridge 怎么传参数给h5

纯粹的HTML5应用很少，甚至只有一个view是用WebView/UIWebView的方式越来越常见了。 基本上只要对那个view长按，然后看是不是有反应，比如手机震动（Android）、或者出现文字选择粘贴（Android/iOS），那么就是WebView！

F. android 混合开发 框架有哪些

Cordova是一个广泛使用的Hybrid开发框架，它提供了一套js和Native交互规范

在Cordova的 SystemWebViewEngine 类中可以看到

private static void exposeJsInterface(WebView webView, CordovaBridge bridge) {
if ((Build.VERSION.SDK_INT < Build.VERSION_CODES.JELLY_BEAN_MR1)) {
Log.i(TAG, "Disabled addJavascriptInterface() bridge since Android version is old.");
// Bug being that Java Strings do not get converted to JS strings automatically.
// This isn't hard to work-around on the JS side, but it's easier to just
// use the prompt bridge instead.
return;
}
webView.addJavascriptInterface(new SystemExposedJsApi(bridge), "_cordovaNative");
}

因此当Android系统高于4.2时，Cordova还是使用 addJavascriptInterface 这种方式，因为这个方法在高版本上安全而且简单，低于4.2的时候，用什么方法呢？

答案是 WebChromeClient.onJsPrompt 方法

WebView可以设置一个 WebChromeClient 对象，它可以处理js的3个方法

onJsAlert
onJsConfirm
onJsPrompt
这3个方法分别对应js的 alert 、 confirm 、 prompt 方法，因为只有 prompt 接收返回值，所以js调用一个Native方法后可以等待Native返回一个参数。下面是 cordova.js 中的一段代码：

/**
* Implements the API of ExposedJsApi.java, but uses prompt() to communicate.
* This is used pre-JellyBean, where addJavascriptInterface() is disabled.
*/
mole.exports = {
exec: function(bridgeSecret, service, action, callbackId, argsJson) {
return prompt(argsJson, 'gap:'+JSON.stringify([bridgeSecret, service, action, callbackId]));
},
setNativeToJsBridgeMode: function(bridgeSecret, value) {
prompt(value, 'gap_bridge_mode:' + bridgeSecret);
},
retrieveJsMessages: function(bridgeSecret, fromOnlineEvent) {
return prompt(+fromOnlineEvent, 'gap_poll:' + bridgeSecret);
}
};

然后只要在 onJsPrompt 方法中使用 CordovaBridge 来处理js的prompt调用

/**
* Tell the client to display a prompt dialog to the user. If the client returns true, WebView will assume that the client will handle the prompt dialog and call the appropriate JsPromptResult method.
* <p/>
* Since we are hacking prompts for our own purposes, we should not be using them for this purpose, perhaps we should hack console.log to do this instead!
*/
@Override
public boolean onJsPrompt(WebView view, String origin, String message, String defaultValue, final JsPromptResult result) {
// Unlike the @JavascriptInterface bridge, this method is always called on the UI thread.
String handledRet = parentEngine.bridge.promptOnJsPrompt(origin, message, defaultValue);
if (handledRet != null) {
result.confirm(handledRet);
} else {
dialogsHelper.showPrompt(message, defaultValue, new CordovaDialogsHelper.Result() {
@Override
public void gotResult(boolean success, String value) {
if (success) {
result.confirm(value);
} else {
result.cancel();
}
}
});
}
return true;
}

G. android token 超时，异步回调怎么实现会比较优雅

PhoneGap的js回调有几种实现方式。其中一种是ajax。
我们先来看一下js端相关代码：

// file: lib/android/plugin/android/callback.js
define("cordova/plugin/android/callback", function(require, exports, mole) {

var port = null,
token = null,
xmlhttp;

function startXhr() {
// cordova/exec depends on this mole, so we can't require cordova/exec on the mole level.
var exec = require('cordova/exec'),
xmlhttp = new XMLHttpRequest();

// Callback function when XMLHttpRequest is ready
xmlhttp.onreadystatechange=function(){
if (!xmlhttp) {
return;
}
if (xmlhttp.readyState === 4){
// If callback has JavaScript statement to execute
if (xmlhttp.status === 200) {

// Need to url decode the response
var msg = decodeURIComponent(xmlhttp.responseText);
setTimeout(startXhr, 1);
exec.processMessages(msg);
}

// If callback ping (used to keep XHR request from timing out)
else if (xmlhttp.status === 404) {
setTimeout(startXhr, 10);
}

// 0 == Page is unloading.
// 400 == Bad request.
// 403 == invalid token.
// 503 == server stopped.
else {
console.log("JSCallback Error: Request failed with status " + xmlhttp.status);
exec.setNativeToJsBridgeMode(exec.nativeToJsModes.POLLING);
}
}
};

if (port === null) {
port = prompt("getPort", "gap_callbackServer:");
}
if (token === null) {
token = prompt("getToken", "gap_callbackServer:");
}
xmlhttp.open("GET", "http://127.0.0.1:"+port+"/"+token , true);
xmlhttp.send();
}

mole.exports = {
start: function() {
startXhr();
},

stop: function() {
if (xmlhttp) {
var tmp = xmlhttp;
xmlhttp = null;
tmp.abort();
}
},

isAvailable: function() {
return ("true" != prompt("usePolling", "gap_callbackServer:"));
}
};

});

主要的处理是startXhr函数。它向java的server端发起了ajax请求，在onreadystatechange这个回调函数中等待server端返回结果。如果server端返回的结果正确，则再通过setTimeout(startXhr, 1)函数，1豪秒后再重新向server端发起ajax请求。如果从server返回的结果状态是404，则每隔10豪秒，重新向server端发起ajax请求。
接下来看看server端是如何处理的。server端的处理代码是CallbackServer.java中的run()方法中。
先看server端的源码：
它通过serverSocket来模拟http的server端。其中，jsMessageQueue中是从java端发送的js消息，serverSocket在接收到客户端（js端）的请求后，会将jsMessageQueue中的js代码发送到客户端（js端）。

/**
* Start running the server.
* This is called automatically when the server thread is started.
*/
public void run() {

// Start server
try {
this.active = true;
String request;
waitSocket = new ServerSocket(0);
this.port = waitSocket.getLocalPort();
//Log.d(LOG_TAG, "CallbackServer -- using port " +this.port);
this.token = java.util.UUID.randomUUID().toString();
//Log.d(LOG_TAG, "CallbackServer -- using token "+this.token);

while (this.active) {
//Log.d(LOG_TAG, "CallbackServer: Waiting for data on socket");
Socket connection = waitSocket.accept();
BufferedReader xhrReader = new BufferedReader(new InputStreamReader(connection.getInputStream()), 40);
DataOutputStream output = new DataOutputStream(connection.getOutputStream());
request = xhrReader.readLine();
String response = "";
//Log.d(LOG_TAG, "CallbackServerRequest="+request);
if (this.active && (request != null)) {
if (request.contains("GET")) {

// Get requested file
String[] requestParts = request.split(" ");

// Must have security token
if ((requestParts.length == 3) && (requestParts[1].substring(1).equals(this.token))) {
//Log.d(LOG_TAG, "CallbackServer -- Processing GET request");
String payload = null;

// Wait until there is some data to send, or send empty data every 10 sec
// to prevent XHR timeout on the client
while (this.active) {
if (jsMessageQueue != null) {
payload = jsMessageQueue.popAndEncode();
if (payload != null) {
break;
}
}
synchronized (this) {
try {
this.wait(10000); // prevent timeout from happening
//Log.d(LOG_TAG, "CallbackServer>>> break <<<");
break;
} catch (Exception e) {
}
}
}

// If server is still running
if (this.active) {

// If no data, then send 404 back to client before it times out
if (payload == null) {
//Log.d(LOG_TAG, "CallbackServer -- sending data 0");
response = "HTTP/1.1 404 NO DATA\r\n\r\n "; // need to send content otherwise some Android devices fail, so send space
}
else {
//Log.d(LOG_TAG, "CallbackServer -- sending item");
response = "HTTP/1.1 200 OK\r\n\r\n";
response += encode(payload, "UTF-8");
}
}
else {
response = "HTTP/1.1 503 Service Unavailable\r\n\r\n ";
}
}
else {
response = "HTTP/1.1 403 Forbidden\r\n\r\n ";
}
}
else {
response = "HTTP/1.1 400 Bad Request\r\n\r\n ";
}
//Log.d(LOG_TAG, "CallbackServer: response="+response);
//Log.d(LOG_TAG, "CallbackServer: closing output");
output.writeBytes(response);
output.flush();
}
output.close();
xhrReader.close();
}
} catch (IOException e) {
e.printStackTrace();
}
this.active = false;
//Log.d(LOG_TAG, "CallbackServer.startServer() - EXIT");
}

H. 如何写一个JsBridge-android高心星的私塾

跟web端的人商量好就行。通过webview的url来做交互

I. AlipayJSBridge call参数

AlipayJSBridge call参数如下
content:type，类型:string，描述:文字内容，必选：Y，默认值:‘’，版本:8.0；delay:int，延迟多少毫秒后显示；如果在此时间之前调用了hideLoading, 则不会再显示，autoHide：bool:默认情况下容器会在pageFinish的后会主动隐藏菊花，默认true, 传入false，关掉自动隐藏(only android)。
AlipayJSBridge是支付宝客户端通过bridge机制，允许前端H5页面通过特定的JS方法AlipayJSBridge不需要任何的引用，是支付宝在window.load后直接存在的。

J. 移动前端行业压力大不大

压力挺大的，学的东西很多。
先来说一些基础的知识1、布局rem，vw，vh，em等2、touch、click事件移动端不在是鼠标事件，改为touch事件。click事件在移动端有300ms的延迟，可以用fastclick解决。手势问题可以用hammer.js解决。3、兼容性移动端机器比PC端复杂的多，而且国内基于Android分裂出许多分支。低版本IOS flex布局有问题，不支持webp。低版本Andriod，不支持fetch，不支持ES6特性。解决办法用babel-ployfill和系统区分，IOS不下发webp。4、jsBridgejsBridge有点像桥接模式，建立起前端和客户端的通信。jsBridge的原理是什么，可以查看这篇文章。成楠Peter：hybird App原理20 赞同 · 2 评论文章5、字体移动端不像PC端用微软雅黑或者使用苹果自带字体就行。又因为字体包太大，不能通过网络下载，所以字体的选择就很总要，并且在英文字体和中文字体间差异很多，经常会出一些诡异的bug。在前端工程化中使用特殊字体7 赞同 · 2 评论文章6、前端框架性能不再像PC端一样，不用关心react的性能问题了。必须在shouldUpdateComponent拦截某些渲染，否则性能将收到严重的影响。所以对开发者编写的代码的要求更高。7、webview的机制比如为什么回退到上一个页面，页面不会自动刷新（与PC浏览器的机制不一样），为什么这样设计。