前言

记录微信h5 开发遇到的问题解决

设计稿要求

考虑到素材大小和再高倍屏下清晰度，h5开发通常使用两倍图，常见的设计稿尺寸为750*1650，微信环境下要预留安全距离为上方预留128px，下方预留98px(不同机型会有些许差异)，我司针对一屏界面预留的有效内容展示高度为1300px(取样于ihpone15)，弹窗高度为1108。

安全距离：上方预留的距离是h5标题展示，下方的距离是ios页面的导航条

分享相关配置

两个英文算一个中文

1.分享标题最多32个字，如果需要显示完全的最多26个字，建议分享标题16个字以内

2.分享描述最多32个字，推荐最多24个字

3.分享图标建议尺寸 200*200 需要使用网络图片

4.微信分享出去的链接不能携带code，否者会影响后续进入者的授权逻辑 5.微信分享图片必须是完整的图片地址，不能是base也不是通过require('') 加载的本地图片 6.ios 执行显性授权时，如果之前未允许过，会弹出授权弹窗，授权弹窗未关闭之前，页面不会阻塞，但是页面发起的网络请求都会失败

视频播放

视频同层播放设置,注意poster 属性再ios上不一定生效，所以一般封面都是通过代码实现。

踩坑： 1.属性设置要写全 :controls="true"，必须要写全，不然再某些安卓机型的关怀模式下无法显示全屏按钮

ruby 复制代码

<video class="video" :src="item.videoUrl" ref="video" :controls="true" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"></video>

// 属性介绍
1.webkit-playsinline：IOS 10中设置有效，视频播放时局域播放，不脱离文档流；可以保证播放界面与PC端一致
2.playsinline：IOS 微信浏览器支持小窗内播放，和上一个属性一起食用可兼容几乎所有IOS设备
3.x5-video-player-type：启用H5同层播放器,是 wechat 安卓版特性
4.x5-video-player-fullscreen：视频播放时将会进入到全屏模式，若不设置还是会新开播放器，但尺寸为原始视口大小(视频未播放前)
5.x5-video-orientation： portraint竖屏，默认值为竖屏 控制横竖屏

背景音乐自动播放

一般情况下，浏览器禁止再无用户交互情况下，自动播放音频/视频(需静音)，但再微信环境中，可以通过监听微信jssdk加载完成事件/网络变化事件等，可以实现背景音乐的自动播放，前些年是好使的，但最近项目使用中发现部分机型概率性无法自动播放，我司做了个兜底处理，使用howler，只要点击/触摸了屏幕也会播放音乐，相关代码如下：

xml 复制代码

// 引入对应文件
<script src="//res.wx.qq.com/open/js/jweixin-1.6.0.js" rel="preload"></script>

<template>
  <div class="bgm-page">
    <div class="bgm_btn" :class="{ 'animate': isPlay }" @click="bgmClick()">
      <img v-show="isPlay" src="@/assets/img/bgm_btn_on.png" alt="">
      <img v-show="!isPlay" src="@/assets/img/bgm_btn_off.png" alt="" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { Howl } from 'howler';
// 是否是播放状态
let isPlay = ref(true)
// 微信环境

// 音频控制
let sound = new Howl({
  src: [require('@/assets/mp3/bgm.mp3')],
  deep: true,
  volume: 0.9,
  autoplay: false,
  preload: true,
  loop: true
})

let playId = ref('')
function musicPlay() {
  playId.value = sound.play()
  isPlay.value = true
}

function musicPause() {
  sound.pause(playId.value)
  playId.value = ''
  isPlay.value = false
}

// 点击图标
function bgmClick() {
  if (isPlay.value) {
    musicPause()
  } else {
    musicPlay()
  }
}

onMounted(() => {
  document.addEventListener(
    'WeixinJSBridgeReady',
    () => {
        console.log('触发音乐播放事件')
        musicPlay()
    },
    false
  )
  musicPlay()
})
</script>

h5跳转小程序

使用开放标签，可以实现h5跳转小程序/app等需求

lua 复制代码

1.config配置时，选择需要开启的开放标签
     wx.config({
        openTagList: ['wx-open-launch-weapp']
    });

// 在vue.config.js 忽略开发标签
2.vue.config.js 
	chainWebpack: config => {   //设置路径的重写
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
    // 忽略开发标签
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          isCustomElement: tag => tag.startsWith('wx-')
        }
        return options
      })
  }
  
  
 3.实际使用
  <wx-open-launch-weapp class="opentag" id="launch-btn"
            username="xxxxxx"
            path="xxxx"
            @error="handleErrorFn">
            <div v-is="'script'" type='text/wxtag-template'>
              <div style="width:100%;height:49px"></div>
            </div>
 </wx-open-launch-weapp>

禁用字体放大影响

目前常见的主流适配，都会被微信设置的字体大小影响，从而引起布局错乱，可以通过禁用字体放大的方式避免。