企业微信h5开发笔记

type

Post

status

Published

date

Oct 27, 2022

slug

qi-ye-wx-h5-fword

summary

记录企业微信 h5 开发中遇到的一些坑和常用的小抄。

wx-js-sdk 问题

android 机器上 h5 自动注入 wx 失败

报错: weixin://preInjectJSBridge/fail

解决: 自己引入js-sdk 包。

wx.previewFile 无法预览文件

调用 wx.previewFile 进入页面，只有个点击下载，没有自动打开文件。

原因：如果传入了name，这个name应该带上文件后缀，比如 xxx.doc


wx.previewFile({
    url: '', // 需要预览文件的地址(必填，可以使用相对路径)
    name: '', // 需要预览文件的文件名(不填的话取url的最后部分)
    size: 1048576 // 需要预览文件的字节大小(必填)
});

ios 从外部页面返回后，注册的截屏事件不再触发

原因未知，这里强制刷新页面。


let isHide = false
window.onpageshow = e => {
  if (e.persisted && isHide) {
    location.reload()
  }
  isHide = false
}

window.onpagehide = () => {
  isHide = true
}

webview 兼容问题

不支持十六进制带alpha透明度的color

问题: 所有 #fafafafa 格式的都变成了默认颜色（或继承颜色）。

解决: 使用 rgba 或其它带 a 的格式，vite 里可以通过配置 build.cssTarget: 'chrome61' 来解决（参考 vite#build.cssTarget）

document.documentElement.scrollTop 始终为 0

部分系统无法需要使用 document.body.scrollTop 来兼容。

页面返回时出现空白区块，滚动后又消失

解决：进入页面后通过程序触发页面滚动，比如设置回到页顶 document.documentElement.scrollTop = 0。

其它问题

input type=file 没有拍照选项

直接使用 <input type=”file” /> 在安卓机上，没有像 ios 那样出现3个选项（拍照、选择图片、选择文件），而是直接进入了文件系统（选择文件）。可以选择在安卓机器上，做特殊处理，展示一个类似ios选项的弹层，然后借助 js-sdk 的 chooseImage 来展示拍照+选择图片。

输入框定制软键盘回车键名称

使用 input 属性 enterkeyhint 来实现。


<input enterkeyhint="search" />

ios 透明渐变背景

设置 transparent 到白色渐变不生效（部分机型表现为黑色到白色渐变），需要将 transparent 替换为 rgba(0,0,0,0)。

ios input[type=file]拍照，每一次的文件名都是 image.jpg

根据业务需求去追加时间戳或其它规则修改名字。

多行文本（textarea）字数精确统计（兼容emoji）

一些 emoji 会是2倍宽（即通过 .length 得到的是2），textarea 对于回车统计也有问题，解决：


// 获取字数
export function getStringLength(str: string) {
  return [...str].length
}

// 根据 maxlength 截断字数
export function cutString(str: string, maxlength: number) {
  return [...str].slice(0, maxlength).join('')
}

// ======== vue3 中处理示例 ========
// elRef --> <textare ref >
// props --> { modelValue, maxlength }
// count 当前字数统计 
// 在 @input 及 watch props.modelValue 中调用 ajustValue
const ajustValue = (value: string) => {
  const { maxlength, modelValue } = props

  if (maxlength && getStringLength(value) > maxlength) {
    if (getStringLength(modelValue) === +maxlength) {
      value = modelValue
    } else {
      value = cutString(value, +maxlength)
    }
  }

  if (elRef.value && elRef.value.value !== value) {
    elRef.value.value = value
  }

  count.value = getStringLength(value)
  value !== props.modelValue && emit('update:modelValue', value)
}

参考：vant 组件中多行文本处理。