小程序wx.showActionSheet 调起转发分享

Posted vinsonh

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了小程序wx.showActionSheet 调起转发分享相关的知识,希望对你有一定的参考价值。


wx.showActionSheet() 方法中无法调取转发功能。
因为转发必须是 button 按钮 设置open-type="share", 会调取page.onShareAppMessage()。

自定义action-sheet

<!-- 定义一个action-sheet, 通过hidden控制显示隐藏。 -->
<action-sheet hidden="{{state.actionSheetHidden}}" bindchange="actionSheetChange"> 

  <!-- action-sheet-item 是每个 item -->
  <action-sheet-item class="item" data-id="{{state.itemData.shop_id}}">
      <button open-type="share">{{state.actionSheetItems[0]}}        
      </button>
  </action-sheet-item>

  <action-sheet-item bindtap="showShareImageModal">{{state.actionSheetItems[1]}}</action-sheet-item>

  <!-- action-sheet-cancel 是取消按钮。 -->
  <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

 


或者通过map进行控制。

.xml

<!-- actionSheetItems: [{bindTap: ‘Menu1‘, text: "发给微信好友"}, {bindTap: ‘Menu2‘, text: "生成分享图片"}]; -->

<action-sheet hidden="{{state.actionSheetHidden}}" bindchange="actionSheetChange">
  <!-- 自定义 转发按钮 -->
  <action-sheet-item class="item">
    <button open-type="share">{{state.actionSheetItems[0].text}}</button>
  </action-sheet-item>

  <!-- 剩下的item -->
  <block wx:for-items="{{state.actionSheetItems}}">
    <action-sheet-item bindtap="actionSheet{{item.bindTap}}" wx:if="{{index !== 0}}">{{item.text}}</action-sheet-item>
  </block>

  <!--取消按钮-->
  <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>

 

.js

// 右上角分享按钮, 点击弹出弹窗,选择发给微信好友 或 生成分享图片。
var shareModeData = [{bindTap: ‘Menu1‘, text: "发给微信好友"}, {bindTap: ‘Menu2‘, text: "生成分享图片"}];
constructor(props) {
  super(props);
  this.state = {
    actionSheetHidden: true, // 控制分享弹窗modal
    actionSheetItems: shareModeData, // 弹窗展示数据
  }
}
onShareAppMessage() {
  let share_url = ‘/pages/index/index‘
  let imageUrl = ‘https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1650310964,3049609459&fm=173&app=25&f=JPEG?w=439&h=401&s=17B056855A6786CC443835B90300C001‘
  return {
    title: ‘我发现了一个不错的商品,快来看看吧!~~‘
    path: share_url,
    imageUrl: imageUrl,
    success: (res) => {
      // 转发成功
      console.log("分享成功", res)
    },
    fail: (err) => {
      // 转发失败
      console.log("分享失败", err)
    }
  }
}
// 显示分享弹窗。
showShareModal(e) {
  this.setState({
    actionSheetHidden: !this.state.actionSheetHidden
  });
}
// 改变 action-sheet状态。
actionSheetChange(e) {
  this.setState({
    actionSheetHidden: !this.state.actionSheetHidden
  });
}
// 分享弹窗 中item bindTap对应的方法。
actionSheetMenu2() {
  this.showShareImageModal();
}

 


使用的labrador 框架
所以js中用的不是this.setDate, 而是this.setState。
xml 中取page中的数据不是直接 {{variable}}, 而是{{state.variable}}。








以上是关于小程序wx.showActionSheet 调起转发分享的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序展示弹窗的方式

小程序 - 音频

Taro/JS/H5/小程序:解决小程序微信支付统一下单和调起支付

微信小程序----用户拒绝授权,重新调起授权

微信小程序调起支付API

uniapp 小程序 获取地图经纬度 + 调起腾讯地图用法