微信小程式 action-sheet元件 + 分享程式碼實現
阿新 • • 發佈:2019-02-12
這幾天遇到一個問題,就是使用微信小程式自帶的元件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中放入分享按鈕,這樣就可以實現操作列表中分享小程式功能。