vue h5项目在微信内置浏览器实现自定义分享微信好友、朋友圈功能_微信内打开网页点击三个点分享自定义样式

一个描述：
所有的 h5 页面在微信内置浏览器内，前端未做任何配置下，点击右上角三点，默认是有分享功能的，如下图：

因项目要将分享相关信息入库，所以需要自定义分享，即拼接分享页面路径+活动id+分享者id。当被分享者通过自定义分享路径进入到页面后，调用分享成功接口，将分享相关信息传到后台。

注意：
1、h5页面在微信内置浏览器中，页面路径里会自动拼接上code=AAA&state=STATE&appid=BBB这样一串内容，并且页面路径中会有两个 ？号，所以获取当前页面路径后，拼接分享页面路径时要将多余的字符串去掉再拼接字段。同样通过分享进入被分享页面时，当前页面路径后面也是会有code=AAA&state=STATE&appid=BBB这些内容的。
2、当用户A分享页面给用户B后，若用户B是未注册的新户、或未登录的状态，会被拦截到授权登录页，用户需授权微信信息，获取 code，用 code 获取 unionId ，再用 unionId 获取个人信息，这一系列操作原分享页面路径后面的传参字段要特别注意，此处不详述。

实现过程：
1、下载插件： npm install --save weixin-js-sdk。
2、引入插件定义方法：在 src 文件夹下新建 wxsdk.js 文件，定义分享方法，代码如下：

import wx from 'weixin-js-sdk'
import axios from 'axios'
import { devBaseURL, proBaseURL } from './config' 

const proEnv = process.env.NODE_ENV;
let baseUrl;
if (proEnv == 'development') {
  baseUrl = devBaseURL
} else if (proEnv == 'production') {
  baseUrl = proBaseURL
}
axios.defaults.baseURL = baseUrl

const wxApi = {
  /**
  * [wxRegister 微信Api初始化]
  * @param {Function} callback [ready回调函数]
  */
  wxRegister(callback) {
    let data = {
      url: window.location.href
    };
    axios.post('/admin/user/XXX', // 后台提供接口，获取 wx.config 对象内所需字段
      data,
      {
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
          'Authorization': `Bearer ${localStorage.getItem("token")}`
        }
      }
    ).then((res) => {
      wx.config({
        debug: false, // 开启调试模式
        appId: data.data.appid, // 必填，公众号的唯一标识
        timestamp: data.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
        signature: data.data.signature, // 必填，签名
        jsApiList: [
          'onMenuShareTimeline',
          'onMenuShareAppMessage',
        ]// 必填，需要使用的JS接口列表
      });
    }).catch((e) => {
      console.log(e);
    });
    wx.ready((res) => {
      // 如果需要定制ready回调方法
      if (callback) {
        callback();
      };
    });
  },
  ShareTimeline(option) {
    wx.onMenuShareTimeline({
      title: option.title, // 分享标题
      link: option.link, // 分享链接
      imgUrl: option.imgUrl || '', // 分享图标
      success() {
        option.success();
      },
      cancel() {
        option.cancel();
      },
      error() {
        option.error();
      }
    })
  },
  ShareAppMessage(option) {
    wx.onMenuShareAppMessage({
      title: option.title, // 分享标题
      desc: option.desc, // 分享描述
      link: option.link, // 分享链接
      imgUrl: option.imgUrl || '', // 分享图标
      success() {
        option.success();
      },
      cancel() {
        option.cancel();
      },
      error() {
        option.error();
      }
    })
  }
}

export default wxApi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

// 分享页面在 mounted 中执行注册方法：
  mounted() {
    this.$nextTick(() => {
      if (this.token) {
        wxapi.wxRegister(this.wxRegCallback);
      }
    });
  },
  
