Skip to content

前端使用WebViewJavascriptBridge实现JS与iOS、Android客户端交互

  1. JS 调用 native 的 handler（JS 发起请求）
window.WebViewJavascriptBridge.callHandler(
    'handlerName',  // 调用 native 的 handler
    data,   // 传数据给 native
    function(res) {
        // 接收 native 返回的数据 res
    }
);
  1. Native 调用 JS 的方法（提供 handler 给 native）
//注册事件监听
function connectWebViewJavascriptBridge(callback) {
  // Android
  if (window.WebViewJavascriptBridge) {
    callback(WebViewJavascriptBridge)
  } else {
    document.addEventListener(
      'WebViewJavascriptBridgeReady',
      function() {
        callback(WebViewJavascriptBridge)
      },
      false
    );
  }

  // iOS
  if (window.WebViewJavascriptBridge) {
    return callback(WebViewJavascriptBridge);
  }
  if (window.WVJBCallbacks) {
    return window.WVJBCallbacks.push(callback);
  }
  window.WVJBCallbacks = [callback];
  var WVJBIframe = document.createElement('iframe');
  WVJBIframe.style.display = 'none';
  WVJBIframe.src = 'wvjbscheme://__BRIDGE_LOADED__';
  document.documentElement.appendChild(WVJBIframe);
  setTimeout(function(){
    document.documentElement.removeChild(WVJBIframe)
  }, 0);
}

connectWebViewJavascriptBridge(function(bridge) {
  // 注册一个 JavaScript Handler，native 调用时执行 H5 操作
  bridge.registerHandler("handlerName", function(data, responseCallback) {
     // 接收来自 native 的数据 data
     console.log(data);
     // 返回数据给 Native
     var res = "Response Data";
     responseCallback(res);
  });

  // Android初始化，必须
  bridge.init(function(message, responseCallback) {
     // 接收来自 native 的数据 message
     console.log(message);
     // 返回数据给 Native
     var res = "Response Data";
     responseCallback(res);
  });
});
展开 阅读全文
2018 05 14 移动web
移动设备 评论 (0)

在电脑上通过Chrome调试安卓手机app中的webview以及移动端页面

如果需要调试 iOS 设备，移步这里。

本文基于 Windows 10 操作系统，Mac OS 尚未实践

背景

如果我们开发一个移动端的网页，调试的时候我们可以在 Chrome 的 DevTools 中选择移动设备（Toggle device toolbar）。但是如果我们开发的是一个手机 app 内置的 webview 页面，或者想把网页放在真机中调试，则需要本文中的方法。

特别注意

首次调试可能要求翻墙。

展开 阅读全文
2018 05 09 移动web
JavaScript
软件 Software 评论 (0)

在电脑上调试iOS设备webview以及iOS移动端页面

本文尚未完成。

展开 阅读全文
2018 05 09 移动web
JavaScript
软件 Software
移动设备 评论 (1)

Chrome内部协议

https://www.cnblogs.com/highsea90/p/4269801.html

  1. chrome://flags
    可用来启用或者关闭某些 chrome 的体验特性
  2. chrome://dns
    该命令将显示浏览器预抓取的主机名列表
  3. chrome://downloads
    该命令同时也可以从菜单中的下载来访问，其快捷键是 Ctrl + J
  4. chrome://extensions
    该命令等同于菜单 – 工具 – 扩展
  5. chrome://bookmarks
    改名了等同于菜单-书签-书签管理器，快捷键 Ctrl+Shift+O
  6. chrome://history
    该命令可从菜单-历史直接访问，快捷键 Ctrl+H
  7. chrome://memory
    该命令将重定向到 “chrome://memory-redirect/”. 它将显示浏览器使用内存的情况，以及系统中运行的其他浏览器，包括 firefox。同时还显示浏览器进程的详细信息。
  8. chrome://net-internals
    该命令显示网络相关信息，用来捕获浏览器生成的网络事件，可导出数据，可查看DNS主机解析缓存。
    其中一个很重要的功能就是“测试”，如果你无法访问某个网址，那么可以使用 “chrome://net-internals” -> 点击“Tests” tab -> 输入网址，并点击开始测试，Chrome 将报告具体的问题所在。
  9. chrome://quota-internals
    该命令用来显示浏览器所使用磁盘空间配额的情况。
  10. chrome://sessions
    该命令用来显示当前运行的浏览器的会话信息数以及详细列表
  11. chrome://settings
    该命令可通过菜单-选项直接访问，可用来控制浏览器各项设置值
  12. chrome://sync-internals
    用来显示 chrome 的同步状态
    最后，如果你想查看 chrome 所有的命令，可使用 chrome://about/
