首页 > 其他分享 >基于vue2开发的html5页面实现微信分享卡片(微信好友+朋友圈+qq好友+qq空间)

基于vue2开发的html5页面实现微信分享卡片(微信好友+朋友圈+qq好友+qq空间)

时间:2023-12-07 16:33:07浏览次数:38  
标签:qq const 微信 res 分享 data id 好友

首先附上文档链接:

1.微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#111

2.免费生成二维码的草料官网:https://cli.im/text/other

 

需求:

在浏览器分享链接时携带用户id(因为是拉人活动,需要给用户积分),并且在微信中分享为卡片模式

 

具体实现:

首先需要去公众号进行配置,具体步骤网上很多,大致就是填写ip、安全域名白名单、下载微信官方用于运行的txt文件并且放到项目根目录这些最关键。

 

然后是前端代码实现

1.引入微信的js sdk文件:npm install weixin-js-sdk --save

2.在utils.js中书写代码:

import wx from "weixin-js-sdk";

/*
 * 微信分享
 * 获取微信加签信息
 * @param{data}:获取的微信加签
 * @param{shareData}:分享配置参数
 */
export const wxShare = (data, shareData) => {
  let appId = data.appId;
  let timestamp = data.timestamp;
  let nonceStr = data.nonceStr;
  let signature = data.signature;
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。(测试记得关掉)
    appId: appId, // 必填,公众号的唯一标识
    timestamp: timestamp, // 必填,生成签名的时间戳
    nonceStr: nonceStr, // 必填,生成签名的随机串
    signature: signature, // 必填,签名,见附录1
    jsApiList: [
      // 必填,需要使用的JS接口列表
      // "checkJsApi",
      "updateAppMessageShareData", //分享到微信及QQ(新接口)
      "updateTimelineShareData", //分享到朋友圈”及“分享到QQ空间(新接口)
    ],
  });
  // wx.checkJsApi({
  //   jsApiList: ["chooseImage", "updateAppMessageShareData"], // 需要检测的JS接口列表,所有JS接口列表见附录2,
  //   success: function (res) {
  //     // 以键值对的形式返回,可用的api值true,不可用为false
  //     // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
  //     console.log(res, "checkJsApi");
  //   },
  // });
  wx.ready(function () {
    // //分享到朋友圈”及“分享到QQ空间”
    wx.updateTimelineShareData({
      ...shareData,
      link: shareData.link + "&t=" + timestamp, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      success: function (res) {
        console.log("分享朋友圈成功返回的信息为:", res);
      },
    });

    //“分享给朋友”及“分享到QQ”
    wx.updateAppMessageShareData({
      ...shareData,
      link: shareData.link + "&t=" + timestamp + "&Content=1", // 分享链接 该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      success: function (res) {
        console.log("分享朋友成功返回的信息为:", res);
      },
    });
  });
  wx.error(function (res) {
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    console.log("验证失败返回的信息:", res);
  });
};

 

具体细节配置可以参考官方文档,不赘述。

 

3.在App.vue中进行使用:

<template>
  <section>
    <div class="app-container app-container-e">
xxx
    </div>
  </section>
</template>

<script>
import { wxShare } from "@/utils/utils.js";

export default {
  name: "App",
  components: {
  },
  data() {
    return {};
  },
  computed: {
  },
  mounted() {
    // 当token存在时请求用户数据
    if (this.token) {
      this.initUser();
    } else {
      this.setUser({});
    }
  },
  methods: {
    async initUser() {
      const { data = {} } = await api.fetchUserInfo();
      if (Object.keys(data).length > 0) {
        // 设置用户基本信息
        this.setUser(data);
        const browser = window.navigator.userAgent.toLowerCase();
        //匹配browser中是否含有MicroMessenger字符串
        if (browser.match(/MicroMessenger/i) == "micromessenger") {
          this.weixin(data);
        } else {
          const params = new URLSearchParams(window.location.search);
          const id = params.get("id");
          if (!id || (id && id !== data.uid)) {
            // 如果不是微信浏览器,则跳转页面带id后缀
            const url_a = window.location.origin;
            window.location.href = url_a + "?id=" + data.uid;
          }
        }
      }
    },
    async weixin(info) {
      //请求微信配置参数接口(获取签名),由后台给接口给
      const url_a = window.location.href.split("#")[0];
      try {
        const { code, msg, data } = await api.shareWx(url_a);
        if (code === 0 && data) {
          //微信加签
          var obj = {
            appId: data.appid,
            nonceStr: data.nonceStr,
            signature: data.signature,
            timestamp: data.timestamp,
          };
          //分享数据,这段主要是为了在hash模式下分享出去的链接不被浏览器截取,保证完全把链接分享出去
          let shareData = {
            title: process.env.VUE_APP_TITLE,
            desc: process.env.VUE_APP_DESCRIPTION,
            imgUrl: process.env.VUE_APP_IMAGE,
            link: data.url + "?id=" + info.uid,
          };
          //引用
          wxShare(obj, shareData);
        } else {
          this.$toast(msg || "获取sdk参数失败");
        }
      } catch (err) {
        //
      } finally {
        //
      }
    },
  },
};
</script>
<style lang="less">
.app-container-e {
  overflow: hidden;
}
</style>

 

