企业微信 H5应用电脑/手机调试_Gblfy_Blog-CSDN博客

      最后更新：2022-01-11 21:11

      文章目录

              • 一、准备工作
                • 1. 下载SwitchHosts
                • 2. 创建vue项目
                • 3. 启动项目
                • 3. 请求验证
                • 4. 域名访问
                • 5. Invalid Host header
              • 二、电脑调试
                • 2.1. 设置应用主页
                • 2.2. PC企微登录
                • 2.3. PC企微应用
                • 2.4. 更新验证
                • 2.5. 跳转页面
              • 三、手机调试
                • 3.1. 代理软件
                • 3.2. 安装，启动
                • 3.3. 连接无线网
                • 3.4. 代理端口
                • 3.5. 手机连接无线网
                • 3.6. 设置代理
                • 3.7. 代理允许
                • 3.8. 手机企微登录
                • 3.9. 效果图
                • 3.10. 代理监控
      一、准备工作
      1. 下载SwitchHosts

      https://blog.csdn.net/weixin_40816738/article/details/119602810
      配置如下

      在这里插入图片描述

      2. 创建vue项目

      在命令行执行，默认即可，直接按回车，快速创建项目
      在这里插入图片描述

      3. 启动项目

      在这里插入图片描述

      3. 请求验证

      访问： http://localhost:8080/
      在这里插入图片描述

      4. 域名访问

      http://tobdev.com:8080/

      在这里插入图片描述

      5. Invalid Host header

      出现Invalid Host header
      解决方案
      停止服务ctrl+c，重新启动
      在根目录下执行

      参考文档： https://cli.vuejs.org/zh/guide/cli-service.html#vue-cli-service-serve
      在这里插入图片描述

      重新域名访问

      在这里插入图片描述

      二、电脑调试

      企业微信配置H5
      下面只写关键步骤，详情参考 企业微信自建应用连接H5

      2.1. 设置应用主页

      这里演示采用应用主页效果模式进行演示
      在这里插入图片描述

      在这里插入图片描述

      2.2. PC企微登录

      扫描登录即可

      2.3. PC企微应用

      点击自建应用
      在这里插入图片描述
      在这里插入图片描述

      2.4. 更新验证

      为了演示从企业微信应用访问的是咱们的H5项目，下面修改主页信息
      在src/App.vue文件中的内容替换如下

      在这里插入图片描述

      2.5. 跳转页面

      点击跳转页面
      在这里插入图片描述

      三、手机调试

      手机电脑需要连接同一个无线网或者局域网

      3.1. 代理软件

      下载代理软件
      charles: https://www.charlesproxy.com/download/
      在这里插入图片描述

      3.2. 安装，启动

      一路下一步
      启动charles
      在这里插入图片描述

      3.3. 连接无线网

      电脑连接无线wifi，Tenda_498F2B 2
      在这里插入图片描述

      3.4. 代理端口

      查看代理端口，手机设置代理用
      在这里插入图片描述
      在这里插入图片描述

      3.5. 手机连接无线网

      手机连接无线wifi，Tenda_498F2B 2
      配置代理

      在这里插入图片描述

      在这里插入图片描述

      3.6. 设置代理

      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

      手机点击保存

      3.7. 代理允许

      代理软件点击允许

      在这里插入图片描述

      3.8. 手机企微登录

      点击工作台-点击-自建应用
      在这里插入图片描述

      3.9. 效果图

      在这里插入图片描述

      3.10. 代理监控

      在这里插入图片描述

      本文由 在线网速测试 整理编辑，转载请注明出处。

          热门文章

          文章分类