展开 阅读全文
2018 05 08 软件 Software 评论 (0)

JavaScript需要特别注意的地方

1 转换

parseInt(0.000001)  // 0
parseInt(0.0000001)  // 1

'5' == 5  // true

2 null

typeof null  // "object"

null == undefined  // true

10 + null  // 10
10 + undefined  // NaN

3 NaN

typeof NaN  // "number"

NaN == NaN  // false

isNaN('blue')  // true

4 Boolean

false == 0  // true
true == 1  // true
true == 2  // false
undefined
展开 阅读全文
2018 04 23 前端
JavaScript 评论 (0)

小程序能力汇总

1 入口

  • 扫码或识别二维码（可以进入指定小程序指定某页面）
  • 分享到群/好友（可以进入指定小程序指定某页面）
  • 微信搜索框（搜索指定小程序，进入默认首页）
  • 微信首页下拉界面（进入最近使用过的小程序默认首页）
  • 关联公众号菜单（进入指定小程序）
  • 推送给用户的模板消息（指定小程序）
  • 同公众号的其他关联小程序（可以进入指定小程序指定某页面）
  • App（详见 与 app 交互）
  • 公众号文章底部广告位（需投放）
  • 手机QQ浏览器（可以搜索小程序，但是目前不能搜到所有的小程序）

2 基础功能

  • 录音（10分钟）、拍照、扫码、录像、播放音视频（后台播放音频），可保存图片、视频到手机
  • 获取用户头像、昵称，统一主体的不同小程序可以识别同一用户
  • 获取运动步数（最近30天）
  • 购买支付（需要认证）
  • 系统硬件接口：定位、系统信息、网络状态、罗盘、拨打电话、扫码、剪贴板、蓝牙、iBeacon、屏幕亮度、监听用户主动截屏、振动、手机联系人、NFC、WIFI

3 其他功能

  • 支持直播
  • 内嵌 H5：H5 和小程序可以相互跳转，两者可以相互通信，H5 页面中可以实现的功能可以简单的理解为与微信内置 H5 类似。
  • 同一主体的不同小程序之间可以相互跳转
  • 卡券

4 分享转发功能

  • 小程序可以转发给好友/群，不能转发到朋友圈以及其他任何渠道。
  • 可以使用右上角“…”转发，也可以在小程序页面上放置按钮转发。
  • 转发的时候可以自定义转发到聊天窗口的小程序卡片的标题、图片、描述。
  • 微信用户点击转发出去的小程序卡片，可以进入小程序中任意指定的某页面，并非必须是触发转发的页面。

5 与 app 交互

  • 从 app 分享到微信，微信用户可以直接点击分享打开小程序。
  • 从 app 分享到微信，打开小程序以后，可以通过点击小程序页面的按钮跳转到分享来源的 app。

6 其他

  • 支持小游戏开发
  • 支持快捷切换
  • 支持微信小店
  • 可以关联公众号500个
  • 支付后可以提示用户关注关联公众号
  • 支持指纹（有指纹识别的手机、以后或将开放人脸识别和声纹识别）
  • 获取用户保存的发票抬头
  • 获取微信用户在微信保存的地址信息
  • 附近的小程序，5KM 以内。
  • 关联公众号
  • 支持查看小程序新增或活跃用户的性别、年龄、地区、手机设备

