article-mobile/src/layout/common/share.vue

<template>
  <div id="share">
    <van-button type="info" @click="toShare">分享</van-button>
  </div>
</template>

<script>
let wx = require('weixin-js-sdk');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: weixin } = createNamespacedHelpers('weixin');
export default {
  name: 'share',
  props: {
    title: { type: String, default: '分享' },
    desc: { type: String, default: '内容' },
    img: { type: String, default: '' },
    route: { type: String, default: '/' },
    type: { type: String, default: 'py' },
  },
  components: {},
  data: function() {
    return {};
  },
  created() {},
  methods: {
    ...weixin(['jsAuth']),
    async toShare() {
      // 处理参数
      const { path, query } = this.$route;
      const { openid, ...others } = query;
      let uri = `${path}`;
      const keys = Object.keys(others);
      if (keys.length > 0) {
        const arr = keys.map(key => `${key}=${query[key]}`);
        uri = `${uri}?${arr.join('&')}`;
      }
      const url = encodeURIComponent(location.href.split('#')[0]);
      const res = await this.jsAuth({ url });
      if (this.$checkRes(res)) {
        const { data } = res;
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: data.appid, // 必填，公众号的唯一标识
          timestamp: data.timestamp, // 必填，生成签名的时间戳
          nonceStr: data.noncestr, // 必填，生成签名的随机串
          signature: data.sign, // 必填，签名
          jsApiList: [
            'updateAppMessageShareData', //朋友及QQ
            'updateTimelineShareData', // 朋友圈及QQ空间
          ],
        });
        wx.ready(() => {
          const url = 'http://broadcast.waityou24.cn/api/article/auth?redirect_uri=http://broadcast.waityou24.cn/articlemobile' + this.route;
          let method = 'updateAppMessageShareData';
          if (this.type !== 'py') method = 'updateTimelineShareData';
          wx[method]({
            title: this.title,
            desc: this.desc,
            imgUrl: this.img,
            link: url,
            success: res => {
              console.log('in function:share success');
            },
            error: err => {
              alert('share is fail');
              alert(JSON.stringify(err));
            },
          });
        });
        wx.error(res => {
          console.log(res);
        });
      }
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
    host() {
      return 'http://broadcast.waityou24.cn';
    },
    authUrl() {
      return `${host}/api/article/auth`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped></style>