混合开发，原生+html5

混合开发也是一种很好的开发方式，比如这不京东618又来了，做做活动页，活动过后就换下，不用经过应用商店，方便快捷简洁。

这里记录下工作中用到的混合开发的场景：

一个专门的应用，叫订单中心，除了处理本应用的订单外，还承接三方应用，对订单数据详情进行展示，并能从中调用设备打印功能

对于数据的展示，这没什么好说的了，该页面是一个WebView就可以了

对于从html中调用设备的原生函数，就需要注意native与h5的交互了。

先上承载页面，一个activity

package com.yunnex.eshop.hybrid;

import android.content.Intent;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.webkit.WebSettings;
import android.webkit.WebView;

import com.yunnex.eshop.R;
import com.yunnex.eshop.hybrid.jsbridge.RainbowBridge;
import com.yunnex.eshop.hybrid.jsbridge.core.JsBridgeWebChromeClient;

public class OrderDetailH5Activity extends AppCompatActivity
{

   private WebView mWebView;

   @Override
   protected void onCreate(Bundle savedInstanceState)
   {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_order_detail_h5);
      mWebView = (WebView) findViewById(R.id.webview);
      WebSettings settings = mWebView.getSettings();
      settings.setJavaScriptEnabled(true);

      RainbowBridge.getInstance()
            .clazz(JsInvokeJavaScope.class)
            .inject();
      mWebView.setWebChromeClient(new JsBridgeWebChromeClient());

      //url can be from any other app or web site
      //in a word,this is a h5 ui
      Intent intent = getIntent();
      String uri = intent.getStringExtra("uri");
//    uri="file:///android_asset/test.html";
//    uri="http://m.zb25.com.cn/shebei/printInfo";
      uri="http://192.168.9.151:8080/Hybrid/functions.html";

      mWebView.loadUrl(uri);
   }
}

上面用到了RainBridge这个交互框架，关于该框架的对于交互的原理的讲解，使用，请参考

http://zhengxiaoyong.me/2016/04/20/Native%E4%B8%8EH5%E4%BA%A4%E4%BA%92%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B/

交互的协议，可简单概括为：

jsbridge://class:port/method?params //(schema://host:port/path?params)

jsBridge为固定，port自动生成不用管

class由设备端提供，也为固定值

因此h5调用native时只需关注method(方法名)与params(params是一串json字符串)

举个例子,如果h5触发设备的登录逻辑

<button

οnclick="RainbowBridge.callMethod('JsInvokeJavaScope','login',{'allowEscape':'0','userName':'yunnex','uri':'yunnex://native/login','requestCode':'8'},function(msg){alert(JSON.stringify(msg))});">

</button>

RainbowBridge为设备端提供的RainbowBridge.js文件，callMethod为对外的一级入口，固定值

第一个参数 JsInvokeJavaScope为设备端业务处理类，固定值

第四个参数为处理的回调

因此h5调用设备只需关注第二个参数，该参数即为业务方法名称login(由设备端提供),和第三个参数(业务方法参数，组装为json串，{'allowEscape':'0','userName':'yunnex','uri':'yunnex://native/login','requestCode':'8'})

业务方法参数遵循的规则如下：

参数params保留字(uri,allowEscape,requestCode)

uri:页面需跳转时指定的值

本应用内跳转allowEscape可忽略，其他应用跳转allowEscape需要指定为1

requestCode,请求码，如需要，指定

非保留字参数，前端与设备端商量一致即可(如userName)

设备端处理后若有返回值，格式为

var resultData = {

status: {

code: 0,//0成功，1失败

msg: '请求超时'//失败时候的提示，成功可为空

data: {}//数据,无数据可以为空

};

返回值会由回调函数function(msg){...}处理

uri="http://192.168.9.151:8080/Hybrid/functions.html";

这个是访问我本地服务器，function.html在webroot根目录下，内容如下

<!DOCTYPE HTML>

<html>

<head>

<title>JsBridge</title>

content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1, target-densitydpi=medium-dpi, user-scalable=no">

<style>

.entry{

-webkit-padding-start: 30px;

}

.entry li {

line-height: 29px;

margin-left: -10px;

}

.entry li div{

margin-right: 10px;

padding-left: 8px;

padding-top: 8px;

padding-bottom: 8px;

background: #222222;

color: white;

word-break: break-all;

-ms-word-wrap: break-word;

word-wrap: break-word;

line-height: 15px;

font-size: 10pt;

}

.entry li button{

margin-top: 5px;

width: 60px;

height: 35px;

color: #111111;

}

</style>

</head>

<body>

<li>

打印<br/>

<br/>

<div>

我是Js调起的打印

</div>

<button

οnclick="RainbowBridge.callMethod('JsInvokeJavaScope','print',{'orderId':'20850258804864716800'},

function(msg){alert(JSON.stringify(msg))});">

打印

</button>

</li>

<br/>

</ul>

</body>

</html>

关键代码第一行 <script src="RainbowBridge.js" type="text/javascript"></script>

关键代码第二行 οnclick="RainbowBridge.callMethod('JsInvokeJavaScope','print',{'orderId':'20850258804864716800'},

function(msg){alert(JSON.stringify(msg))});">

第一行表示该html页面引入的js文件，处理交互动作如onclick

第二行是交互动作的写法规范，参考交互协议

Rainbridge.js内容如下：

/**
 *
 * native结果数据返回格式:
 * var resultData = {
    status: {
        code: 0,//0成功，1失败
        msg: '请求超时'//失败时候的提示，成功可为空
    },
    data: {}//数据,无数据可以为空
};
 协定协议:rainbow://class:port/method?params;
 params是一串json字符串
 */
