垃圾企业微信网页开发记录.md

一、前言

本文主要记录一下在做企业微信网页开发的一些经验和遇到的问题，以防忘记。
本文使用的是vue-cli项目
文中 erp.dev.test.com为测试用的oauth可信域名，测试期间也可以创建一个新的应用配置可信域名防止与接口域名冲突

二、问题

2.1 调试

由于企业微信应用一般需要通过oauth鉴权，通过jssdk获取到用户信息、群信息等，网页需要运行在企业微信的侧边栏，于是只能通过在企业微信管理后台添加菜单指定网页链接的方式.如下图:

如果直接想要使用网页链接是不可行的，链接会使用默认浏览器打开。

方案一、【方法】本地运行项目+hosts修改域名指向【实现】本机修改能实时在企业微信中测试

要求

本方法要求后台配置的oauth可信域名与接口域名不同
接口域名配置跨域
对于vue-cli项目，配置devServer相关，如下

const { defineConfig } = require('@vue/cli-service')module.exports = defineConfig({// 由于我所在公司在生产环境下会以/h5前缀访问项目，故需要配置一下前缀publicPath: '/h5',devServer: {// 企业微信后台应用管理中应用oauth可信域名host: ' erp.dev.test.com',// 配置80无需写端口，域名才能直接映射port: 80}// 其他配置省略了，跟这个无关
})

通过ipconfig获取私网ip

配置hosts文件将可信域名映射到该ip，hosts文件中加上192.168.5.200 erp.dev.test.com
企业微信管理后台配置菜单，设置链接为http://erp.dev.test.com/h5/即可(这个根据自己的域名和访问路径配置)，注意千万别使用https

通过以上配置，即可在企业微信访问到本机的页面

优缺点
缺点: 第一次配置较为麻烦，只有在电脑配置了hosts映射之后才能访问
优点: 配置之后一劳永逸，可以支持实时修改代码调试，非常方便，通过帮公司局域网他人配置hosts映射也可访问预览

方案二、编译打包后放到正式环境测(不推荐)

一开始不懂的时候我就是使用这种方案，每次修改一点放上去过去了十来分钟，然后出错一点一点改，更可恶的是当初不懂企业微信可以开启devtools，和浏览器的devtools一样，非常方便调试，同时还能清理万恶的微信网页缓存。

清理企业微信网页缓存方法
手机端: 访问该网址:http://debugx5.qq.com,然后选择清理缓存
pc端: 开启devtools，在network中disable cache
企业微信pc端开启devtools的方法
windows鼠标放在侧边栏和聊天的中间分界线上，变成双向箭头后，按ctrl+Alt+Shift+D，弹出调试模式已开启即成功.

若要本地调试，我当时是通过在线console.log打印的日志获取到jssdk的信息然后写死在测试代码中，然后直接在本地浏览器测试后端接口相关的功能。
反正该方案极其不推荐!!!

垃圾企业微信网页开发记录.md相关推荐

企业微信三方开发(三)：网页授权登录
其他链接初识微信开发企业微信三方开发:注册企业微信服务商企业微信三方开发(一):回调验证及重要参数获取企业微信三方开发(二):获取access_token 企业微信三方开发(三):网页授权登录 ...
JustAuth 1.15.9 版发布，支持飞书、喜马拉雅、企业微信网页登录
新增修复并正式启用飞书平台的第三方登录 AuthToken 类中新增 refreshTokenExpireIn 记录 refresh token 的有效期 PR 合并 Github #101:支 ...
微信网页开发——随手笔记
一.公众号设置 1.账号详情: 公众号的头像.二维码.名称都是必须填写的,如果没有这些信息,是不能进行网页开发的. 2.功能设置 JS接口安全域名: ...
企业微信三方开发：注册企业微信服务商
其他链接初识微信开发企业微信三方开发:注册企业微信服务商企业微信三方开发(一):回调验证及重要参数获取企业微信三方开发(二):获取access_token 企业微信三方开发(三):网页授权登录 ...
企业微信三方开发(五)：扫码登录
其他链接初识微信开发企业微信三方开发:注册企业微信服务商企业微信三方开发(一):回调验证及重要参数获取企业微信三方开发(二):获取access_token 企业微信三方开发(三):网页授权登录 ...
微信网页开发配置整理
真是人越大记忆越差,断断续续做了几个微信小程序和微信h5项目,然鹅小程序的开发流程有些都忘了,最近刚做完一个微信h5网页开发的项目,所以赶紧记录下开发中需要注意的点,给自己往后回顾,同时也给第一次接入 ...
企业微信三方开发(四)：发送消息
其他链接初识微信开发企业微信三方开发:注册企业微信服务商企业微信三方开发(一):回调验证及重要参数获取企业微信三方开发(二):获取access_token 企业微信三方开发(三):网页授权登录 ...
网页版登录入口_企业微信网页版怎么登录？企业微信客户端和网页版有什么区别？...
文丨语鹦企服私域管家原创,未经授权不得转载企业微信有网页版也有客户端,很多小伙伴可能搞不清,今天语鹦企服就带你一起看看,企业微信客户端和网页版有什么区别?以及如何登录使用. ▎企业微信网页版: 与微 ...
微信网页开发wx.chooseImage多图上传、预览（已解决）
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
微信网页开发-长按二维码无法识别问题解决
微信网页开发-长按二维码无法识别问题解决参考文章: (1)微信网页开发-长按二维码无法识别问题解决 (2)https://www.cnblogs.com/Tylerrrkd/p/9153949.ht ...

垃圾企业微信网页开发记录.md

一、前言

二、问题

2.1 调试

方案一、【方法】本地运行项目+hosts修改域名指向【实现】本机修改能实时在企业微信中测试

方案二、编译打包后放到正式环境测(不推荐)

垃圾企业微信网页开发记录.md相关推荐

最新文章

热门文章

垃圾企业微信网页开发记录.md

一、 前言

二、 问题

2.1 调试

方案一、【方法】本地运行项目+hosts修改域名指向 【实现】本机修改能实时在企业微信中测试

方案二、编译打包后放到正式环境测(不推荐)

垃圾企业微信网页开发记录.md相关推荐

最新文章

热门文章

一、前言

二、问题

方案一、【方法】本地运行项目+hosts修改域名指向【实现】本机修改能实时在企业微信中测试