wxwork和wx.qy判断企业微信小程序编译运行环境

前言

根据官方文档有两种方式可以判断:
1、方法一: 调用获取系统信息API【uni.getSystemInfoSync()】,获取environment 字段判断。

在官方文档中特别说明:在企业微信中调用此接口时,会额外返回一个 environment 字段(微信中不返回),如此字段值为 wxwork,则表示当前小程序运行在企业微信环境中。
注意:只有运行在企业微信环境中,才能调用【wx.qy】的接口。

2、方法二: 根据上面一个提示,告诉我们在企微环境中,才可以调用【wx.qy】以获取版本信息。


由于调用获取系统信息API可能存在错误:

1、企业微信小程序调用getSystemInfo获取不到environment: “wxwork”?
2、企业微信小程序模式 environment: “wxwork” 时有时无?
这两个都来自微信开放社区的问答,但是从回答中没有看到明确的答案,应该是他们通过代码片段内部解决了吧,只是没有放出来,应该是开发问题(来自微信官方的自信)。
那么根据微信官方文档,取以上两个方法综合处理,应该是没得问题的。

以下是关于在个人微信和企业微信输出的比较:

1、企业微信

wx.qy = {
    "version":{
        "updateTime":"2020.9.09 16:00:00",
        "info":"",
        "version":"1.3.7"
    },
    "isWxLoginSupport":true
}

返回企业微信API相关版本信息。

let _sysInfo = uni.getSystemInfoSync()
_sysInfo = {
    ...
    "environment":"wxwork",
    "model":"iPhone X",
}

// 其中
_sysInfo.environment = wxwork;

返回 environment 字段为 wxwork。

2、个人微信

wx.qy = undefined

无法获取到相关信息。

let _sysInfo = uni.getSystemInfoSync()
_sysInfo = {
    ...
    "model":"iPhone X",
}

// 其中
_sysInfo.environment = undefined;

没有返回 environment 字段。

3、应用

判断是否在企业微信环境中编译运行

isQiWeiCompileOperation() {
	let _sInfo = uni.getSystemInfoSync()
	if ((_sInfo.environment && 'wxwork' == _sInfo.environment) || wx.qy ) {
		return true
	} else {
		return false
	}
}


更新并存储小程序编译环境

