微信小程序 action-sheet组件 + 分享代码实现
? ? ? ?這幾天遇到一個問題，就是使用微信小程序自帶的組件wx.showActionSheet(object)，并且在這里添加分享按鈕，但查看了小程序API文檔后發(fā)現(xiàn)，分享功能調(diào)用的onShareAppMessage(options) 函數(shù)，設(shè)置該頁面的轉(zhuǎn)發(fā)信息。
微信小程序API文檔：https://developers.weixin.qq.com/miniprogram/dev/api/
先介紹下Page.onShareAppMessage：
示例代碼：
Page({onShareAppMessage: function (res) {if (res.from === 'button') {// 來自頁面內(nèi)轉(zhuǎn)發(fā)按鈕console.log(res.target)}return {title: '自定義轉(zhuǎn)發(fā)標(biāo)題',path: '/page/user?id=123'}} })???????? 只要調(diào)用onShareAppMessage，在小程序頁面中就可以在右上角點擊轉(zhuǎn)發(fā)功能。然后需要在頁面中定義按鈕點擊，彈出轉(zhuǎn)發(fā)界面，而不是通過右上角的轉(zhuǎn)發(fā)，所以需要我們在頁面中添加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)} })這樣可以實現(xiàn)彈出操作列表，如下圖：
那么問題來了，在wx.showActionSheet中無法直接添加分享按鈕，在百度上查了后也說利用這個無法直接實現(xiàn)分享功能，只用通過自定義的action-sheet組件才能夠?qū)崿F(xiàn)，于是我就重新開始寫。
wxml<button @tap="listenerButton"><icon class="icon fa fa-external-link"></icon>分享 </button><!--默認(rèn)action-sheet為隱藏，由button觸發(fā)--> <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為頁面跳轉(zhuǎn)所帶來的參數(shù)},onReady:function(){// 頁面渲染完成},onShow:function(){// 頁面顯示},onHide:function(){// 頁面隱藏},onUnload:function(){// 頁面關(guān)閉} })
在action-sheet-item中放入分享按鈕，這樣就可以實現(xiàn)操作列表中分享小程序功能。
?
總結(jié)
以上是生活随笔為你收集整理的微信小程序 action-sheet组件 + 分享代码实现的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： oracle的left join和inn
- 下一篇： 里恩EDC论临床试验中与第三方中心实验室