(function () {
    var doc = document;
    var win = window;
    var ua = win.navigator.userAgent;
    var JS_BRIDGE_PROTOCOL_SCHEMA = "rainbow";
    var increase = 1;
    var RainbowBridge = win.RainbowBridge || (win.RainbowBridge = {});

    var ExposeMethod = {

        callMethod: function (clazz, method, param, callback) {
            var port = PrivateMethod.generatePort();
            if (typeof callback !== 'function') {
                callback = null;
            }
            PrivateMethod.registerCallback(port, callback);
            PrivateMethod.callNativeMethod(clazz, port, method, param);
        },

        onComplete: function (port, result) {
            PrivateMethod.onNativeComplete(port, result);
        }

    };

    var PrivateMethod = {
        callbacks: {},
        registerCallback: function (port, callback) {
            if (callback) {
                PrivateMethod.callbacks[port] = callback;//callbacks.port=callback
            }
        },
        getCallback: function (port) {
            var call = {};
            if (PrivateMethod.callbacks[port]) {
                call.callback = PrivateMethod.callbacks[port];
            } else {
                call.callback = null;
            }
            return call;
        },
        unRegisterCallback: function (port) {
            if (PrivateMethod.callbacks[port]) {
                delete PrivateMethod.callbacks[port];
            }
        },
        onNativeComplete: function (port, result) {
            var resultJson = PrivateMethod.str2Json(result);
            var callback = PrivateMethod.getCallback(port).callback;
            PrivateMethod.unRegisterCallback(port);
            if (callback) {
                //执行回调
                callback && callback(resultJson);
            }
        },
        generatePort: function () {
            return Math.floor(Math.random() * (1 << 50)) + '' + increase++;
        },
        str2Json: function (str) {
            if (str && typeof str === 'string') {
                try {
                    return JSON.parse(str);
                } catch (e) {
                    return {
                        status: {
                            code: 1,
                            msg: 'params parse error!'
                        }
                    };
                }
            } else {
                return str || {};
            }
        },
        json2Str: function (param) {
            if (param && typeof param === 'object') {
                return JSON.stringify(param);
            } else {
                return param || '';
            }
        },
        callNativeMethod: function (clazz, port, method, param) {
            if (PrivateMethod.isAndroid()) {
                var jsonStr = PrivateMethod.json2Str(param);
                var uri = JS_BRIDGE_PROTOCOL_SCHEMA + "://" + clazz + ":" + port + "/" + method + "?" + jsonStr;
                win.prompt(uri, "");
            }
        },
        isAndroid: function () {
            var tmp = ua.toLowerCase();
            var android = tmp.indexOf("android") > -1;
            return !!android;
        },
        isIos: function () {
            var tmp = ua.toLowerCase();
            var ios = tmp.indexOf("iphone") > -1;
            return !!ios;
        }
    };
    for (var index in ExposeMethod) {
        if (ExposeMethod.hasOwnProperty(index)) {
            if (!Object.prototype.hasOwnProperty.call(RainbowBridge, index)) {
                RainbowBridge[index] = ExposeMethod[index];
            }
        }
    }
})();

该文件也在webRoot根目录下。

理一下服务端执行逻辑，当触发onClick事件后,将会告知设备端调用print函数，打印的订单参数为orderId=20850258804864716800

οnclick="RainbowBridge.callMethod('JsInvokeJavaScope','print',{'orderId':'20850258804864716800'},

function(msg){alert(JSON.stringify(msg))})

设备端JsInvokeJavaScope类将会调用print函数

public static void print(WebView webView, JSONObject data, JsCallback callback)
{
   initPrintData(webView.getContext(), data);
}

private static void initPrintData(final Context context, JSONObject params)
{
   /**
    * 解析前端参数
    */
   String orderId = "";

   try
   {
      orderId = params.getString("orderId");
   }
   catch (JSONException e)
   {
      e.printStackTrace();
   }

   if (TextUtils.isEmpty(orderId))
   {
      Toast.makeText(context, "订单id为空", Toast.LENGTH_SHORT).show();
      return;
   }

   IOrderModel orderModel = new OrderModelImpl();
   orderModel.getOrderPrintData(context, orderId, new IOrderModel.OnGetOrderPrintDataListener()
   {

      @Override
      public void onSuccess(List<PrintData> printDatas)
      {
         handleData(context,printDatas);
      }

      @Override
      public void onFailed(String reason)
      {
         Toast.makeText(context, reason, Toast.LENGTH_SHORT).show();
      }
   });
}

混合开发，原生+html5

继续阅读

APP强制更新(uni-app)项目要求：解决思路：效果图：具体代码：总结

【web素材】01-10款大气的购物商城网站模板

蚪侠-远程泛目录[泛域名+泛目录+泛内页]-[代码+汉字]干扰-字体繁简切换-蜘蛛欺骗-主动推送_镜像版-V25版

vue相同路由跳转强制刷新该路由组件操作

前端获取不到后端返回自定义头信息，怎么解决获取不到跨域请求的response headers呢

magin 负值

CSS颜色搭配（超级赞的几个网站）ColorSpaceWebGradientsGRADIENT BUTTONSUigradientsCoolHue 2.0EggradientsGradientaMesh GradientCool BackgroundDuotones

HTML CSS 的鼠标悬浮，点击的样式当鼠标悬浮时：a:hover当鼠标点击链接时：a:active

推荐一些有用的网站一键分享制作网站小图标插件网站seo 相关的网站地图 api二维码相关

H5测试点

用 Canvas 编织璀璨星空图

HTML5Canvas 酷炫效果

龙珠训练营task04

jQuery练习一. 选择器练习二. DOM操作练习三. 事件练习

layui多任务上传添加进度条