企业微信_H5应用如何本地及真机调试

企业微信_H5应用如何本地及真机调试_host配置及代理相关

在这里插入图片描述

文章目录

- - - - 一、准备工作
      - 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
配置如下

127.0.0.1 tobdev.com

在这里插入图片描述

2. 创建vue项目

vue create qywx-inner-vue

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

3. 启动项目

cd qywx-inner-vue
qywx-inner-vue>npm run serve

在这里插入图片描述

3. 请求验证

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

4. 域名访问

http://tobdev.com:8080/

在这里插入图片描述

5. Invalid Host header

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

node_modules\.bin\vue-cli-service serve --host=tobdev.com

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

重新域名访问

http://tobdev.com:8080/

在这里插入图片描述

二、电脑调试

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

2.1. 设置应用主页

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

http://tobdev.com:8080/

在这里插入图片描述

2.2. PC企微登录

扫描登录即可

2.3. PC企微应用

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

2.4. 更新验证

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

<template><div id="app"><img alt="Vue logo" src="./assets/logo.png"><a href="https://gblfy.com">访问博客技术专栏</a></div>
</template><script>export default {name: 'App',
}
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>