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

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

一、准备工作
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>

在这里插入图片描述

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
配置代理

192.168.0.107

在这里插入图片描述

在这里插入图片描述

3.6. 设置代理

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

手机点击保存

3.7. 代理允许

代理软件点击允许

在这里插入图片描述

3.8. 手机企微登录

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

3.9. 效果图

在这里插入图片描述

3.10. 代理监控

在这里插入图片描述

  • 5
    点赞
  • 20
    收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页
评论 5

打赏作者

gblfy

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值