移动端Vue项目开发的微信分享功能总结

在使用vue和vue-router路由框架已经开发过好几个项目了，其中也遇到不少坑，有些坑各种搜也没有找到非常理想的答案。

vue学习相对来说还是比较简单，官方文档说明非常清楚（https://cn.vuejs.org/v2/guide/），多做一些Demo就可以熟练上手了，并且现在也有好多框架（vuex，MintUI，Element，iView等），根据项目需要自行学则，因此本人也就没有怎么写过关于vue这方面的文章。

这次主要是把自己在微信中分享遇到的问题分享一下，Android机器中分享不会存在问题，主要是IOS分享各种签名，标题、内容、图片不改变问题。

1.微信分享当然要引入微信JS-SDK

　　微信JS-SDK说明文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

　　分享页面引入：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

　　vue框架可以使用：https://github.com/yanxi-me/weixin-js-sdk   命令：npm install weixin-js-sdk

　　2.封装一下微信分享的功能，如下：

import wx from 'weixin-js-sdk';
import apiUrl from "@/config/apiUrl.js";
export default {
  wxChat : ($vue, param) => {
    let appId = "";
    let timestamp="";
    let nonceStr = "";
    let signature = "";
    let options = {
      title: "",
      desc: "",
      link: "",
      imgUrl: "",
      type: "link",
      dataUrl: "",
      localUrl: ""
    };
    options = Object.assign({}, options, param);
    //
    $vue.$httpPost(apiUrl.weChatShare, {shareLink: options.localUrl}).then((res) => {
      if(res.data&&res.data.status==="1000") {
        wx.config({
          debug: false,
          appId: res.data.appId, // 和获取Ticke的必须一样------必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: [
            'onMenuShareAppMessage', 'onMenuShareTimeline',
            'onMenuShareQQ', 'onMenuShareQZone'
          ]
        });
        //处理验证失败的信息
        wx.error(function (res) {
          console.log('验证失败返回的信息:', res);
        });
        //处理验证成功的信息
        wx.ready(function () {
          //分享到朋友圈
          wx.onMenuShareTimeline({
            title: options.title, // 分享标题
            link: options.link, // 分享链接
            imgUrl: options.imgUrl, // 分享图标
            success: function (res) {
              // 用户确认分享后执行的回调函数
              console.log("分享到朋友圈成功返回的信息为:", res);
              showMsg("分享成功!");
            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数
              console.log("取消分享到朋友圈返回的信息为:", res);
            }
          });
          //分享给朋友
          wx.onMenuShareAppMessage({
            title: options.title,
            desc: options.desc,
            link: options.link,
            imgUrl: options.imgUrl,
            type: options.type, // 分享类型,music、video或link，不填默认为link
            dataUrl: options.dataUrl, // 如果type是music或video，则要提供数据链接，默认为空
            success: function (res) {
              // 用户确认分享后执行的回调函数
              console.log("分享给朋友成功返回的信息为:", res);
              showMsg(JSON.stringify(options));
            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数
              console.log("取消分享给朋友返回的信息为:", res);
            }
          });
          //分享到QQ
          wx.onMenuShareQQ({
            title: options.title,
            desc: options.desc,
            link: options.link,
            imgUrl: options.imgUrl,
            success: function (res) {
              // 用户确认分享后执行的回调函数
              console.log("分享到QQ好友成功返回的信息为:", res);
            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数
              console.log("取消分享给QQ好友返回的信息为:", res);
            }
          });
          //分享到QQ空间
          wx.onMenuShareQZone({
            title: options.title,
            desc: options.desc,
            link: options.link,
            imgUrl: options.imgUrl,
            success: function (res) {
              // 用户确认分享后执行的回调函数
              console.log("分享到QQ空间成功返回的信息为:", res);
            },
            cancel: function (res) {
              // 用户取消分享后执行的回调函数
              console.log("取消分享到QQ空间返回的信息为:", res);
            }
          });
        });
      } else {
        console.log(res.data.msg);
      }
    }).catch((err) => {
      console.log(err);
    });
  }
};

3.如何使用封装的分享

　　如果使用vue路由hash模式，IOS中打开页面获取的地址永远都是一开始打开的地址，不是跳转后的当前页面地址，所以可以在打开的页面进行初始化调用或者在分享页面初始化满足（android），可以获取不同内核区分；要不就在跳转页面的时候使用location.href = ""，不要使用路由，这样只需要在分享页面调用微信初始化。为了保险可以在router.beforeEach钩子里面保存跳转后的地址到localStorage.set("LocalUrl",document.URL)。

　　跳转页面：location.href = "?#/invite?userId=3" ;

import weixin from "@/utils/wechat.js";
initWxChat: function() {
      let url = window.localStorage.getItem("LocalUrl")||window.location.href;
      let param = {
        title: "邀请有礼",
        desc: "欢迎您参加邀请有礼",
        link: window.location.href,
        imgUrl: this.headPortrait,
        localUrl: url
      };
      weixin.wxChat(this, param);
    }

4.微信签名认证可以通过，但是自定义分享的内容不一定好使

　　这个问题主要是分享的页面带参数，由于路由Hash模式自动会加入#号，微信在IOS中自动加入了自己的内容，然后把#后面的内容放在了它的后面所以获取参数就会出现问题，或许签名认证也会出现问题，这样就想到了加入一个特殊符号去处理，在传入地址的参数#号前面加入一个?号，并且传递的参数最好只有一个，如果是多个话还是会存在问题。

　　获取当前页面地址：let url = window.localStorage.getItem("LocalUrl")||window.location.href;

　　分享授权认证页面localUrl：http://localhost:9000/?#/invite?userId=3;

　　真正要分享的页面link：window.location.href.split('#')[0] + "#/invite_share?userId=3";

注：关注本人博客网（http://zhf.cnblogs.com/），有更多文章可以学习。