// 在 methods 中定义如下方法：
  wxRegCallback() {
      // 用于微信JS-SDK回调
      this.wxShareTimeline();
      this.wxShareAppMessage();
    },
    wxShareTimeline() {
      // 微信自定义分享到朋友圈
      let option = {
        title: this.bannerTitle, // 自定义分享标题
        link: this.sharePath, // 自定义分享路径
        imgUrl: "",
        success: () => {
          // this.$toast("分享成功");
        },
        cancel: function () {
          this.$toast("已取消分享");
        },
        error: () => {
          this.$toast("分享失败");
        },
      };
      // 将配置注入通用方法
      wxapi.ShareTimeline(option);
    },
    wxShareAppMessage() {
      // 微信自定义分享给朋友
      let option = {
        title: this.bannerTitle,
        link: this.sharePath,
        imgUrl: "",
        success: () => {
          // this.$toast("分享成功");
        },
        cancel: function () {
          this.$toast("已取消分享");
        },
        error: () => {
          this.$toast("分享失败");
        },
      };
      // 将配置注入通用方法
      console.log(option, "分享链接");
      wxapi.ShareAppMessage(option);
    },

	// 获取当前分享页面路径方法：
   getCurrentShareUrl() {
      let url = window.location.href;
      if (this.isWeixinEnv) { // 判断是微信环境打开的 h5 页面
        if (url.includes("code=")) { // 判断页面路径中包含 code 那一串信息，路径中有2个？
          // 微信环境打开的 h5 页面，地址栏默认有 code 等参数
          if (url.indexOf("?") != -1) { // 路径中拼接有字段
            let first = url.indexOf("?") + 1; // 从第一个?算起（+1表示不包括该?）
            let kong = url.substring(0, first - 1); // 截取第一个 ？前的内容，即部署后 h5 项目的首页
            console.log(kong, "kong");
            let second = kong + "#/activityDetail"; // 要分享的页面路径（未拼接字段）
            console.log(second, "this.currentUrl");
            this.currentUrl = second;
          }
        } else {
          // 从公众号链接进去，此时路径中不包含 code 等字段，路径中只有1个？
          if (url.indexOf("?") != -1) {
            let first = url.indexOf("?") + 1; // 从?算起（+1表示不包括该?）
            this.currentUrl = url.substring(0, first - 1);// 截取 ? 前的内容，即被分享页面（未拼接字段）
          }
        }
      } else { // 非微信环境下打开  h5 页面时
        this.currentUrl = url.substr(0, url.indexOf("?"));// 截取 ? 前的内容，即被分享页面（未拼接字段）
      }
      console.log(
        window.location.href,
        "<---当前页面初始url;;;当前页面去参数、code等值--->",
        this.currentUrl
      );
      this.sharePath =
        this.currentUrl +
        "?userId=" +
        localStorage.getItem("userId") +
        "&activityId=" +
        this.activityId;
      console.log(this.sharePath, "当前页面分享路径sharePath");
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92

// 被分享者进入页面后，获取参数
  created() {
    this.isWeixinEnv = isWeixin();
    if (this.isWeixinEnv) { 
      let weixinParams = getWeixinRequestParams(); // 微信环境下获取路径拼接字段 (路径中有2个？)
      this.activityId =
        weixinParams["activityId"] || this.$route.query.activityId;
      this.shareUserId =
        weixinParams["userId"] || this.$route.query.userId || "";
      console.log(
        weixinParams,
        this.activityId,
        this.shareUserId,
        "当前页面路径的params"
      );
    } else {
      let params = getRequestParams(); // 非微信环境下获取路径拼接字段，utils文件中定义
      this.activityId = params["activityId"] || this.$route.query.activityId;
      this.shareUserId = params["userId"] || this.$route.query.userId || "";
      console.log(
        params,
        this.activityId,
        this.shareUserId,
        "当前页面路径的params"
      );
    }
      this.getCurrentShareUrl();
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

// utils文件：
export const getRequestParams = () => {
let url = location.href;
let requestParams = {};
if (url.indexOf("?") !== -1) {
  let str = url.substr(url.indexOf("?") + 1); //截取?后面的内容作为字符串
  let strs = str.split("&"); //将字符串内容以&分隔为一个数组
  for (let i = 0; i < strs.length; i++) {
    requestParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
    // 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
  }
}
return requestParams;
}

export const getWeixinRequestParams = () => {
let url = location.href;
let requestParams = {};
if (url.indexOf("?") !== -1) {   
  let one; // 第二个?后内容
  let first = url.indexOf("?") + 1; // 从第一个?算起（+1表示不包括该?）
  let kong = url.indexOf(" ", first); // 第一个?后的第一个空格
  let heng = url.indexOf("?", first); // 第一个？后的第一个？（即第二个?）
  if (heng == -1) {
    one = url.substring(kong).substring(1, url.length);
  } else {
    one = url.substring(heng).substring(1, url.length);
  }
  let strs = one.split("&"); //将字符串内容以&分隔为一个数组
  for (let i = 0; i < strs.length; i++) {
    requestParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
    // 将数组元素中'='左边的内容作为对象的属性名，'='右边的内容作为对象对应属性的属性值
  }
}
return requestParams;
}

// 判断是否是微信环境
export function isWeixin() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
  return true;
} else {
  return false;
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46