移动端H5开发相关

移动端适配

与原生native通信

见:JSBridge实现原理

实现类似native页面的体验

1. image标签可选中问题

imageIcon + backgroundimage实现

2. 文字可选中问题

user-select:none

H5分享

实现分享到微信、分享到微信朋友圈、复制链接分享
难点主要是要H5页的分享逻辑在不同环境下要分别处理

1. H5嵌入APP

实现方案:

  • 点击右上角分享按钮时,H5 通过 JSBridge 把分享相关数据传给 App
  • App 调用微信SDK,把分享结果回传给 H5(成功/取消/失败)

2. H5嵌入微信环境(wx webview、wx小程序)

顶部导航栏分享,转发给朋友、分享到朋友圈
实现:接入微信开放标签
H5在微信浏览器中分享好友和朋友圈

3. H5嵌入外部浏览器后分享

外部浏览器分享到微信,复制链接到聊天工具内
实现:OG协议

站外H5唤起APP

H5接入离线包

往返缓存

详细见:

字体文件分割

移动端页面真机调试