小程序与h5分享

article/2025/9/13 18:41:53

小程序分享
可以参考小程序文档小程序文档链接
介绍：小程序中有直接在按钮上面加open-type就会触发分享了
如下:

	<button  open-type="share"></button>

在onShareAppMessage这个生命周期上面书写你要分享的内容就可以了，
如下：

onShareAppMessage(res) {return {title:'标题',path:"你需要客户点击你分享的进来你的程序的路径",imageUrl:'图片',desc: '描述',content:'内容',success(res) {uni.showToast({title: '分享成功'})},fail(res) {uni.showToast({title: '分享失败',icon: 'none'})}}},

h5分享

ps:根据这个文档书写的,你可以去参考下链接

第一步：绑定域名

先登录微信公众号平台进入[公众号设置的功能设置里面填写js接口安全域名]

如图：
在这里插入图片描述

需要填写一下域名，在把文件放到你的服务器下面，让他可以访问（保存按钮能保存就已经放置好了哦）

二、引入微信js-sdk
你可以直接去下载下来或者在你页面用script标签引入都可以

口令安装 npm i weixin-js-sdk --save
直接引入的方式：
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript"></script>

ps:二者只能用其中一个（不能同时有，不然就分享不了哦）

三、通过config接口注入权限验证配置

wx.config({debug: false, "是否开启调试模式，就是报错了会直接弹出来，反之在控制台打印"appId:"公众号的appid",//必填 公众号标识timestamp: "" +timestamp ,//必填，生成签名的时间戳nonceStr:nonceStr,必填，生成签名的随机串signature: signature,必填，签名jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage']必填，需要使用的js接口列表，所有js接口列表});

四、分享功能

             wx.ready(() => {//config信息验证后执行ready方法，所有接口调用必须在config接口获取结果之后，//config是客户端的异步操作，所有如果在需要在页面加载就调用相关接口，//则须把相关接口放在ready函数中调用来保证正确执行。对于用户触发时才调用的接口，//则可以直接调用，不需要放在ready函数中//分享给朋友接口  wx.onMenuShareAppMessage({title:title, // 分享标题desc: desc, // 分享描述link:link, // 分享链接imgUrl: 'imgUrl', // 分享图标type: 'link', // 分享类型,music、video或link，不填默认为linksuccess: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});//分享到朋友圈接口  wx.onMenuShareTimeline({title:title, // 分享标题desc: desc, // 分享描述link:link, // 分享链接imgUrl: 'imgUrl', // 分享图标type: 'link', // 分享类型,music、video或link，不填默认为linksuccess: function() {// 用户确认分享后执行的回调函数},cancel: function() {// 用户取消分享后执行的回调函数}});});