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的引入也可以参考着来。