Vue项目中引入微信SDK

发表于 | 分类于 | 阅读次数

问题

  网上一搜Vue项目中怎么引入微信的JS-SDK清一色都是告诉你怎么用weixin-js-sdk这个封装，倒不是说这样不好，但毕竟不是官方，各种bug的更新同步上还是有些问题，比如截至到目前的1.4.0-test版本，就有iOS下chooseImage选择的图片无法展示的问题。但实际上微信官网放置的链接：http://res.wx.qq.com/open/js/jweixin-1.4.0.js 是解决掉了这个问题的，所以直接使用官网提供的文件会节约下来很多排查定位问题的时间。

解决

  其实直接引入也并不复杂，不过就是多一行代码……

index.html修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>store.huizutech.com</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but store.huizutech.com doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
  </body>
</html>

vue.config.js修改

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const path = require('path');
function resolve (dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  ……
  // 配置别名
  chainWebpack: (config)=>{
    config.resolve.alias
    .set('@', resolve('src'))
    .set('wx',resolve('https://res.wx.qq.com/open/js/jweixin-1.4.0.js'))
  }
  ……
}

  这样后续的用法就跟weixin-js-sdk介绍的完全一样了，类似还有其他外部js的引入也可以参考着来。