updateCompileOperation() {
	let _sInfo = uni.getSystemInfoSync()
	if ((systemInfo.environment && 'wxwork' == systemInfo.environment) || wx.qy ) {
		state.vuex_is_qy = true
	} else {
		state.vuex_is_qy = false
	}
}
// 在小程序启动页【App.vue】调用存储
async onLaunch(options) {
	this.$store.commit('updateCompileOperation')
},
<think>嗯,用户想知道怎么用uniappVue3打包成Web小程序然后挂到企业微信上。首先,我得理清楚整个流程,分步骤来。首先,uniapp支持Vue3,这点没问题。用户可能已经创建好了项目,但需要确认他们的项目结构是否正确,比如是否用了正确的Vue3模板。 然后,打包成Web应用,应该是生成H5页面吧?这时候需要配置publicPath,可能涉及企业微信的路径问题。企业微信小程序其实是他们自己的机制,可能需要把H5部署到服务器,然后配置企业微信的应用信息,比如CorpIDAgentID这些。用户可能对如何配置这些参数不太清楚,得详细说明。 接下来,企业微信的JS-SDK接入可能是个关键点。需要引入SDK,处理权限验证,调用相关API。用户可能会遇到权限错误,或者配置不对导致无法调用接口的情况,需要提醒他们检查安全域名配置是否正确。 还有,企业微信里的路由问题,H5在小程序里可能需要使用企业微信的路由方式,比如wx.miniProgram.navigateTo,这部分需要用户在代码里做适配。用户可能不知道这点,导致页面跳转有问题。 调试也是个重要环节,需要告诉用户如何使用企业微信的调试工具浏览器开发者工具,不然他们可能不知道怎么测试排查问题。 最后,部署发布流程,用户可能需要指导如何打包H5,部署到服务器,然后在企业微信后台配置应用。可能还要提到版本更新缓存处理,避免出现缓存导致的问题。 总的来说,需要分步骤解释,从项目配置到打包,再到企业微信的接入调试,每个环节都可能有问题,得详细说明注意事项,确保用户能顺利操作。同时,要提醒用户检查依赖版本,尤其是uniapp对Vue3的支持情况,避免版本不兼容。</think>以下是将 UniApp + Vue3 项目打包成 Web 小程序并接入企业微信的完整步骤: ### 一、项目准备阶段 1. **确认项目结构** - 确保项目使用 Vue3 模板创建: ```bash vue create -p dcloudio/uni-preset-vue#vue3 my-project ``` - 检查 `manifest.json` 中 Vue 版本配置: ```json "vueVersion": "3" ``` 2. **安装企业微信 SDK** ```bash npm install weixin-qy-js-sdk --save ``` ### 二、H5 打包配置 1. **修改打包路径** ```javascript // vue.config.js module.exports = { publicPath: process.env.NODE_ENV === 'production' ? 'https://your-domain.com/h5/' : '/' } ``` 2. **执行生产构建** ```bash npm run build:h5 ``` - 生成文件位于 `/dist/build/h5` ### 三、企业微信配置 1. **后台设置** - 登录[企业微信管理后台](https://work.weixin.qq.com/) - 进入「应用管理」→ 创建/选择应用 - 配置可信域名: ``` https://your-domain.com ``` 2. **获取必要参数** - 记录以下信息备用: - CorpID:企业唯一标识 - AgentID:应用ID - Secret:应用密钥 ### 四、SDK 集成代码 ```vue <script setup> import { onMounted } from 'vue' import wx from 'weixin-qy-js-sdk' let wxConfig = { corpId: 'YOUR_CORPID', agentId: 'YOUR_AGENTID', timestamp: 0, nonceStr: '', signature: '', jsApiList: ['chooseImage', 'previewImage', 'scanQRCode'] } onMounted(async () => { // 获取签名(需对接后端API) const { data } = await axios.get('/api/get-signature') wx.config({ ...wxConfig, timestamp: data.timestamp, nonceStr: data.noncestr, signature: data.signature }) wx.ready(() => { console.log('SDK 初始化完成') }) wx.error(res => { console.error('SDK 初始化失败:', res) }) }) </script> ``` ### 五、企业微信路由适配 ```javascript // 处理页面跳转 function navigateTo(url) { if (typeof wx !== 'undefined' && wx.miniProgram) { wx.miniProgram.navigateTo({ url }) } else { window.location.href = url } } ``` ### 六、部署与调试 1. **服务器部署** - 将打包后的 H5 资源部署至配置的域名服务器 - 确保 HTTPS 证书有效 2. **调试工具使用** - 企业微信开发者工具调试 - 浏览器端调试: ```javascript // 本地开发时注入调试参数 localStorage.setItem('debug', 'true') ``` ### 七、常见问题处理 1. **签名无效错误** - 检查服务器时间是否同步 - 验证签名算法是否正确: ``` 签名算法 = sha1(排序后的jsapi_ticket、noncestr、timestamp、url) ``` 2. **白屏问题** - 检查 `publicPath` 配置 - 添加企业微信 UA 检测: ```javascript const isWeChatWork = /wxwork/i.test(navigator.userAgent) ``` 3. **API 调用限制** ```javascript // 安全调用示例 function safeWxCall(apiName, ...args) { if (typeof wx[apiName] === 'function') { wx[apiName](...args) } else { console.warn(`API ${apiName} 不可用`) } } ``` ### 八、发布流程 1. 完成测试后,在企业微信后台提交应用审核 2. 审核通过后分配可见范围 3. 用户通过企业微信工作台访问应用 **注意事项:** 1. 企业微信 H5 应用需使用 **iOS 9.0+/Android 6.0+** 及以上系统版本 2. 单页面应用需配置 `404 fallback` 到入口文件 3. 定期清理 `localStorage` 避免缓存问题 通过以上步骤,即可将 UniApp+Vue3 项目集成到企业微信环境。建议在真机环境下进行最终测试,确保所有企业微信 API 的正常调用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

瓜子三百克

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明:

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

余额充值