android商城首页demo,FanZhengxi

Android HyBridge 开发

一、三种App开发方式对比

1. Native App

特点：UI元素、数据内容、逻辑架构都安装在手机终端，导致不可跨平台，每次版本升级都要重新打包。

缺点:无法跨平台、升级麻烦、开发成本高(指跨平台开发成本高)

优点：速度快，用户体验好。

2. Web App

定义：可理解为移动端的网站，将网页部署在服务器上，用户通过各大浏览器来访问。

缺点：页面访问速度慢、用户体验差。

优点：跨平台开发成本低(只需要一个H5开发工程师)，版本升级方便(因为网页部署在服务器上，所以只需要在服务器端升级就行。可以在任何支持H5的设备上使用)

3. HyBrid App

结合了Native App和Web App的优点，是未来发展的趋势。

二、WebView

android中用来显示网页的控件，继承自View。在App中使用WebView加载网页的3种方式：

//(1)WebView显示外部网页

webview.loadUrl(“Https://www.baidu.com”);

要设置网络权限，client

//(2)webview加载本地资源

webview.loadUrl(“file:///android_asset/test.html”);

//(3)webview显示html语句

String summary=“

Your scored 192points.”;

webview.loadData(summary,”text/html”,null);

三、WebViewSetting,WebViewClient,WebChromeClient

1. WebViewSetting

管理webview的状态，当webview被创建时会有一组默认设置，通过getter自定义设置。

//是否允许在webview中访问内容型url,默认true

setAllowContentAccess(boolean allow)

//是否允许访问文件true

setAllowFileAccess(boolean allow)

//是否允许访问app缓存,默认false

setAppCacheEnabled(boolean flag)

//设置缓存api的文件路径

setCachePath(String path)

//webview是否允许执行js脚本，默认false

setJavaScriptEnabled(boolean flag)

//webview是否允许缩放，默认true

setSuppotZoom(boolean support)

//允许缩放比例，默认false

setTextZoom(int textZoom)

2.WebViewClient的功能

帮助WebView处理各种通知、请求事件。

//用法

myWebView.setWebViewClient(new WebViewClient() {

@Override

public void onPageStarted(WebView view, String url, Bitmap favicon) {

super.onPageStarted(view, url, favicon);

ToastUtil.toastMsg(MainActivity.this, "开始网页请求了");

}

@Override

public void onPageFinished(WebView view, String url) {

super.onPageFinished(view, url);

ToastUtil.toastMsg(MainActivity.this, "网页请求成功了");

}

});

3. WebChromeClient的功能

帮助WebView处理 JavaScript 的对话框、网站图标、网站title、加载进度等。

//用法

myWebView.setWebChromeClient(new WebChromeClient() {

@Override

public void onProgressChanged(WebView view, int newProgress) {

super.onProgressChanged(view, newProgress);

// ToastUtil.toastMsg(MainActivity.this,"progress:"+newProgress);

}

@Override

public void onReceivedTitle(WebView view, String title) {

super.onReceivedTitle(view, title);

ToastUtil.toastMsg(MainActivity.this, "title:" + title);

}

});

四、HTML5和JS基础

1.HTML

(1)HTML定义

HTML指的是超文本标记语言 (Hyper Text Markup Language),它不是一种编程语言，而是一种标记语言(markup language)， 标记语言是一套标记标签(markup tag)，HTML使用标记标签来描述网页。HTML通过Web浏览器读取解释页面内容，并显示出来。

(2)HTML元素

HTML 元素指的是从开始标签(start tag)到结束标签(end tag)的所有代码。

(3)HTML属性

HTML 标签可以拥有属性，属性提供了有关 HTML 元素的更多的信息，

属性总是以名称/值对的形式出现，比如：name="value"，

属性总是在 HTML 元素的 开始标签中 规定。 例如：style 属性，它的作用是提供了一种改变所有 HTML 元素的样式的通用方法，我们能够通过使用 style 属性直接将样式添加到 HTML 元素，或者间接地在独立的样式表中(CSS 文件)进行定义。

2.HTML5

(1)HTML5定义

HTML5是最新的HTML标准，是专门为承载丰富的web内容而设计的，并且无需额外插件，拥有新的语义、图形以及多媒体元素。HTML5 提供的新元素和新的API简化了web应用程序的搭建。

HTML5 是跨平台的，被设计为在不同类型的硬件(PC、平板、手机、电视机等等)之上运行。

(2)HTML5 标准允许4中不同的属性语法

(3)HTML5 的一些的新特性

新的语义元素：, , , and

新的表单控件，比如数字、日期、时间、日历和滑块;

强大的图像支持：,

强大的多媒体支持：,;

强大的新 API，比如用本地存储取代 cookie

HTML4中部分元素被删除

3.JavaScript

(1)JavaScript的介绍

JavaScript 是脚本语言,是一种轻量级的编程语言,可插入 HTML 页面的编程代码,插入 HTML 页面后，可由所有的现代浏览器执行。

(2)JavaScript的用法

HTML 中的脚本必须位于 标签之间，脚本可被放置在 HTML 页面的 和 部分中。

//例子：

JavaScript的输出：

// 弹出警告框

window.alert()

//将内容写到 HTML 文档中

document.write()

//写入到 HTML 元素

innerHTML

//写入到浏览器的控制台

console.log()

JavaScript 字面量:

数字字面量，例：3.14 1001 123e5

字符串字面量，例：“Hello world” ‘Hello World’

表达式字面量，例：5+6

数组字面量，例：[40, 100, 1, 5, 25, 10]

对象字面量，例：{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数字面量，例：function myFunction(a, b) { return a * b;}

JavaScript变量:

使用关键字var来定义变量， 使用等号来为变量赋值，

var x, length;

JavaScript函数：

function showAlertWithParam(param){

alert(param);

}

function showAlertWithReturn(param){

var result="Return : Android call Js "+param;

return result;

}

五、JsBridg的原理和实现

1.Android调用JS的步骤

//1、设置WebView支持JavaScript

mWebView.getSettings().setJavaScriptEnabled(true);

// 2、添加JS回调接口

mWebView.addJavascriptInterface(object, “interfaceName");

// 3、WebView加载网页，外部网页要添加网络权限

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

// 4、WebView通过loadUrl方法调用JS方法

mWebView.loadUrl("javascript:actionFromNative()");

// 5、object中接收JS函数的返回值

2. JavaScript调用Android函数步骤

JavaScript调用Android函数步骤

// 1、设置WebView支持JavaScript

mWebView.getSettings().setJavaScriptEnabled(true);

// 2、添加JS回调接口(addJavascriptInterface 产生安全隐患

mWebView.addJavascriptInterface(object, “InterfaceName");

// 3、WebView加载网页，外部网页要添加网络权限

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

// 4、JavaScript通过window对象调用Android函数

Window. InterfaceName.androidFunction();

漏洞:这里向WebView注册了一个叫“InterfaceName”的对象,外部网页可以访问到“InterfaceName”对象

,通过“getClass”方法获取该对象的类型类

,再通过反射机制，得到该类的Runtime对象

，最后调用静态方法执行系统命令获取用户手机里的信息。

漏洞解决办法：

(1)Android4.2以上：用@JavascriptInterface来标记可供JS调用的方法；

@android.webkit.JavascriptInterface//标记这个方法在JavascriptInterface接口中，可以被JS调用

public void jsMethod(String paramFromJs){

ToastUtil.toastMsg(MainActivity.this,paramFromJs);

}

(2)Android4.2以下：自定义JS和Android交互方式,即构造JS和Android沟通的桥梁----JSBridge。

3.JSBridge(Android4.2以下实现JS和Android的安全通信)

JS和Android沟通的桥梁,

JSBridge的位置

(1)Android调用JS方法(ok)

WebView.loadUrl(“JavaScript:function()”)//安全

(2)JS调用Android

WebChormeClient中有三个方法：

onJsAlert(警告框)

onJsConfirm(确认框)

onJsPrompt(提示框)

这三个方法都可以从JS向Android传递消息，警告框和确认框使用频繁不宜用来搭建JsBridge，可以选择提示框来搭建JSBridge，在Android重写onJsPrompt获取获取Js向Android传递的信息，并做处理。这样就实现是JS向Android的通信。

(3)JavaScript向Android的通信协议

参照HTTP URL格式： http://host:port/path?param=value(协议名：//主机IP:端口号/参数？参数键值对。)

JSBridge的通信协议格式：

jsbridge://className:callbackAddress/methodName?jsonObj，

协议格式说明：协议名://Java暴露给js的类名：java层执行完成后的回调/方法名？json格式的参数。

//JS和Android通信完整协议格式

jsbridge://className:callbackAddress/methodName?jsonObj

//JS调用Android方法格式

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

//Android调用JS方法格式

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

六、safe-java-js-webview-bridge

1.safe-java-js-webview-bridge介绍

safe-java-js-webview-bridge是GitHub上的一个开源库,

它抛弃使用高风险的addJavascriptInterface方法，对JS和Java相互调用方法进行封装，支持异步回调，方法参数支持JS所有已知的类型，包括number、string、boolean、object、

function，实现了JS和java之间的安全通信。GitHub地址：https://github.com/pedant/safe-java-js-webview-bridge

2.safe-java-js-webview-bridge原理

先在Native端编写本地功能的Java类(如HostJsScope.java)，然后在初始化WebviewChromeClient时根据该类反射动态生成JS代码，再将动态生成的JS代码通过WebView.loadUrl触发的onProgressChanged方法注入到webview中，供前端可调用。在前端调用HostJsScope对应的接口，触发webview的onPrompt事件，进而调用本地Java

方法，如果有返回值则调用JsCallback将数据返回前端。

3.safe-java-js-webview-bridge的使用

(1)引入safe-java-js-webview-bridge

//build.gradle(project)

repositories {

mavenCentral()

}

//build.gradle(mudule)

implementation 'cn.pedant.safewebviewbridge:library:1.4'

(2)新建SafeChromeClient继承InjectedChromeClient

import cn.pedant.SafeWebViewBridge.InjectedChromeClient;

public class SafeChromeClient extends InjectedChromeClient {

public SafeChromeClient(String injectedName, Class injectedCls) {

super(injectedName, injectedCls);

}

}

(3)新建一个暴露给JS层的类，类中的方法可供JS调用，方法具有统一的格式:

public static T functionName(WebView webview,Type param1,Type param2 .....){...}

public class HostJsScope {

public static void toast(WebView webView, String message) {

Toast.makeText(webView.getContext(), "String:" + message, Toast.LENGTH_SHORT).show();

}

public static void toast(WebView webView, int message) {

Toast.makeText(webView.getContext(), "int:" + message, Toast.LENGTH_SHORT).show();

}

/**

* 给JS返回值

*/

public static String getTestString(WebView view) {

return "Android WebView";

}

(4)在MainActivity中向js注入接口HostApp

public void onSafeJsBridge(View view) {

webView.getSettings().setJavaScriptEnabled(true);

//给JS注入的接口名是HostApp,对应的类是HostJsScope

webView.setWebChromeClient(new SafeChromeClient("HostApp", HostJsScope.class));

webView.loadUrl("file:///android_asset/webstore.html");

}

(5)js调用Android方法

测试同步回调

测试异步回调

<

---------------------------------------完-------------------------------------------