iOS 下 JavaScript 实现复制功能

1. 背景

最近要实现一个小需求:iOS APP下,用户点击一个按钮,系统自动复制一段文本到系统剪贴板。通过查资料发现,iOS 出于安全性的考虑,对 Clipboard API 的使用有诸多限制。但是在 iOS 10 及以上版本中,可以通过 hack 的方式来实现该功能。

2. 方案

主要参考的是 SO 上的这个答案,在 iOS 10 及以上版本中,使用复制功能有以下限制:

  1. 只能复制<input><textarea>元素中的文本;
  2. 如果包含待复制文本的元素没有包含在一个<form>中,那它的contentEditable属性必须为true
  3. 第2步中的元素同时不能是readonly
  4. 待复制文本必须是被选中状态。

要满足上述4个限制,代码中需要做到:

  1. 把待复制文本放入<input><textarea>类型的元素 A 中;
  2. 保存 A 元素的contentEditablereadonly属性,以便复制完成后恢复现场;
  3. 设置 A 元素的contentEditabletruereadonly


阅读全文 »

React Native 集成至已有 APP — 双向通信 II

今天看到 react-native 的官方 doc 上放出了最新的文档,正巧是介绍题目描述的问题,不过具体的方法还是参考这篇文档。所以可以直接去官网看文档。这里只是作为自己项目中的一个记录。

背景

承接上一篇介绍的 react-native 和已有 APP 之间的双向通信问题,本篇介绍另一个方向的通信,即:appCon -> appChild。

实现

思路是在 js 代码中订阅一个事件并绑定事件处理函数,然后在 native 代码中触发该事件。以下是在 native 中触发时间的代码

上面代码触发onOrderHelperClick事件,并且传递参数订单链接order_url。在 js 代码中相应添加对应事件订阅代码:

这样只要在 native 中执行上述代码,js 中就能捕获事件并获取参数,然后执行事件处理函数。

最后

大部分内容和思想在官方文档中都有提及,本文只是结合笔者自己项目简单记录实现思想。另,由于 react-native 的


阅读全文 »

React Native 集成至已有 APP — 双向通信 I

背景

因为之前用 react 开发了部门内部的技术分享网站,加之手上负责一个 WAP 业务模块。因为是 APP 内嵌的 h5 页面,也没有做过优化处理,所以考虑使用 react-native 重新实现一遍该模块改善体验。

经过1个月开发,产品作为独立 APP 开发完成,但经过与PM讨论,还是决定将它作为一个功能模块嵌入一个已有的 APP 中(下文简称 appCon,新的模块成为 appChild)。这就遇到几个需要考虑的点:

  • 如何将代码嵌入已有 appCon;
  • 如何实现 appCon 和 appChild 之间的双向通信。

其中双向通信有这样两个场景:

  1. appChild 中点击一个 button 会自动唤醒 appCon 中的聊天功能;
  2. appCon 中点击一个链接会自动跳转到 appChild 中的订单详情页。

本文先来实现上述第一点:appChild -> appCon 的通信。

实现

思路是在 appCon 中创建一个自定义模块,其中的方法理所当然可以调用 appCon 中其它部分的功能代码,比如唤醒聊天。然后通过 react-native 提供的方法将该模


阅读全文 »