跳至主要內容
WebViewJavascriptBridge

最近一直在忙,今天抽空写一下 H5 和 Native 的交互

一、选择

  • 项目本身 webview 使用的是 WKWebview,其实 WKWebview 自带的 messageHandle 也可以满足此需求
  • JSContext,源自于 JavaScriptCore 框架中的东西,最后不使用此方案源于一下几点
    • 但是其中繁杂的字符串使用,让我觉的可能会由于粗心出现不可预知的错误
    • 加载时机的问题,当你重新 loadrequest 的时候,会导致 js 注入失败
    • 回调方法略复杂
  • JavaScriptBridge,最后选择此库源于以下几点
    • 使用简单,注册完毕之后设置完代理,只需要负责注册方法和调用方法
    • 回调简单,两端回调 responsecallback 包含在注册的方法中。使用 block
    • 三端通用,JavaScript 和 iOS、Android 都可以(Android 版本库
    • Ps :关于 Android 版本库,其中很多是按照 iOS 版的 JavaScriptBridge 改写的。但是其中有很多问题,尤其是各种调用时机问题,上面的链接是经过我旁边的 Android 小哥试了四五个版本之后发现的,修复了各种改写版的问题

Oragekk...大约 3 分钟iOSiOSJavaScript
通过UserAgent判断设备

通过 js 判断 moblie 端和 pc 端进而加载不同的 css 或者 js

废话不多说,上代码

<script type="text/javascript">
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
// document.writeln("您的浏览设备为:");
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {

// alert("手机浏览!");


} else {

// alert("PC浏览!");
document.write("<script type='text/javascript' size='150' alpha='0.8' zIndex='-10' src='../js/dist/ribbon.js'><\/script>");
document.write("<script type='text/javascript' color='0,188,212' opacity='0.7' zIndex='-2' count='99' src='http://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js'><\/script>");
	}
}
browserRedirect();
</script>


Oragekk...小于 1 分钟JavaScriptJavaScript前端开发
JavaScript ES6

JavaScript 有着很奇怪的命名史。

1995 年,它作为网景浏览器(Netscape Navigator)的一部分首次发布,网景给这个新语言命名为 LiveScript。一年后,为了搭上当时媒体热炒 Java 的顺风车,临时改名为了 JavaScript (当然,Java 和 JavaScript 的关系,就和雷锋和雷锋塔一样 —— 并没有什么关系)

歪果仁的笑话怎么一点都不好笑

译者注:wikipedia 的 JavaScript 词条 更详细的叙述了这段历史


Oragekk...大约 5 分钟JavaScriptJavaScript翻译
CommonJS,RequireJS,SeaJS 归纳笔记

Foreword

Here comes Module!

随着网站逐渐变成「互联网应用程序」,嵌入网页的 JavaScript 代码越来越庞大,越来越复杂。网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试……我们不得不使用软件工程的方法,来管理网页的业务逻辑。

于是,JavaScript 的模块化成为迫切需求。在 ES6 Module 来临之前,JavaScript 社区提供了强大支持,尝试在现有的运行环境下,实现模块的效果。


Catalog


Oragekk...大约 8 分钟JavaScript前端开发JavaScript