JS实用功能-6、Vue开发 添加微信分享功能（全局分享）

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

vue

在Vue4.0开发微信公众号的时候，需要做微信分享功能。这个功能其实还算简单，具体的思路如下：

1.安装微信JSSDK和Axios（axios是http请求插件）

2.向后台请求微信配置参数

3.初始化微信分享配置API

4.需要分享的地方引用配置

那么现在来实现：

安装插件：

yarn add weixin-js-sdk

yarn add axios

安装好插件之后，创建一个weixinApi.js文件，添加如下代码：

import wx from \'weixin-js-sdk\';
import Axios from "axios";
const ShareImpl = function (option) {
    //option是分享的配置内容*/
    const url = window.location.href.split("#")[0];
    window.console.log(url, JSON.stringify(option));
    Axios.get(\'获取参数配置路径\', {
        params: {url}
    }).then((response) => {
        wx.config({
            debug: false,
            appId: response.data.AppId,
            timestamp: response.data.Timestamp,
            nonceStr: response.data.NonceStr,
            signature: response.data.Signature,
            jsApiList: [
                \'updateAppMessageShareData\',
                \'updateTimelineShareData\',
            ]
        });
    }).catch(error => {
        window.console.log(error);
    });
    wx.ready(function () {
        wx.updateAppMessageShareData({
            title: option.shareTitle,
            desc: option.shareDesc,
            link: option.shareUrl,
            imgUrl: option.shareImg
        });
        wx.updateTimelineShareData({
            title: option.shareTitle,
            desc: option.shareDesc,
            link: option.shareUrl,
            imgUrl: option.shareImg,
        });
    })
    /*}*/
}
export {ShareImpl}

然后在main.js中引用该配置：

let url = window.location.href.split("#")[0];
    if(url.indexOf(\'from\') != -1){
      url = window.location.href.split("?")[0];
    }
    window.console.log(url + \'favicon.png\');
    ShareImpl({
      shareTitle: \'深圳XXX\',
      shareDesc: \'让AIXXXXXXX\',
      shareUrl: url,
      shareImg: url + \'favicon.png\',
    });

分享的路径是整个域下的路径，比如 ：http://xxx.xxxx.com/xxxx/,没有根据路由参数来配置。

完成上述操作之后，就可以在全局都用到分享功能了。

以上是 JS实用功能-6、Vue开发 添加微信分享功能（全局分享） 的全部内容， 来源链接： utcz.com/z/374587.html

回到顶部