企业微信PC版应用跳转到默认浏览器，避坑指南，欢迎补充（Vue项目版）。。。

原创

已于 2024-08-16 11:50:30 修改 · 7.6k 阅读

于 2024-07-20 14:18:19 首次发布

引子

关于企业微信PC版应用跳转到默认浏览器，我之前写过一篇文章：企业微信PC版应用跳转到默认浏览器，避坑指南，欢迎补充。。。

以前的文章里用的前后端一体的Jsp项目，这次我使用的是前后端分离的Vue项目，这两者实现的方式差异较大，我在开发的过程中也碰到了不少问题，所以我再写一篇文章作为补充。

官方文档推荐是使用最新的WECOM-JSSDK，我刚开始也是用WECOM-JSSDK，但是碰到莫名其妙的问题，无法实现跳转（文章中有说明），最后不了了之。

后来我就采用了JS-SDK，最后成功实现跳转功能。

使用JS-SDK的前提是通过config接口注入权限验证配置。

在这里插入图片描述

然后调用openDefaultBrowser方法打开默认浏览器。

在这里插入图片描述

具体请查看企微微信客户端API文档。

实现思路

由于Vue项目采用前后端分离架构，客户端和服务器端通常部署在不同的服务器上。在企业微信上跳转到默认浏览器的时候，如何把服务器的token传递到客户端浏览器是个难点。

我想出来的实现思路是这样的：

在跳转到默认浏览器之前，先通过企业微信的OAuth2方式，获取服务器端的登录token
在跳转的URL后面加上token参数，传递到用默认浏览器打开的项目页面（storeTonken.vue）中
在项目页面（storeTonken.vue）中提取URL中token，保存到Cookie中，然后跳转到项目首页，实现单点登录

整体的流程图如下：
在这里插入图片描述

操作步骤

引入JS文件

首先在vue项目中的index.html中引入JS文件。

在这里插入图片描述

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

新建vue文件

然后在views文件夹下，新建一个文件夹“openDefaultBrowser”（名字任意取），然后新建一个index.vue和storeTonken.vue文件。

在这里插入图片描述
index.vue页面是跳转到默认浏览器用的，storeTonken.vue文件是保存token并跳转到首页用的。

配置白名单

然后在router中把这两个路径加入到白名单中，不用登录也能访问：

在这里插入图片描述

我这个项目还需要在permission.js中添加入白名单：

在这里插入图片描述

每个项目的架构不一样，请你根据实际情况配置。

需要注意的问题

设置可信域名

如应用页面需使用微信JS-SDK、跳转小程序等, 需完成域名归属验证。

就是在你的域名后面加上企业微信提供的这个 WW_verify***yo0iITyAeb6.txt 文件的URL，能够直接访问txt文件里面的内容。

如果你的域名是 abc.com，在浏览器中输入 http://abc.com/WW_verify***yo0iITyAeb6.txt，确保可以显示txt里面的内容。

在这里插入图片描述
那如何在服务器上设置呢？

我以nginx为例说一下步骤：

1、下载WW_verify***yo0iITyAeb6.txt 文件

2、把txt文件复制到服务器上，比如目录：/usr/local/etc 下

在这里插入图片描述
3、在nginx.conf文件中添加 location = /WW_verify***yo0iITyAeb6.txt，记得把/usr/local/etc改成你自己的路径。

location = /WW_verify***yo0iITyAeb6.txt {
   
   
           alias /usr/local/etc/WW_verify***yo0iITyAeb6.txt;
           try_files $uri =404;
       }

4、重启nginx

最后我们来看下效果：

在这里插入图片描述
然后，点击验证，就可以验证通过了：

在这里插入图片描述

设置企业可信IP

记得要设置企业可信IP，不然会报：not allow to access from your ip 的错误。

在这里插入图片描述

Connection reset 问题

我把项目发布到正式服务器后，结果后台报 Connection reset 的异常：

在这里插入图片描述
这个应该是网络连接的问题，我在服务器上运行：curl https://qyapi.weixin.qq.com

果然报错了：

在这里插入图片描述
看来真的是网络问题。

后来发现是服务器的外网权限没开~

WECOM-JSSDK 报错：not be accessed on strict mode

我在使用WECOM-JSSDK的时候，前端会报错：not be accessed on strict mode，这个问题，后来一直没有解决。

不知道是不是这个错误导致浏览器跳转失败。

在这里插入图片描述

TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode functions or the arguments objects for calls to them
    at Arguments.invokeGetter (<anonymous>:3:28)
    at Object._getConfigSignature (http://localhost:9528/afterSale/app.js:24558:11)
    at Object.getConfigSignature (http://localhost:9528/afterSale/app.js:24538:38)
    at http://localhost:9528/afterSale/app.js:2714:49
    at step (http://localhost:9528/afterSale/app.js:2133:23)
    at Object.next (http://localhost:9528/afterSale/app.js:2074:20)
    at asyncGeneratorStep (http://localhost:9528/afterSale/app.js:2046:28)
    at _next (http://localhost:9528/afterSale/app.js:2061:17)
    at http://localhost:9528/afterSale/app.js:2066:13
    at new Promise (<anonymous>)

openDefaultBrowser\index.vue 使用WECOM-JSSDK的代码的版本：

<template>
  <div>
    正在跳转到默认浏览器...
  </div>
</template>

<script>
import {
   
    getWeiXinPermissionsValidationConfig } from '@/api/openDefaultBrowser'
import * as ww from '@wecom/jssdk'

export default {
   
   
  data() {
   
   
    return {
   
   
      paramObject: {
   
   
        url: '',
        type: ''
      }
    }
  },
  created() {
   
   
    this.getConfig()
  },
  methods: {
   
   
    // 获取相关验证配置信息
    getConfig() {
   
   
      // 该paramUrl 为你使用微信sdk-js相关接口的页面地址 该地址需要配置到应用后台的可信域名下
      const paramUrl = window.location.href.split('#')[0]
      this.paramObject.url = paramUrl
      this.companyConfigInit()
    },

    // 企业验证配置
    companyConfigInit() {
   
   
      const that = this
      getWeiXinPermissionsValidationConfig(that.paramObject).then(response => {
   
   
        ww.register({
   
   
          appId: response.data.corpid, // 必填，企业微信的corpID
          agentId: response.data.agentid, // 必填，当前应用的AgentID
          jsApiList: ['openDefaultBrowser'], // 你要调用的sdk接口必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
          getConfigSignature, // 必填，根据url生成企业签名的回调函数
          getAgentConfigSignature // 必填，根据url生成应用签名的回调函数
        })

        async function getConfigSignature() {
   
   
          console.log('calling getConfigSignature')
          // 根据 url 生成应用签名，生成方法同上，但需要使用应用登录授权的 jsapi_ticket
          return {
   
    timestamp: response.data.timestamp, nonceStr: response.data.nonceStr, signature: response.data.signature }
        }

        async function getAgentConfigSignature() {
   
   
          console.log('calling getAgentConfigSignature')
          return {
   
    timestamp: response.data.timestamp, nonceStr: response.data.nonceStr, signature: response.data.agentSignature }
        }

        ww.openDefaultBrowser({
   
   
          // 在默认浏览器打开redirect_uri，并附加code参数；也可以直接指定要打开的url，此时不会附带上code参数。
          url: 'https://work.weixin.qq.com/',
          success(result) {
   
   
            // 成功回调，result.errMsg 固定格式为“方法名:ok”
            console.log('success:' + result)
          },
          fail(result) {
   
   
            // 失败回调，通过 result.errMsg 查看失败详情
            console.log('fail:' + result)
          },
          complete(result) {
   
   
            // 完成回调，无论调用成功还是失败，都会回调该方法
            console.log('complete:' + result)
          }
        })
      })
    }
  }
}
</script>

后来实在解决不了，我就放弃使用WECOM-JSSDK了，转而使用JS-SDK，这段代码就算留个纪念吧。

如果你知道怎么解决，请得留言告诉我，谢谢。

项目代码

前端代码

openDefaultBrowser\index.vue

<template>
  <div>
    正在跳转到默认浏览器...
  </div>
</template>

<script>
import {
   
    weiXinLogin, getWeiXinPermissionsValidationConfig } from '@/api/openDefaultBrowser'
import {
   
    setToken } from '@/utils/auth'
const wx = window.wx

export default {
   
   
  data() {
   
   
    return {
   
   
      paramObject: {
   
   
        url: ''
      },
      token: ''
    }
  },
  created() {
   
   
    // 微信登录
    this.weiXinLogin()
  },
  methods: {
   
   
    // 微信登录
    weiXinLogin() {
   
   
      const url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=***&redirect_uri=http%3A%2F%2Fabc.com%3A8890%2FweixinLogin&response_type=code&scope=snsapi_userinfo&agentid=***&state=STATE#wechat_redirect'
      weiXinLogin(url).then(response => {
   
   
        console.log(response)
        this.token = response.data.token
        setToken(response.data.token)
        // 跳转到默认浏览器
        this.getConfig()
      })
    },
    // 获取相关验证配置信息
    getConfig() {
   
   
      // 该paramUrl 为你使用微信sdk-js相关接口的页面地址 该地址需要配置到应用后台的可信域名下
      const paramUrl = window.location.href.split('#')[0]
      this.paramObject.url = paramUrl
      this.companyConfigInit()
    },

    // 企业验证配置
    companyConfigInit() {
   
   
      const that = this
      getWeiXinPermissionsValidationConfig(that.paramObject).then(response => {
   
   
        wx.config({
   
   
          beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: response.data.corpid, // 必填，企业微信的corpid，必须与当前登录的企业一致
          timestamp: response.data.timestamp, //