(vue中js-sdk配置)微信公众号开发

最近在开发公众号，遇到了很多坑，网上的很多搜索自己用的时候才发现到处都是雷，大家都不测试就随便发的吗？
因为要用到微信的扫码，以及获取当前位置等功能，所以就有了下面的踩坑之路

搜索-网上找到了大家引入weixin-js-sdk的教程，于是欢天喜地的install了

npm install weixin-js-sdk

后来vue文件中引入，结果引入却打印不出来

import wx from 'weixin-js-sdk'
console.log(wx)   // undefined是个什么鬼

折腾好久始终打印不出来我终于放弃了
然后我继续搜索。。。。。
终于让我找到了神奇的weixin-jsapi，然后就欢天喜地的成功了

npm install weixin-jsapi

import wx from 'weixin-jsapi
console.log(wx)  // 终于成功打印出来了

然后就有了愉快的wx.config一系列操作（推荐配置项通过后台接口拿到哦，我看不少小伙伴直接是页面写死的），代码在微信公公众平台的开发文档都有，请移步微信公众平台网页开发–js-sdk

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '******************', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['scanQRCode','getLocation'] // 必填，需要使用的JS接口列表 用了扫码，当前定位功能举例子
});

我愉快的用了里面的扫码功能以及当前定位功能，然后成功的了，就这样愉快的过了两周，直到新需求的到来。。。。。。
新加了页面分享功能，WTF？so easy，那就写吧
先查了官方文档，说是onMenuShareAppMessage（分享给朋友）等等好几个分享功能即将废用，那咱当然用推荐使用的api了，得，就用updateAppMessageShareData了，在wx.config中配置好

jsApiList: ['getLocation', 'scanQRCode', 'updateAppMessageShareData']

然后我接着就开心的去使用了

 wx.updateAppMessageShareData({
    title: '测试分享', // 分享标题
    desc: '这是一个不错的分享哦', // 分享描述
    link:'http://www.baidu.com', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587654057447&di=fc8eb02f92f4d5f5b21a2de8f25bb922&imgtype=0&src=http%3A%2F%2Fimg4.jiuxing.com%2F1845405%2Fglory%2Fnwm_orig_800%2F481baa92af58b0eb3c57ffb4d2355335.jpg', // 分享图标
    success: function () {
      // 设置成功
      console.log('分享成功')
    }
})

结果，没有成功，没有理由啊。。。。。找了许久，难不成是我用的weixin-jsapi版本太旧，我跑到了npm的官网，发现了最后一次更新竟然是2017年，三年前，当然，那时候新的微信分享api肯定还没有出生，怎么办？又想到了前面踩坑没有成功的weixin-js-sdk，特意去了npm上查了一下，版本是十几天前刚更新的，并且更新版本非常频繁。那就转回官方推荐的weixin-js-sdk了
install ==》引用成功就大功告成了，重点就是跳引用的坑了

npm isntall weixin-js-sdk

import wx from 'weixin-js-sdk'
cosnole.log(wx) // undefined 

最后的最后发现原因是我在public目录的index.html中引入过了js-sdk的CDN，导致出现的问题(刚开始开发，跟着腾公众号的开发文档加上的，天坑)

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

把上面的一行代码注释掉之后就可以正常的import,并且能正常的打印了
总结，vue中使用js-sdk的两种方式如下：
第一种：使用cdn（尝试console.log(window[‘wx’])）

// index.html入口文件中引入
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> 
// 要使用的页面引入方式
const wx = window['wx']
// 下面进行wx配置
wx.config({....}) // 不再举例

第二种：使用npm 插件 ‘weixin-js-sdk’

// 安装
npm install 'weixin-js-sdk'
// 使用
import wx from 'weixin-js-sdk'
import Vue from 'vue'
wx.config({....})

如果不止一个vue页面用到的话，记得挂载到原型中，不然每个页面都要去wx.config

// 挂载
Vue.prototype.$wx = wx 

// 页面中的使用
this.$wx.scanQRCode({...}) // 扫码示例，不再枚举

切记，cdn和npm引入不能同时使用，会导致import不出来数据的哈

最后，撒花，终于可以下班了。。。。。。