H5开发以及兼容问题

1. 微信分享

要实现在 H5 页面中通过自定义按钮调起微信的分享功能，你需要使用微信 JS-SDK。微信 JS-SDK 允许网页调用微信的原生分享功能，包括分享给朋友、分享到朋友圈、分享到QQ等。

以下是使用微信 JS-SDK 实现自定义分享按钮的步骤：

1. 引入微信 JS-SDK

在你的 HTML 页面中引入微信 JS-SDK：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. 配置微信 JS-SDK

在使用 JS-SDK 之前，你需要通过后端服务获取必要的配置参数，包括 appId、timestamp、nonceStr 和 signature。这些参数用于调用微信的 wx.config 方法进行配置：

wx.config({
  debug: false, // 开启调试模式
  appId: '你的公众号的appid', // 必填，公众号的唯一标识
  timestamp: '生成签名的时间戳', // 必填，生成签名的时间戳
  nonceStr: '生成签名的随机串', // 必填，生成签名的随机串
  signature: '生成的签名', // 必填，签名
  jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
});

3. 自定义分享内容

在 wx.ready 方法中，你可以设置分享给朋友和分享到朋友圈的内容：

wx.ready(function () {
  // 分享给朋友
  wx.onMenuShareAppMessage({
    title: '自定义分享标题', // 分享标题
    desc: '自定义分享描述', // 分享描述
    link: '分享链接', // 分享链接
    imgUrl: '分享图标的URL', // 分享图标
    type: 'link', // 分享类型，music、video 或 link，不填默认为 link
    dataUrl: '', // 如果 type 是 music 或 video，则要提供数据链接，默认为空
    success: function () {
      // 用户点击了分享后执行的回调函数
    }
  });

  // 分享到朋友圈
  wx.onMenuShareTimeline({
    title: '自定义分享标题', // 分享标题
    link: '分享链接', // 分享链接
    imgUrl: '分享图标的URL', // 分享图标
    success: function () {
      // 用户点击了分享后执行的回调函数
    }
  });
});

4. 绑定自定义按钮事件

在你的页面上，添加一个自定义按钮，并为其绑定点击事件。在点击事件的处理函数中，你可以调用 wx.updateAppMessageShareData 和 wx.updateTimelineShareData 方法来触发分享：

document.getElementById('my-share-button').onclick = function () {
  // 调用分享给朋友的接口
  wx.updateAppMessageShareData({
    title: '自定义分享标题',
    desc: '自定义分享描述',
    link: '分享链接',
    imgUrl: '分享图标的URL',
    success: function () {
      // 设置成功
    }
  });
};

5. 处理错误

你还可以在 wx.error 方法中处理配置失败的情况：

wx.error(function (error) {
  // 配置失败的处理
  console.log(error);
});

注意事项

微信 JS-SDK 的配置数据（appId、timestamp、nonceStr、signature）需要通过后端服务安全地生成，以避免暴露你的 appsecret。 确保你的网页是通过 HTTPS 访问的，因为微信 JS-SDK 要求页面必须是安全的 HTTPS 页面。 微信分享的链接通常需要在微信公众平台的“JS接口安全域名”中进行登记。 分享的图片链接需要是完整的 URL，不能是本地路径，并且图片需要已经在线上可访问。

通过以上步骤，你可以在 H5 页面中实现自定义分享按钮，调起微信的分享功能。记得在实际部署应用时，确保所有的配置项都是正确的，并且后端服务能够安全可靠地提供所需的签名信息。

2. 常用技巧

1. html meta属性

<!-- Android 禁止屏幕旋转 -->
<meta name="screen-orientation" content="portrait"> 
<!-- 全屏显示 -->
<meta name="full-screen" content="yes">          
<!-- UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。 -->
<meta name="browsermode" content="application">    
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait"> 
<!-- QQ强制全屏    -->
<meta name="x5-fullscreen" content="true">
<!-- QQ应用模式           -->
<meta name="x5-page-mode" content="app">

2. 1px边框 （）

那么为什么会产生这个问题呢？主要是跟一个东西有关，DPR(devicePixelRatio) 设备像素比，它是默认缩放为 100%的情况下，设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2（iPhone 8）,或者 3（iPhone 8 Plus）。拿 2 倍屏来说，设备的物理像素要实现 1 像素，而 DPR=2，所以 css 像素只能是 0.5。

.border1px{
  position: relative;
  border: none;
}
.border1px::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border: 1px solid #000; /* 设置为你想要的颜色 */
  transform-origin: 0 0;
  transform: scale(0.5);
  box-sizing: border-box;
  pointer-events: none; /* 防止伪元素影响鼠标事件 */
}

3. 清除输入框内阴影

在 iOS 上，输入框默认有内部阴影,以这样关闭：

div {
  -webkit-appearance: none;
}

4. 输入框默认字体颜色

设置 input 里面 placeholder 字体的颜色

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c7c7c7;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
  color: #c7c7c7;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c7c7c7;
}

5. 移动端click屏幕产生200-300 ms的延迟响应

移动设备上的web网页是有300ms延迟的，往往会造成按钮点击延迟甚至是点击失效。

• fastclick可以解决在手机上点击事件的300ms延迟
• zepto的touch模块，tap事件也是为了解决在click的延迟问题

6. audio 和 video 在 ios 和 andriod 中自动播放

这个不是bug，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。加入自动触发播放的代码

$('html').one('touchstart', function() {
  audio.play()
})

7. iOS 上拉边界下拉出现空白

手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。

在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

document.body.addEventListener('touchmove',function(e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false
  }
)

8. 软键盘问题

• 可以通过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded（Boolean）方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动
• true，则元素将在其所在滚动区的可视区域中居中对齐。
• false，则元素将与其所在滚动区的可视区域最近的边缘对齐。 根据可见区域最靠近元素的哪个边缘，元素的顶部将与可见区域的顶部边缘对准，或者元素的 底部边缘将与可见区域的底部边缘对准。

window.addEventListener('resize', function() {
  if (
    document.activeElement.tagName === 'INPUT' ||
    document.activeElement.tagName === 'TEXTAREA'
  ) {
    window.setTimeout(function() {
      if ('scrollIntoView' in document.activeElement) {
        document.activeElement.scrollIntoView(false)
      } else {
        document.activeElement.scrollIntoViewIfNeeded(false)
      }
    }, 0)
  }
})