uniapp 微信分享实现及问题解决主要介绍了 uniapp 如何开启“转发给朋友”和“分享到朋友圈`”的微信分享功能，

uniapp 微信分享实现及问题解决

主要介绍了 uniapp 如何开启转发给朋友和分享到朋友圈的微信分享功能，以及代码实现。

发现问题

在线上的小程序中，突然发现“转发给朋友”和“分享到朋友圈”这两个按钮是灰色的，无法进行操作。这可能是因为缺少相应的配置或功能未启用。

如下图所示：

问题分析

uniapp 没有开启微信分享功能，也没有进行分享配置，导致无法分享。

解决方案

在 uniapp 中增加微信分享功能，在manifest.json中开启配置。

具体步骤操作如下：

App 模块配置->Share(分享)->微信分享->appid

注意：appid 是必填的，代表分享的小程序，需要在微信开发者平台中配置：开发管理->开发设置->APPID 获取

配置完成后，manifest.json文件变更，如下图所示：

分享实现

uniapp 中，需要在分享的页面中，实现分享的事件：

转发给朋友onShareAppMessage
分享到朋友圈onShareTimeline

// shareMixin.js
export default {
  // 分享给朋友
  onShareAppMessage() {
    return {
      title: "", // 自定义标题
      path: "/pages/index/index", // 自定义路径
      imageUrl: "https://example.com/share.png", // 自定义图标
    };
  },
  // 分享给朋友圈
  onShareTimeline() {
    return {
      title: "", // 自定义标题
      path: "/pages/index/index", // 自定义路径
      imageUrl: "https://example.com/share.png", // 自定义图标
    };
  },
};

imageUrl：自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径。

不配置时：默认使用当前页面的截图
本地文件路径：/开头，表示当前小程序根目录，例如：/static/logo.png，我配置完毕，分享出去后，不展示图片了，显示默认的灰标，不知道为啥。。。。。。
网络图片路径：这个比较靠谱，正常显示，而且方便更换

如果仅固定几个页面，需要分享功能，可以直接引入shareMixin.js使用；

但是如果要全局使用的话，可以使用Mixin混入，需要在main.js中引入及使用：

import shareMixin from "@/common/shareMixin.js";
Vue.mixin(shareMixin);

其他注意事项

兼容性：确保你的 uniapp 版本支持微信分享功能。
调试工具：使用真机进行调试，确保分享功能正常工作。
分享文案：自定义分享文案和图片，提升用户体验。
分享统计：可以使用第三方统计工具来追踪分享的效果，了解哪些内容更受欢迎，从而优化分享策略。

H5中实现微信分享功能

<!-- 引入 wechat-jssdk --> 
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

function initWechatShare(configData) {
  wx.config({
    debug: false, // 开启调试模式
    appId: configData.appId, // 必填，公众号的唯一标识
    timestamp: configData.timestamp, // 必填，生成签名的时间戳
    nonceStr: configData.nonceStr, // 必填，生成签名的随机串
    signature: configData.signature, // 必填，签名
    jsApiList: ["onMenuShareAppMessage", "onMenuShareTimeline"], // 必填，需要使用的JS接口列表
  });

  // 注册分享事件
  wx.ready(function () {
    wx.onMenuShareAppMessage({
      title: "", // 分享标题
      desc: "", // 分享描述
      link: window.location.href, // 分享链接
      imgUrl: "https://example.com/share.png", // 分享图标
      success: function () {},
      cancel: function () {},
    });

    wx.onMenuShareTimeline({
      title: "", // 分享标题
      link: window.location.href, // 分享链接
      imgUrl: "https://example.com/share.png", // 分享图标
      success: function () {},
      cancel: function () {},
    });
  });

  wx.error( (res) => {});
}

参考文档：

也可以看下其他系列文章：