解决uniapp调用企业微信jssdk不生效问题

前言
最近搞了个 h5 需要调用企业微信的 jssdk
结果却怎么也调用不起来 -.-

代码结构

我的 uniapp 代码是利用uniapp官方的colorui模版结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
├── App.vue
├── Readme.md
├── api
├── colorui
├── components
├── main.js
├── manifest.json
├── pages
├── pages.json
├── static
├── unpackage
├── pluign
│   └── wxsdk.js
└── utils

挖坑过程描述

我看企微 sdk 里面官方的例子是用的script标签去进行 sdk 的引入。没有提供amd等方式引入的例子。于是把文档保存在plugin文件夹下，用import的形式进行引入。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
  import wx from "@/plugin/wxsdk.js";
  import { getJsSdk } from "@/api/wx.js";

  export default {
    onLaunch: function () {
      getJsSdk().then((res) => {
        wx.config({
          beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
          debug: true, // 开启调试模式
          appId: res.corpid, // 必填，企业微信的corpID
          // appId: constant.CORP_ID, // 必填，企业微信的corpID
          timestamp: res.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.nonceStr, // 必填，生成签名的随机串
          signature: res.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
          jsApiList: ["sendChatMessage"], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
        });
      });
      wx.ready(() => console.log("wx ready"));
      wx.error(err => console.log("wx error", err));
      // ...
    },
  };
</script>

运行后提示微信的sdk文件S.title no defined。然后看了下，发现S是undefined那我去做了个容错处理。

重新跑。结果没有跑ready方法，也没有跑error方法。然后心想是不是环境问题。换到微信开发者工具跑，没有打印日志。好吧，那我搞去企微上运行。结果也是不行。

但是我用打印wx.config是有这个方法的，证明已经引入成功了的。而且debug模式也开了。结果什么错误成功信息也没有出现。

解决办法

最后想有没有办法用script标签的方式进行引入，引入文件。

发现在manifest.json文件下的h5配置tab内有一个index.html模版路径的配置下。于是在项目根目录下添加index.html文件，并写入以下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>
    <%= htmlWebpackPlugin.options.title %>
  </title>
  <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />
  <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
</head>

<body>
  <noscript>
    <strong>Please enable JavaScript to continue.</strong>
  </noscript>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

终于可以了。

  • 官方文档地址
uniapp
#uniapp #企业微信 #jssdk #sendChatMessage
解决uniapp调用企业微信jssdk不生效问题
作者
墨陌默
发布于
2021年1月18日
许可协议