h5开发 / weixin-js-sdk使用分享

最近做了一个h5活动页面，需要自定义微信分享的标题、详情、缩略图和url，使用到了jssdk，功能已经完成，总结一下这个东西到底怎么用（使用的是vue框架）

---

先来做下思想建设：
使用微信浏览器打开任何一个页面都可以点击右上角的···进行分享，这个功能只是可以自定义分享出去显示的标题、详情、缩略图和url
微信浏览器不支持主动唤起分享，所以如果你想做点击某个按钮就打开微信好友列表进行分享这种类似功能的话，就别想了，只能给用户一个提示，让他自己去分享，如图

配置自定义分享内容的时间节点在用户可能分享之前的任一时刻，最好在刚打开页面时就立即进行配置，防止用户已经点击分享了，还没有配置好自定义内容的情况

---

接下来看下代码实现：

先读官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

安装‘weixin-js-sdk’包

将‘weixin-js-sdk’放到Vue原型上

在进入到页面之后从后台提供的接口获取微信需要的权限验证信息，然后通过config接口注入权限验证配置

data() {
   
  return {
   
	toastTime: 2000,
	
    // 微信配置
    weixinConfig: {
   
      debug: false, // 调试时可以打开，能看到每一步的返回结果
      appId: '', // 后台会返回
      timestamp: null, // 后台会返回
      nonceStr: '', // 后台会返回
      signature: '', // 后台会返回
      jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'], // 要包含所有你要用到的方法
    },

    // 自定义微信分享内容
    shareContent: {
   
      url: `${
     window.location.href.split('?')