1. 程式人生 > >小程序wx.showActionSheet 調起轉發、分享

小程序wx.showActionSheet 調起轉發、分享

成功 XML aid modal hid stat oda ndt turn


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 調起轉發、分享