7 开发

  • 可以使用小程序插件，开发者工具“代码片段”功能
  • 支持 ES6

8 官方示例小程序，可以看一下下方导航的“接口”部分。

image

展开 阅读全文
2018 04 20 前端 评论 (0)

JavaScript截取字符串slice()、substr()、substring()的区别

共同点

第二个参数都可以省略，省略以后都是截取到字符串最后。

区别

第一个参数
  • substring() 不能为负数
  • substr() 可以是负数，是负数从尾部开始计算
  • slice() 可以是负数，是负数从尾部开始计算
第二个参数
  • substring() 不能为负数，终点的位置，需要大于第一个参数
  • substr() 不能为负数，截取的长度
  • slice() 可以是负数，终点的位置，是负数从尾部开始计算
展开 阅读全文
2018 04 17 前端
JavaScript 评论 (0)

Markdown文件工具

1 手册

2 编辑器

  • 2.1 推荐：有道云笔记，多平台客户端，我正在用。

  • 2.2 马克飞象 在线编辑器，带公式和流程图，为印象笔记（Evernote）打造的Markdown编辑器

  • 2.3 DILLINGER 在线编辑器

  • 2.4 Mou Mac系统编辑器

3 格式转换

  • 3.1 WXMarkdown，微信公众号格式化工具

  • 3.2 Pandoc 提供多种格式的相互转换

  • 3.3 推荐：MDwiki，直接将markdown转为html网站，非常方便。

4 其他

码字必备：18 款优秀的 Markdown 写作工具 | 2015 年度盘点

展开 阅读全文
2018 04 13 软件 Software
素材资源 评论 (0)

Sublime Text 3 注册码（序列号）

相关资源

Sublime Text 3 注册码

—– BEGIN LICENSE —–
TwitterInc
200 User License
EA7E-890007
1D77F72E 390CDD93 4DCBA022 FAF60790
61AA12C0 A37081C5 D0316412 4584D136
94D7F7D4 95BC8C1C 527DA828 560BB037
D1EDDD8C AE7B379F 50C9D69D B35179EF
2FE898C4 8E4277A8 555CE714 E1FB0E43
D5D52613 C3D12E98 BC49967F 7652EED2
9D2D2E61 67610860 6D338B72 5CF95C69
E36B85CC 84991F19 7575D828 470A92AB
—— END LICENSE ——

—– BEGIN LICENSE SJOLZY.CN —–
Anthony Sansone
Single User License
EA7E-878563
28B9A648 42B99D8A F2E3E9E0 16DE076E
E218B3DC F3606379 C33C1526 E8B58964
B2CB3F63 BDF901BE D31424D2 082891B5
F7058694 55FA46D8 EFC11878 0868F093
B17CAFE7 63A78881 86B78E38 0F146238
BAE22DBB D4EC71A1 0EC2E701 C7F9C648
5CF29CA3 1CB14285 19A46991 E9A98676
14FD4777 2D8A0AB6 A444EE0D CA009B54
—— END LICENSE ——

—– BEGIN LICENSE SJOLZY.CN —–
Alexey Plutalov
Single User License
EA7E-860776
3DC19CC1 134CDF23 504DC871 2DE5CE55
585DC8A6 253BB0D9 637C87A2 D8D0BA85
AAE574AD BA7D6DA9 2B9773F2 324C5DEF
17830A4E FBCF9D1D 182406E9 F883EA87
E585BBA1 2538C270 E2E857C2 194283CA
7234FF9E D0392F93 1D16E021 F1914917
63909E12 203C0169 3F08FFC8 86D06EA8
73DDAEF0 AC559F30 A6A67947 B60104C6
—— END LICENSE ——

