H5系列
一、场景
项目技术栈:react + vite + ts + zarm
场景:微信H5,页面主页有不同的模块入口,进入具体模块之后,微信自带上方页面title需要显示对应的模块名称。
二、react-H5项目在微信调试
提示:手机和PC需要连接在同一网络下
- 连接同一wif
- PC连接手机热点
按设备情况如下:
Mac + Android
- Mac左上角小苹果 => 系统偏好设置 => 网络,获取IP地址’192.168.xxx.xxx’:
- vite.config.ts中添加host ‘192.168.xxx.xxx’
import { defineConfig } from 'vite';
export default defineConfig({
server: {
port: 8080,
// 手机调试需要配置 局域网 ip
host: '192.168.xxx.xxx'
}
})
- 运行项目获取调试地址
- 将调试地址发到微信中
- 手机点开调试地址,即可开始使用微信H5进行调试
三、随记问题
1、修改微信页面title
//动态添加以下代码
document.title = '模块名称';
提示:PC端相同
2、移动端单击可复制
// css
user-select: all;
-webkit-user-select: all;
单击后如下
3、点击号码去拨打电话
//通过 a 标签实现
<a href="tel:对应电话号码" ref="telPhone"></a>