? ? ? ?這幾天遇到一個問題，就是使用微信小程序自帶的組件wx.showActionSheet(object)，并且在這里添加分享按鈕，但查看了小程序API文檔后發現，分享功能調用的onShareAppMessage(options) 函數，設置該頁面的轉發信息。

微信小程序API文檔：https://developers.weixin.qq.com/miniprogram/dev/api/

先介紹下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>

---

JSPage({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中放入分享按鈕，這樣就可以實現操作列表中分享小程序功能。

?

總結

以上是生活随笔為你收集整理的微信小程序 action-sheet组件 + 分享代码实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。