微信浏览器H5端分享该网站变成卡片形式

卢卢姥爷

已于 2024-03-09 16:12:10 修改

阅读量502

点赞数 11

文章标签：微信 javascript 前端

于 2024-03-09 16:11:52 首次发布

本文链接：https://blog.csdn.net/weixin_51737813/article/details/136585834

版权

本文介绍了如何在Vue应用中使用微信JS-SDK来配置和实现网页内容的分享功能，包括获取分享信息、设置分享标题、描述和链接等。

摘要由CSDN通过智能技术生成

<template>
  <div>分享测试网页</div>
</template>

<script setup lang="ts">
import wx from 'weixin-js-sdk'
import { onMounted, ref } from 'vue'
import api from '../api/index'
const appId = ref()
const timestamp = ref()
const nonceStr = ref()
const signature = ref()
const globalUrl = location.href.split('#')[0]
console.log(globalUrl);

onMounted(() => {
  api.getShareInfo({
    password: 'xdseJdc12',
    url: globalUrl
  }).then(res => {
    if (res.status == 'OK') {
      appId.value = res.data.appId
      timestamp.value = res.data.timestamp
      nonceStr.value = res.data.nonceStr
      signature.value = res.data.signature
    }
    wx.config({
      debug: false,
      appId: appId.value,
      timestamp: timestamp.value,
      nonceStr: nonceStr.value,
      signature: signature.value,
      jsApiList: [
        'updateAppMessageShareData',
        'updateTimelineShareData',
      ]
    })
    wx.checkJsApi({
      jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function (res) {
        console.log('可以用');
      }
    });
    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
      wx.updateAppMessageShareData({
        title: 'EnCopilot11', // 分享标题
        desc: '', // 分享描述
        link: globalUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
          console.log('111成功');

        }
      })
      wx.updateTimelineShareData({
        title: 'EnCopilot222', // 分享标题
        link: globalUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: '', // 分享图标
        success: function () {
          // 设置成功
          console.log('222成功');

        }
      })
    });
    wx.error(function (res) {
      //config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
      console.log(res);

    });
  })
})






</script>

<style lang="scss" scoped></style>