【H5】 React 微信H5调试等随记

H5系列

---

---

一、场景

项目技术栈：react + vite + ts + zarm
场景：微信H5，页面主页有不同的模块入口，进入具体模块之后，微信自带上方页面title需要显示对应的模块名称。

二、react-H5项目在微信调试

提示：手机和PC需要连接在同一网络下

1. 连接同一wif
2. PC连接手机热点

按设备情况如下：

Mac + Android

1. Mac左上角小苹果 => 系统偏好设置 => 网络，获取IP地址’192.168.xxx.xxx’：
   
2. vite.config.ts中添加host ‘192.168.xxx.xxx’

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 8080,

    // 手机调试需要配置 局域网 ip
    host: '192.168.xxx.xxx'
  }
})

3. 运行项目获取调试地址
   
4. 将调试地址发到微信中
   
5. 手机点开调试地址，即可开始使用微信H5进行调试

三、随记问题

1、修改微信页面title

//动态添加以下代码
document.title = '模块名称';

提示：PC端相同

2、移动端单击可复制

// css
user-select: all;
-webkit-user-select: all;

单击后如下

3、点击号码去拨打电话

//通过 a 标签实现
<a href="tel:对应电话号码" ref="telPhone"></a>