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

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

场景

小程序分享功能是小程序必不可少也是实现裂变引流的功能，那么在使用分享的过程中会遇到那些问题呢？

基本使用

小程序使用wx.showShareMenu来开启分享功能，主要有两个参数，‘shareAppMessage’,和’shareTimeline’，shareAppMessage是开启分享好友功能，shareTimeline是分享到朋友圈功能。

wx.showShareMenu({
  withShareTicket: true,
  menus: ['shareAppMessage', 'shareTimeline']
})

注意事项

分享回调中需要三个参数值，一是path路径，需要携带参数，因为分享功能一般的注重点是活动裂变，通过分享点击来获取积分奖励；二是title标题，用于分享时弹框显示的标题内容；三是 imageUrl转发图片，也是用于分享时弹框显示的标题底部图片；
在小程序原生语法中，分享使用的形式为this.data.XXX,在wepy和mpvue中分享也需要使用this.data.XXX,这其中的原因暂时没有分析
分享功能是页面独有的功能，组件没有该功能，但是当页面引用了带有分享按钮的组件时，微信小程序会处理把页面中的分享回调当成分享功能处理，在官方文档中，也有类似的示例，同时还能传递需要的参数到回调中。
分享好友可以自定义path路径，在点击后跳转到其他页面，分享朋友圈不能定义路径，默认跳转当前页面，同时自定义传参需要使用query传递。

// 好友
ShareAppMessage() {
	return {
		title: '自定义转发标题',
		path: '/page/user?id=123',
	}
}

// 朋友圈
onShareTimeline: function () {
     return {
         title: "",
         query: {
              key: value
          },
         imageUrl: ""
     }
},

引申：
在小程序分享功能中，一般产品会需要在底部栏加一个固定的横幅，用于展示用户信息和一个button=share的分享按钮，如果是普通的页面，我们直接编码加定位就能实现，但是有时候小程序内部的页面是通过webview标签来展示的第三方内容，在官方文档中，有说明webview默认层级是最高的，无法通过外部修改，这样就会导致底部栏无法显示，但是在百度解决方案时，我们能发现，有同行发现了用原生的标签确实能解决这个问题，至于这是不是一个微信自己的bug，还不知晓，下面主要介绍这种解决方法。
在webview的页面，我们可以使用cover-view和cover-img来实现盒子层级在webview之上，注意的是cover-view内部只能有cover-view、cover-img和buttton标签，在需要的盒子上使用fixed来定位，得到我们的效果。（注意:在微信开发者工具开发时，我们是看不到上面的效果的，自定义盒子会被webview遮挡，只能在真机上才能展示）
代码示例：文章来源地址https://www.toymoban.com/news/detail-624734.html

<web-view src="https://www.forguo.com">
     <cover-view class="tool-bar">
         <cover-image src="../../common/imgs/nav-bg.png" class="nav-bg"></cover-image>
         <cover-view class="tool-btn">
             <cover-view>我的</cover-view>
             <cover-view>订单</cover-view>
         </cover-view>
     </cover-view>
 </web-view>