uniapp h5 微信分享

如果是在手机浏览器进行分享，则可以使用浏览器自带的分享功能。还有一种是h5页面运行在微信端分享，在此我们描述的是微信端分享。

微信jssdk开发文档

概述 | 微信开放文档

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

配置的规则：

步骤二：引入模块

下载模块

npm install weixin-js-sdk --save

引用

import wx from "weixin-js-sdk";

步骤三：通过 config 接口注入权限验证配置

wx.config({
	debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
	appId: config.appId, // 必填，公众号的唯一标识
	timestamp: config.timestamp, // 必填，生成签名的时间戳
	nonceStr: config.nonceStr, // 必填，生成签名的随机串
	signature: config.signature, // 必填，签名
	jsApiList: [
		'checkJsApi',
		// 'onMenuShareTimeline',//旧
		// 'onMenuShareAppMessage',//旧
		'updateAppMessageShareData',
		'updateTimelineShareData'
	], // 必填，需要使用的JS接口列表
});

• 配置参数的获取途径是通过接口传当前页面的url给后台，需要过滤掉#后面的链接，不然部分手机会出现分享错误的情况
• 调试的时候把debug设置为true

步骤四：设置分享信息

1.4之前的版本即将废弃，我们这边用最新方法。这边是预设分享信息，需要在用户点击分享按钮前设置

wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
  //自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
  wx.updateTimelineShareData({ 
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
   //自定义“分享到朋友圈”及“分享到 QQ 空间”按钮的分享内容（1.4.0）
   wx.updateTimelineShareData({ 
    title: '', // 分享标题
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的公众号 JS 安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
}); 

 步骤五：分享

制作一个蒙版，在用户点击分享按钮的时候引导用户点击右上角的三个点打开弹窗进行分享