Vue 应用中结合vux使用微信 jssdk的方法

下面给出Vue应用中结合vux使用微信jssdk的方法的完整攻略。

一、引入Vux

在Vue应用中使用Vux，需要先进行安装引入。

npm install vux --save

然后在Vue项目的入口文件（一般是main.js文件）中按照如下代码引用Vux：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Vux from 'vux'
import 'vux/src/styles/reset.less'

Vue.use(Vux)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

二、引入微信 jssdk

1.在项目中引入微信 jssdk 代码。

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

2.在Vue组件中使用微信 jssdk

在需要使用微信 jssdk 的Vue组件中，可以先在 data 中定义需要用到的微信 jssdk 方法：

data() {
  return {
    shareParams: {
      title: '分享标题',
      link: '分享链接',
      desc: '分享描述',
      imgUrl: '分享图标'
    }
  }
},

然后，在 mounted 钩子函数中，初始化微信 jssdk 信息：

mounted () {
  const url = window.location.href.split('#')[0]
  axios.get('http://xxxx/getWxConfig?url=' + encodeURIComponent(url)).then(response => {
    const wxConfig = response.data
    wx.config({
      debug: true,
      appId: wxConfig.appId,
      timestamp: wxConfig.timestamp,
      nonceStr: wxConfig.nonceStr,
      signature: wxConfig.signature,
      jsApiList: [
        'onMenuShareTimeline',
        'onMenuShareAppMessage',
        'onMenuShareQQ',
        'onMenuShareWeibo'
      ]
    })
    wx.ready(() => {
      wx.onMenuShareTimeline({
        title: this.shareParams.title,
        link: this.shareParams.link,
        imgUrl: this.shareParams.imgUrl,
        success: function () {
          alert('分享成功')
        },
        cancel: function () {
          alert('取消分享')
        }
      })
      wx.onMenuShareAppMessage({
        title: this.shareParams.title,
        desc: this.shareParams.desc,
        link: this.shareParams.link,
        imgUrl: this.shareParams.imgUrl,
        type: 'link',
        dataUrl: '',
        success: function () {
          alert('分享成功')
        },
        cancel: function () {
          alert('取消分享')
        }
      })
      wx.onMenuShareQQ({
        title: this.shareParams.title,
        desc: this.shareParams.desc,
        link: this.shareParams.link,
        imgUrl: this.shareParams.imgUrl,
        success: function () {
          alert('分享成功')
        },
        cancel: function () {
          alert('取消分享')
        }
      })
      wx.onMenuShareWeibo({
        title: this.shareParams.title,
        desc: this.shareParams.desc,
        link: this.shareParams.link,
        imgUrl: this.shareParams.imgUrl,
        success: function () {
          alert('分享成功')
        },
        cancel: function () {
          alert('取消分享')
        }
      })
    })
    wx.error(function (res) {
      console.log('微信配置信息获取失败', res)
    })
  })
}

其中，onMenuShareTimeline、onMenuShareAppMessage、onMenuShareQQ、onMenuShareWeibo 是微信 jssdk 中的分享功能，wx.ready() 是微信 jssdk 中的异步接口调用方法。

在上面的代码中，我们将微信 jssdk 的配置信息从后端获取，根据API进行配置，然后进行初始化和使用。

三、结合Vux组件使用

由于Vux是Vue组件库，它提供了丰富的UI组件和插件，可以快速构建Vue应用。在使用Vux组件时，我们可以将微信 jssdk 结合进来。

比如，我们可以在Vux的Actionsheet组件上加上微信分享的功能：

<template>
  <actionsheet v-model="shareVisible" :actions="shareActions" cancel-text="取消"></actionsheet>
</template>

<script>
  import { Actionsheet } from 'vux'

  export default {
    components: {
      Actionsheet
    },
    data() {
      return {
        shareVisible: false,
        shareActions: [
          { name: '分享给朋友', handler: this.shareToFriend },
          { name: '分享到朋友圈', handler: this.shareToTimeline }
        ]
      }
    },
    methods: {
      shareToFriend() {
        this.shareVisible = false
        this.shareParams = {
          title: '分享给好友的标题',
          link: '分享给好友的链接',
          desc: '分享给好友的描述',
          imgUrl: '分享给好友的图标'
        }
        wx.onMenuShareAppMessage({
          title: this.shareParams.title,
          desc: this.shareParams.desc,
          link: this.shareParams.link,
          imgUrl: this.shareParams.imgUrl,
          type: 'link',
          dataUrl: '',
          success: function () {
            alert('分享成功')
          },
          cancel: function () {
            alert('取消分享')
          }
        })
      },
      shareToTimeline() {
        this.shareVisible = false
        this.shareParams = {
          title: '分享到朋友圈的标题',
          link: '分享到朋友圈的链接',
          desc: '分享到朋友圈的描述',
          imgUrl: '分享到朋友圈的图标'
        }
        wx.onMenuShareTimeline({
          title: this.shareParams.title,
          link: this.shareParams.link,
          imgUrl: this.shareParams.imgUrl,
          success: function () {
            alert('分享成功')
          },
          cancel: function () {
            alert('取消分享')
          }
        })
      }
    }
  }
</script>

在上述代码中，我们通过定义shareActions数组，在Actionsheet组件中添加分享操作按钮，同时在点击分享操作时，在wx.onMenuShareAppMessage和wx.onMenuShareTimeline中进行微信 jssdk 的调用。

注：分享参数需要根据业务需求进行调整。

以上就是结合Vux使用微信 jssdk的方法，希望能对您有帮助。