uniapp h5公众号开发如何运行到微信开发者工具

在uniapp开发H5公众号应用时，如何将项目运行到微信开发者工具中进行调试？我已经按照官方文档配置了manifest.json中的微信相关设置，但点击运行后无法自动启动微信开发者工具。需要手动导入dist/build/h5目录吗？还是需要额外配置什么参数才能实现自动调试？求具体操作步骤。

2 回复
  1. 在HBuilderX中运行项目到浏览器
  2. 复制生成的本地地址（如：http://localhost:8080）
  3. 打开微信开发者工具
  4. 新建项目 → 选择公众号网页开发
  5. 填写项目名称，粘贴复制的地址到"AppID"下方的网址栏
  6. 点击确定即可预览

要在 UniApp H5 项目中运行到微信开发者工具，请按以下步骤操作：

  1. 生成 H5 项目
    在 UniApp 项目根目录执行命令：

    npm run build:h5

    这会生成 dist/build/h5 目录，包含编译后的静态文件。

  2. 配置微信开发者工具

    • 打开微信开发者工具，选择 公众号网页开发 模式。
    • 添加项目，目录指向生成的 dist/build/h5 文件夹。
    • 填写项目名称（任意），并设置合适的本地服务端口（如 8080）。

  3. 本地服务配置（可选）
    若需热更新调试，可在 manifest.json 中配置 H5 本地服务器端口：

    "h5": {
  "devServer": {
    "port": 8080,
    "disableHostCheck": true
  }
}

    运行 npm run dev:h5 启动本地服务，再在微信工具中访问 http://localhost:8080。

  4. 注意微信权限

    • 确保公众号已配置 JS 接口安全域名（在微信公众平台设置）。
    • 部分微信 API 需在已认证的域名下才能调用。

完成以上步骤后，即可在微信开发者工具中调试公众号网页功能。

回到顶部