admin管理员组

文章数量:1562425

项目场景：把某个h5页面分享到微信里

API参考：概述 | 微信开放文档

1. 使用npm 安装或者在.html 文件里 <script  src="" ></script >引入

npm install weixin-js-sdk

 2. 引入微信的SDK

import wx from 'weixin-js-sdk'

3. 请求后端接口，在接口成功的回调函数中，通过wx的config接口注入权限验证配置

 封装  .js

export const wechatShare = function (shareData, url) {
  console.log(shareData);
  fetch(baseUrl + "/gzh/jsapi?url=" + url, {
    // 请求配置 // 根据后台配置填写
    method: "GET",
  }).then(async (res) => {
    const data = await res.json();
    const Data = data.data;
    wx.config({
      debug: false,// 是否开启调试模式
      appId: Data.appId,  //必填，公众号的唯一标识
      timestamp: Data.timestamp, // 必填，生成签名的时间戳
      nonceStr: Data.nonceStr, // 必填，生成签名的随机串
      signature: Data.signature, // 必填，签名
      jsApiList: ["updateAppMessageShareData", "updateTimelineShareData"],
     // 必填，需要使用的JS接口列表,可以查看文档，根据项目需求填加
    });
  });
  wx.ready(() => {
    // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
    wx.updateAppMessageShareData({
      title: shareData.title,
      desc: shareData.desc,
      link: shareData.url,
      imgUrl: shareData.image,
      success: function () {
        console.log(shareData, "shareData");
        // 设置成功
      },
      cancel: function () {
        console.log("分享取消");
      },
    });
    // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
    wx.updateTimelineShareData({
      title: shareData.title,
      desc: shareData.desc,
      link: shareData.url,
      imgUrl: shareData.image,
      success: function () {
        // 设置成功
      },
      cancel: function () {
        console.log("分享取消");
      },
    });
  });
};

 4. 组件里使用刚刚封装的  .js里的函数,内容自己配置

 componentDidMount() {
    const id = this.getParams(Router.router.asPath)
    this.getDetail(id)
    const currentUrl = window.location.href.split('#')[0]
    wechatShare({
      title: '******网站',  // 标题
      desc: '*****千万家',// 描述
      url: location.href, // 跳转地址
      image: 'https://img.nbsjfr/shangjingu.png' // 图片
    }, currentUrl)
  }

Tips：title,desc,imgURL,根据自己需求进行配置

分享到微信聊天框的示例图

本文标签： 浏览器功能

版权声明：本文标题：H5 移动端浏览器调用微信的分享功能 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727476030a1116503.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。