实现微信小程序转发，分享给朋友（自定义类似showActionSheet，onShareAppMessage）

本文链接：https://blog.csdn.net/a13849911849/article/details/138537821

本想直接用 wx.showActionSheet 省的去实现下图功能，但是我想做【转发给朋友】这个功能，又因为wx.showActionSheet不是button尝试各种方法不好使转不了，索性直接造一个类似wx.showActionSheet功能，用着也方便。

功能如下图所示：（右图是小程序开发者工具触发，手机触发是有朋友列表，没放图可自行尝试）

一：wxml代码

<view bind:tap="forWard">转发</view>
<view class="overlay" hidden="{{!showMenu}}"></view>
<view class="menu" hidden="{{!showMenu}}">
    <!-- 我想实现点击转发给朋友，所以这里用button里边的share,很方便js不用写什么，只需要控制显示/隐藏 -->
     <button class="menu-item" bindtap="handleShareFriend" open-type="share">转发给朋友</button>
     <view class="menu-item" bindtap="handleCreatePoster">生成海报</view>
     <view class="menu-item cancel" bind:tap="hideMenu">取消</view>
</view>

二：wxss代码

/* 菜单样式 */
.menu {
  position: fixed;
  bottom: 0%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  width: 100%;
}

.menu-item {
  padding: 32rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
}

.menu-item:first-child {
  border-top-left-radius: 32rpx;
  border-top-right-radius: 32rpx;
  width: 100%;
  margin: 0;
  background-color: #FFFFFF;
  font-size: 32rpx;
  font-weight: 500;
}

.menu-item:last-child {
  border-bottom-left-radius: 16rpx;
  border-bottom-right-radius: 16rpx;
}

.menu-item:not(:last-child) {
  border-bottom: 1px solid #eee;
}

.cancel {
  color: #999;
  border-top: 16rpx solid #eee;
}

三：js代码（我这里没有自定义onShareAppMessage，但是转发后的链接可以准确找到分享位置，所以我就省略了）

// pages/options/mainHome_video/mainHome_video.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 用于显示/隐藏
    showMenu: false
  },

  // 转发
  forWard(){
    this.setData({
      showMenu:true
    })
  },
  // 生成海报
  handleShareFriend(){
    this.setData({
      showMenu: false
    })
  },
  // 取消
  hideMenu(){
    this.setData({
      showMenu:false
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
   
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})