关于微信分享:Vue中的微信分享

一开始的时候，微信的 sdk，是通过 script 引入的。

然而，因为咱们的页面是短链接，会有一次转换变成长链接，这就造成了在咱们的零碎不能失常应用微信分享。

最终通过 N 屡次失败，不得不重头再来，一步步的走下来，最终发现是还是短链接转长链接造成的问题，因为在初始化的时候是进来的时候是短链接，因为是通过 script 在结尾引入的，所以微信 sdk 曾经监控到了，然而咱们 wxsdk 配置外面的 link 是咱们要分享的长链接，微信会认为这是有效配置，所以微信分享不失效。

如果你的微信分享还是应用 script 引入的形式，然而微信分享不失效，能够试试换一种形式

PS：多余代码就不写了

main.js

import wxInit from '@/utils/wxjsdk'
wxInit.install()

wxsdk.js

// 微信的配置
import Vue from 'vue'
// 咱们本人查要分享的数据的接口
import {getWxConfig, getWxShareData} from '../api/bvent.js'
import Store from '@/store'
// 引入微信 sdk 的包
import wx from 'weixin-js-sdk'
window.wx = wx

const wxSdk = {install() {Vue.prototype.$wxSdkInit = wxSdk.init},
  init() {getWxConfig({ url: location.href}).then(res => {
      wx.config({
        debug: false, // 生产环境须要敞开 debug 模式
        appId: res.appId, // appId 通过微信服务号后盾查看
        timestamp: res.timestamp, // 生成签名的工夫戳
        nonceStr: res.nonceStr, // 生成签名的随机字符串
        signature: res.signature, // 签名
        jsApiList: [
          // 须要调用的 JS 接口列表
          'updateTimelineShareData', // 分享给好友
          'updateAppMessageShareData', // 分享到朋友圈
          'onMenuShareAppMessage', // 1.0 分享到敌人
          'onMenuShareTimeline' // 1.0 分享到朋友圈
        ]
      })
      wx.ready(function() {getWxShareData({ id: Store.getters.bventId}).then(e => {
          let shareData = {
            title: e.shareTitle, // 分享题目
            desc: e.shareDescribe, // 分享形容
            link: e.shareLink, // 分享链接
            imgUrl:
              e.shareImage && e.shareImage.indexOf('http') === -1
                ? window.domainConfig.fileServer + '/' + e.shareImage
                : e.shareImage // 分享图标
          }
          wx.ready(function() {wx.onMenuShareAppMessage(shareData)
            wx.onMenuShareTimeline(shareData)
            wx.updateAppMessageShareData(shareData)
            wx.updateTimelineShareData(shareData)
          })
        })
      })
    })
  }
}
export default wxSdk

App.vue

<template>
  <router-view />
</template>
<script>
export default {
  name: 'App',
  mounted() {
    // 微信分享应用的，所以判断微信浏览器执行该办法
    let ua = navigator.userAgent.toLowerCase()
    var isWeixin = ua.indexOf('micromessenger') !== -1
    if (isWeixin && !/miniprogram/.test(ua)) {this.$wxSdkInit()
    }
  }
}
</script>

关于微信分享:Vue中的微信分享

微信分享遇到的问题

解决问题的代码

main.js

wxsdk.js

App.vue