—– BEGIN LICENSE —–
J2TeaM
2 User License
EA7E-940282
45CB0D8F 09100037 7D1056EB A1DDC1A2
39C102C5 DF8D0BF0 FC3B1A94 4F2892B4
0AEE61BA 65758D3B 2EED551F A3E3478C
C1C0E04E CA4E4541 1FC1A2C1 3F5FB6DB
CFDA1551 51B05B5D 2D3C8CFE FA8B4285
051750E3 22D1422A 7AE3A8A1 3B4188AC
346372DA 37AA8ABA 6EB30E41 781BC81F
B5CA66E3 A09DBD3A 3FE85BBD 69893DBD
—— END LICENSE ——

—– BEGIN LICENSE —–
K-20
Single User License
EA7E-940129
3A099EC1 C0B5C7C5 33EBF0CF BE82FE3B
EAC2164A 4F8EC954 4E87F1E5 7E4E85D6
C5605DE6 DAB003B4 D60CA4D0 77CB1533
3C47F579 FB3E8476 EB3AA9A7 68C43CD9
8C60B563 80FE367D 8CAD14B3 54FB7A9F
4123FFC4 D63312BA 141AF702 F6BBA254
B094B9C0 FAA4B04C 06CC9AFC FD412671
82E3AEE0 0F0FAAA7 8FA773C9 383A9E18
—— END LICENSE ——

—– BEGIN LICENSE —–
Andrew Weber
Single User License
EA7E-855605
813A03DD 5E4AD9E6 6C0EEB94 BC99798F
942194A6 02396E98 E62C9979 4BB979FE
91424C9D A45400BF F6747D88 2FB88078
90F5CC94 1CDC92DC 8457107A F151657B
1D22E383 A997F016 42397640 33F41CFC
E1D0AE85 A0BBD039 0E9C8D55 E1B89D5D
5CDB7036 E56DE1C0 EFCC0840 650CD3A6
B98FC99C 8FAC73EE D2B95564 DF450523
—— END LICENSE ——

—– BEGIN LICENSE —–
Michael Barnes
Single User License
EA7E-821385
8A353C41 872A0D5C DF9B2950 AFF6F667
C458EA6D 8EA3C286 98D1D650 131A97AB
AA919AEC EF20E143 B361B1E7 4C8B7F04
B085E65E 2F5F5360 8489D422 FB8FC1AA
93F6323C FD7F7544 3F39C318 D95E6480
FCCC7561 8A4A1741 68FA4223 ADCEDE07
200C25BE DBBC4855 C4CFB774 C5EC138C
0FEC1CEF D9DCECEC D3A5DAD1 01316C36
—— END LICENSE ——
展开 阅读全文
2018 04 11 软件 Software 评论 (0)

为什么我的微信消息是倒着的？

其实我的昵称不是“费照君”，而是“?君照费”，在昵称最开始有一个特殊的符号?，这个符号是不可见的，但是可以让后面出现的所有文字都从右往左排列。

所以你在微信通讯录搜索“费照君”是搜不到的（除非你备注了），要搜“君照费”才搜得到。

下面来科普一下这个奇怪的字符：

计算机世界里面，文字是用一个个字符展示出来的，比如你现在看到的汉字，还有英文字母“a”，还有标点，还有一些你可能不常见的小众的语言文字，比如藏文“བོད་ཡིག” ，这些奇怪的文字出现会影响到文字的排版，而我昵称里面那个奇怪字符，是阿拉伯文。阿拉伯文是从右到左书写和阅读的，所以出现阿拉伯文的时候需要把整排的文字都倒过来。

现在微信已经不允许昵称里面有特殊字符了，所以应该是设置不了。

如果你需要更深的了解，可以查看：

前端历史课：那些来自洪荒时代的编码知识

如果你是专业的互联网从业人员，可以翻看：

JavaScript 有个 Unicode 的天坑

这种 Unicode 符号，让百万人中招下了假应用…

每个JavaScript开发者都该懂的Unicode

展开 阅读全文
2018 04 08 基础科学及应用 评论 (0)
▲
TOP