vue2.0 Hash模式下实现微信分享

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1，通过后台，获取accessToken 和 签名jsApiTicket，并写入浏览器缓存（可以写在app.vue中）

<script type="text/ecmascript-6">
import Store from 'common/js/store.js';
const CODE_SUC = 1;
const CODE_ERR = 0;
export default {
  name: 'app',
  data () {
    return {
      wxToken: {
        accessToken: ""
      },
      wxJsApiTicket: {
        jsApiTicket: ""
      }
    };
  },
  created () {
    setInterval(this.getAccessToken(), 7000);
    // 接口入住权限验证配置
  },
  components: {
    vFooter
  },
  methods: {
　　// 获取accessToken 和 签名jsApiTicket，并写入浏览器缓存
    getAccessToken () {
      this.axios.post("/api/user/getAccessToken", {
        "token": null,
        "uid": 0,
        "devType": "wx"
      }).then((res) => {
        res = res.data;
        if (res.code === CODE_SUC) {
          // console.log(res.accessToken);
          this.wxToken.accessToken = res.accessToken;
          this.wxJsApiTicket.jsApiTicket = res.jsApiTicket;
          Store.saveAccessToken(this.wxToken);
          Store.saveJsApiTicket(this.wxJsApiTicket);
          // console.log(res.accessToken);
        } else if (res.code === CODE_ERR) {
          console.log("获取accessToken失败");
        }
      }).catch((res) => {
        window.alert('网络异常,登录请求失败');
      });
    }
  }
};
</script>

2，上面的store.js（写入浏览器缓存的文件）如下

const STORAGE_KEY1 = 'memberInfo';
const STORAGE_KEY2 = 'token';
const STORAGE_KEY3 = 'accessToken';
const STORAGE_KEY4 = 'jsApiTicket';
export default {
  fetchFromLocal () {
    return JSON.parse(window.localStorage.getItem(STORAGE_KEY1) || "{}");
  },
  saveToLocal (obj) {
    window.localStorage.setItem(STORAGE_KEY1, JSON.stringify(obj));
  },
  saveAccessToken (obj) {
    window.localStorage.setItem(STORAGE_KEY3, JSON.stringify(obj));
  },
  saveJsApiTicket (obj) {
    window.localStorage.setItem(STORAGE_KEY4, JSON.stringify(obj));
  }
};

3，mian.js中，注册分享全局函数，并暴露出接口

import wx from 'weixin-js-sdk';   // 导入微信sdk
import Store from 'common/js/store.js';   // 导入store.js
// 全局注册分享函数
Vue.prototype.wxShare = function (title, desc, link, imgUrl) {
  // 获取签名
  this.axios.post("/api/user/getSignature", {
    "token": null,
    "uid": 0,
    "devType": "wx",
    "ticket": Store.fetchjsApiTicket().jsApiTicket,  // 获取浏览器缓存的签名
    "url": encodeURIComponent(window.location.href.split('#')[0]) // 此处进行一次编码
  }).then((res) => {
    res = res.data;
    if (res.code === CODE_SUC) {
      wx.config({
        debug: false,
        appId: '', // 填写自己的appID
        timestamp: res.timestamp,
        nonceStr: res.noncestr,
        signature: res.signature,
        jsApiList: [
            'onMenuShareTimeline',
            'onMenuShareAppMessage'
        ]
      });
    } else if (res.code === CODE_ERR) {
      console.log("获取accessToken失败");
    }
  }).catch((res) => {
    window.alert('网络异常,登录请求失败');
  });
  wx.ready(function () {
    // 分享给朋友
    wx.onMenuShareAppMessage({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: link, // 分享链接
      imgUrl: imgUrl, // 分享图标
      type: '', // 分享类型,music、video或link，不填默认为link
      dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
      success: function () {
        window.alert('已分享给朋友');
        this.axios.post("/api/product/shareStatistics", {
          "token": null,
          "uid": 0,
          "devType": "wx"
        }).then((res) => {
          res = res.data;
          if (res.code === CODE_SUC) {
            window.alert("分享返回数据成功");
          } else if (res.code === CODE_ERR) {
            console.log("获取失败");
          }
        }).catch((res) => {
          window.alert('网络异常,登录请求失败');
        });
      },
      cancel: function () {
          // 用户取消分享后执行的回调函数
      },
      fail: function (res) {
          window.alert(JSON.stringify(res));
      }
    });
    // 分享到朋友圈
    wx.onMenuShareTimeline({
        title: title, // 分享标题
        link: link,
        imgUrl: imgUrl, // 分享图标
        success: function () {
            window.alert('已分享到朋友圈');
        },
        cancel: function () {
          // 用户取消分享后执行的回调函数
          this.axios.post("/api/product/shareStatistics", {
            "token": null,
            "uid": 0,
            "devType": "wx"
          }).then((res) => {
            res = res.data;
            if (res.code === CODE_SUC) {
              window.aleryt("分享返回数据成功");
            } else if (res.code === CODE_ERR) {
              console.log("获取失败");
            }
          }).catch((res) => {
            window.alert('网络异常,登录请求失败');
          });
        },
        fail: function (res) {
            window.alert(JSON.stringify(res));
        }
    });
  });
};

4，在相应的位置调用注册好的wxShare （title, desc, link, imgUrl）函数，并传入所需的值：

　  例：以下为分享商品详情页面，link 为自己拼接路径的变量

this.wxShare('商品详情' + ' ' + this.good.goodsInfo.goodsName, this.good.goodsInfo.goodsName, link, this.IMG_BASE_URL + this.good.goodsInfo.goodsImage);

5，特别注意：在Hash模式下，安卓中会遇到分享到朋友圈之后，点击跳转会首页的情况，此时分享的路径与商品的真实路径是不一致的。需要在服务器端稍微处理一下。即把index文件，重新建一个文件夹，例如static，放进去。此时分享之后的路径，与真实路径才是一致的，也不会发生跳回首页的情况。苹果手机则不会有这个问题。

以上是 vue2.0 Hash模式下实现微信分享 的全部内容， 来源链接： utcz.com/z/380340.html

回到顶部