这里需要后端去获取签名,前端不用管,叮嘱后端在微信开发者工具里把config初始化调试到没有问题,再去联调就好。

需要注意的是,我们请求接口是发的地址,不能带后缀,必须与网页的域名是一致的,如果有#,则需要用encodeURIComponent进行加密。

 

4.因为是h5页面,所以直接发送链接,微信是不会识别为卡片的,能够分享为卡片模式的条件为如下:

 因此我们可以用草料生成二维码,进行测试,会发现成功成为卡片模式了~

 

ps 至于其他浏览器,一般自带卡片,所以无需太多关注,只需要注意登录后获取到用户信息后,跳转一下链接拼接好用户id就可以正常分享拉人啦

 

标签:qq,const,微信,res,分享,data,id,好友
From: https://www.cnblogs.com/nangras/p/17883325.html

相关文章

  • 微信号上传附件小程序
    微附件是一个旨在简化公众号附件管理的实用工具。它为运营人员提供了一个轻松上传和管理多种文件格式(包括Word、Excel、PPT、PDF、TXT等)的平台,并使得用户能够直接下载这些文件。鉴于微信公众号本身并不内置此类功能,微附件的应用因此变得极为重要。首先,要访问微附件的官方网页,您可以......
  • 微信如何设置自动通过好友请求后自动回复?
    微信设置自动回复有什么好处?1、可以提高沟通效率。我们不可能24小时看着微信的,为了避免耽误没有及时通过和回复对方的微信,可以设置自动回复,这样就不会因为长时间没有回复而产生误解或不满。2、可以节省时间和精力。如果经常收到类似的询问或回复,通过设置自动回复,可以避免重复回答,从......
  • 与好友保持联系,尝试Line多开功能
    与好友保持联系,尝试Line多开功能导语:在现代社交网络的时代,与好友保持联系变得更加便捷和容易。而作为一种全球流行的通讯应用程序,Line提供了许多有趣和实用的功能,其中包括多开功能。本文将探讨如何利用Line多开功能与好友保持联系。第一段:随着社交媒体的普及,人们越来越依赖网络来......
  • 与好友保持联系,尝试Line多开功能
    与好友保持联系,尝试Line多开功能导语:在现代社交网络的时代,与好友保持联系变得更加便捷和容易。而作为一种全球流行的通讯应用程序,Line提供了许多有趣和实用的功能,其中包括多开功能。本文将探讨如何利用Line多开功能与好友保持联系。第一段:随着社交媒体的普及,人们越来越依赖网络......
  • 微信社群机器人API
    请求URL:http://域名地址/sendHeadImage请求方式:POST请求头Headers:Content-Type:application/jsonAuthorization:Authorization值(登录获取码信息接口中返回的认证信息值)参数:参数名必选类型说明wId是string登录实例标识path是string图片url链接返回数据:参数名类型说明codestring1000成......
  • 微信群控接口
    请求URL:http://域名地址/scanJoinRoom请求方式:POST请求头Headers:Content-Type:application/jsonAuthorization:login接口返回参数:参数名必选类型说明wId是string登录实例标识url是string群二维码url(二维码解析后的url)type否int操作类型,默认00:......
  • 发布微信小程序
    由于原文过大,这里只截取我需要的部分,原文链接:https://zhuanlan.zhihu.com/p/664025627二、填写基础信息1、小程序基本信息填写:小程序名称,小程序简称,小程序头像,小程序介绍。2、小程序类目填写:个人类的建议选择工具,比较容易通过审核。3、小程序备案:填写个人信息及身份证正......
  • .NET微信网页开发相关文章教程
    前言今天我们主要总结一下.NET微信网页开发的相关文章教程。微信网页开发详细文档可以看微信官方文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html 全面的.NET微信网页开发之JS-SDK使用步骤、配置信息和接口请求签名......
  • 企业微信内测“获客助手”,1元加一个客户
    我是卢松松,点点上面的头像,欢迎关注我哦!企业微信算得上是国民级的企业办公工具了,它的一举一动其实对很多企业影响都挺大的。随着互联网大厂都在降本增效,很多工具、环节、动作都要收费了,企业微信已经意识到,还是“卖好友”赚钱,指望用户先免费在付费的思路行不通了,而且现在企业微信已经......
  • uniapp 微信小程序 onLaunch触发vuex 请求http报错600009?
    当在uniapp中的微信小程序中使用vuex触发http请求时,出现错误码600009通常表示网络请求发生了错误或失败。这个错误码通常不是uniapp或vuex特定的错误码,而是微信小程序的错误码。以下是一些可能导致此错误的原因和解决方法:网络连接问题:首先,确保您的设备已连接到互联网,并且网络连接稳......