wx-share 微信分享

需要注意的是签名的url需要与当前url一致。
分享的url,即link可以是当前域名下任意链接

  • api获取签名
import axios from 'common/js/axios'

const path = '/woa'

/// web-auth
export const createJsSignature = () => { return axios.post(`${path}/web-auth/create-js-signature`, {url: document.URL}) }
  • 封装的wxShareRegister
import Vue from 'vue'
import { Toast } from 'vant'
import {createJsSignature} from 'api/woa'

Vue.use(Toast)

const wx = require('weixin-js-sdk')

export default{
  install (Vue) {
    // 微信分享注册
    Vue.prototype.wxShareRegister = (url) => {
      createJsSignature().then(res => {
        const {data} = res
        wx.config({
          debug: false, // 开启调试模式,开发时可以开启
          appId: 'wxc11abfdbcasd5a31',   // 必填,公众号的唯一标识   由接口返回
          timestamp: data.timestamp, // 必填,生成签名的时间戳 由接口返回
          nonceStr: data.nonceStr,    // 必填,生成签名的随机串 由接口返回
          signature: data.signature,   // 必填,签名 由接口返回
          jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline'] // 此处填你所用到的方法
        })

        const shareData = {
          title: '招工啦,点击即可报名',
          desc: '名额有限,速来报名吧',
          link: url,
          imgUrl: `${location.protocol}//${location.hostname}/share-logo.png`
        }

        wx.ready(() => {
          wx.onMenuShareTimeline(shareData)
          wx.onMenuShareAppMessage(shareData)
        })

        wx.error(function (res) {
          console.log('errorMSG-->')
          console.log(res)
        })

      }).catch(err => {
        console.log(err)
        return false
      })
    }
  }
}
  • 引入

npm i weixin-js-sdk -S

!#main.js

// wx-jssdk
import wxShare from 'common/js/wx-share'
Vue.use(wxShare)
  • to use
mounted(){
  this.wxShareRegister(`${location.protocol}//${location.hostname}/share-page`)
}

你可能感兴趣的:(wx-share 微信分享)