vite+ts+uniapp设置公众号网页的分享与隐藏

官网链接：微信网页开发 / JS-SDK

前提：

第一步：下载依赖包

npm i weixin-js-sdk

第二步：配置config

@/src/app.vue

import wx from "weixin-js-sdk";
onLaunch(() => {
  // 微信公众号config配置只需在入口文件app.vue配置一次即可
  wxConfigHandler();
});

function wxConfigHandler() {
  // config里面的配置信息一般需要后端的接口获取
  uni.request({
    url: "替换成自己项目接口",
    method: "get",
    data: {
      url: getCurrentUrl(),
    },
    success: function (res) {
      const data = res.data.data;

      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature, // 必填，签名
        jsApiList: data.jsApiList || [
          "checkJsApi",
          "requestSubscribeMessage",
          "subscribeConfig",
        ], // 必填，需要使用的JS接口列表
      });
    },
    fail: function (err) {
      console.log(err);
    },
  });
}
// 获取当前页面URL（官网要求要动态获取页面路径config配置才能生效）
function getCurrentUrl() {
  return window.location.href.split("#")[0]; // 移除hash部分
}

注意：当前页面URL传给后端的时候必须是完整链接，否则config会配置失败

假设你的pages配置的第一个页面为pages/index/index。

即使你访问的时候只写域名https:xxxx也可以访问，但Url也不能只写域名，必须加上页面路径：https:xxxx/pages/index/index

注意：需要将文件打包上传服务器测试，开发者工具打印信息如下代表配置成功，这时才可以在需要的页面调用wx方法配置分享内容

第三步：页面设置分享信息

获取分享数据之后调用setShareHandler()即可

注意：分享设置是全局生效的，只要配置成功后，无论在哪个页面分享，分享的内容都是你配置的信息

function setShareHandler() {
  wx.ready(async () => {
    wx.showAllNonBaseMenuItem(); //显示所有菜单(根据自己项目需求来设置)
    wx.hideMenuItems({
      menuList: ["menuItem:copyUrl"], // 屏蔽复制链接(根据自己项目需求来设置)
    });
    let link = `项目域名/pages/xxx/xxx`;
    let desc = `接口返回的分享描述`;
    let imgUrl = "接口返回的图片地址";
    let title = "接口返回的标题";
    // 分享个人
    wx.updateAppMessageShareData({
      title: title, // 分享标题
      desc: desc, // 分享描述
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: imgUrl, // 分享图标
      success: function () {},
      fail: function (res) {
        // alert(JSON.stringify(res));
        console.log(res);
      },
    });
    // 分享朋友圈
    wx.updateTimelineShareData({
      title: title || "", // 分享标题
      link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: imgUrl, // 分享图标
      success: function () {},
    });
  });
}

隐藏分享入口（不让用户分享）

隐藏方式有两种

1、wx.hideAllNonBaseMenuItem：隐藏所有非基础按钮接口

2、wx.hideMenuItems:批量隐藏功能按钮接口(按需隐藏)

// src/composables/hideWechatMenu.js
import wx from "weixin-js-sdk";
function hideWechatMenu() {
  wx.ready(() => {
    try {
      wx.hideAllNonBaseMenuItem();
      // wx.hideMenuItems({
      //   menuList: [
      //     "menuItem:share:qq",
      //     "menuItem:share:weiboApp",
      //     "menuItem:favorite",
      //     "menuItem:share:QZone",
      //     "menuItem:copyUrl",
      //     "menuItem:openWithQQBrowser",
      //     "menuItem:openWithSafari",
      //     "menuItem:share:email",
      //     "menuItem:readMode",
      //     "menuItem:originPage",
      //     "menuItem:share:timeline",
      //     "menuItem:share:appMessage",
      //   ],
      // });
    } catch (error) {
      console.log("隐藏微信菜单失败:", error);
    }
  });
}
export default hideWechatMenu;

在需要的页面调用即可

import hideWechatMenu from "@/composables/hideWechatMenu";
onShow(() => {
  hideWechatMenu();
});

注意：隐藏在ios好像是全局的，所以最好在需要显示分享链接的页面显示菜单

不同的隐藏方式要对应不同的显示

1、使用wx.hideAllNonBaseMenuItem隐藏的必须使用wx.showAllNonBaseMenuItem()看我第三步骤setShareHandler函数里面有

2、使用wx.hideMenuItems隐藏的必须使用wx.showMenuItems

Tip：

只有配置成功后，分享出去的样式才会如下图所示，但前提是，你是从公众号入口进入的，分享出去的才是卡片形式

前端测试阶段如果没有公众号入口，可以将项目的首页链接收藏到微信中，从收藏中进去就可以实现上图卡片的效果了，到此分享配置就完成了

补充：

微信PC端分享配置报错‘updateAppMessageShareData:permission denied’需要手动刷新页面才会生效，具体原因不明

解决方案：

1、检查分享的数据是否正确

2、在失败函数里面自动刷新页面，代码如下

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

          // 设置成功
        },
         fail: function (res) {
          // 失败刷新当前页面
          location.reload();
        },
      });