小程序分享功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序分享功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

示例代码-微信端


  wx.onShareAppMessage(() => {
    return {
      title: '转发标题',
      imageUrl: '' // 图片 URL
    }
  })

示例代码-uniapp端

在methods中定义 onShareAppMessage 函数，小程序右上角三个点中就会出现转发，分享的功能。

methods: {
   onShareAppMessage() {
	    return {
			title: this.companyName,//转发标题
			path: '/pages/index/shopMap', //路径，传递参数到指定页面。
			imageUrl:this.logo,//转发显示图片的链接
			}
		},
   }

onShareAppMessage参数

属性	类型	说明	最低版本
title	string	转发标题，不传则默认使用当前小游戏的昵称。
imageUrl	string	转发显示图片的链接，可以是网络图片路径或本地图片文件路径或相对代码包根目录的图片文件路径。显示图片长宽比是 5:4
query	string	查询字符串，必须是 key1=val1&key2=val2 的格式。从这条转发消息进入后，可通过 wx.getLaunchOptionsSync() 或 wx.onShow() 获取启动参数中的 query。
imageUrlId	string	审核通过的图片 ID，详见使用审核通过的转发图片	2.4.3
promise	promise	如果该参数存在，则其它的参数将会以 resolve 结果为准，如果三秒内不 resolve，分享会使用上面传入的默认参数	2.12.0
toCurrentGroup	boolean	是否转发到当前群。该参数只对从群工具栏打开的场景下生效，默认转发到当前群，填入 false 时可转发到其他会话。	2.12.2
path	string	独立分包路径。详见小游戏独立分包指南	2.12.2

onShareAppMessage

通过按钮方式分享，注：open-type="share"属性只能通过button按钮使用

<button data-name="shareBtn" open-type="share">分享</button>

由于只能通过按钮标签来使用open-type="share"，如果需要用标签如：view 。我们可以通过取巧的方式来实现此功能,button标签覆盖在原有的基础之上

<view class="share">
	店铺分享
	<img src="../../static/icon/fx.png" alt="">
	<button class="sharebtn" :data-name="item" open-type="share"></button>
</view>
<style>
.share{
   position: relative;//父盒子设置相对定位
   .sharebtn{
      position: absolute;//子按钮设置绝对定位
	  width: 100%;
	  height: 40rpx;
	  left: 0;
	  right: 0;
	  opacity: 0;//隐藏该按钮
    }
 }
</style>

分享按钮——传参

在button上，自定义传参，格式如下：

: data-属性名 = " 参数 "

使用参数：文章来源地址https://www.toymoban.com/news/detail-493013.html

<button :data-name="shareBtn" open-type="share">分享</button>
onShareAppMessage(e) { //设置形参
	let item = e.target.dataset.name // 形参后的.target.dataset.name  加上属性名name
	return {
		title: item.companyName,
		path: '/pages/index/shopMap',
		imageUrl:item.logo,
		}
	},

到了这里，关于小程序分享功能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！