這幾天遇到一個問題，就是使用微信小程式自帶的元件wx.showActionSheet(object)，並且在這裡新增分享按鈕，但查看了小程式API文件後發現，分享功能呼叫的onShareAppMessage(options) 函式，設定該頁面的轉發資訊。

先介紹下Page.onShareAppMessage：

示例程式碼：

Page({
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123'
    }
  }
})
 

         只要呼叫onShareAppMessage，在小程式頁面中就可以在右上角點選轉發功能。然後需要在頁面中定義按鈕點選，彈出轉發介面，而不是通過右上角的轉發，所以需要我們在頁面中新增button按鈕。

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

接下來說下wx.showActionSheet：

示例程式碼：

wx.showActionSheet({
  itemList: ['A', 'B', 'C'],
  success: function(res) {
    console.log(res.tapIndex)
  },
  fail: function(res) {
    console.log(res.errMsg)
  }
})
 

這樣可以實現彈出操作列表，如下圖：

那麼問題來了，在wx.showActionSheet中無法直接新增分享按鈕，在百度上查了後也說利用這個無法直接實現分享功能，只用通過自定義的action-sheet元件才能夠實現，於是我就重新開始寫。

wxml

<button @tap="listenerButton">
    <icon class="icon fa fa-external-link"></icon>分享
</button>

<!--預設action-sheet為隱藏，由button觸發-->
<action-sheet hidden="{{actionSheetHidden}}" bindchange="listenerActionSheet">
   <action-sheet-item>
         <button open-type="share">分享給好友</button>
   </action-sheet-item>
   <action-sheet-item>生成分享卡片</action-sheet-item>
   <!--自動隱藏action-sheet-->
   <action-sheet-cancel>取消</action-sheet-cancel>
</action-sheet>
 

JS

Page({
    data:{
      // text:"這是一個頁面"
      actionSheetHidden: true,
    },
    listenerButton: function() {
        this.setData({
            actionSheetHidden: !this.data.actionSheetHidden
        });
    },
    listenerActionSheet:function() {
      this.setData({
        actionSheetHidden: !this.data.actionSheetHidden
      })
    },
    onLoad:function(options){
      // 頁面初始化 options為頁面跳轉所帶來的引數
    },
    onReady:function(){
      // 頁面渲染完成
    },
    onShow:function(){
      // 頁面顯示
    },
    onHide:function(){
      // 頁面隱藏
    },
    onUnload:function(){
      // 頁面關閉
    }
})

在action-sheet-item中放入分享按鈕，這樣就可以實現操作列表中分享小程式功能。