微信小程序使用button按鈕分享
發布時間：2021-07-09 09:38 所屬欄目：小程序開發教程
關于小程序的分享按鈕
在做項目的過程中，有這么一需求，
用戶A可以將當前的商品分享給別的用戶B，
用戶B點擊查看時，可以直接定位到當前的商品。
經過一番學習，找到了 button 控件中的 open-type='share'
<button open-type='share'>分享</button>
小程序文檔：https://developers.weixin.qq.com/miniprogram/dev/component/button.html
步驟一、
先在界面上，放置 button 按鈕，并綁定函數 "shareView" （建議用 catchtap 綁定 ，不用 bindtap 防止點擊冒泡）
<button catchtap="shareView" open-type='share'>分享</button> |
步驟二、
定義點擊之后的函數操作（函數名：shareView）
shareView:function(e)
{
return {
title: 'xx小程序',//分享內容(為空則為當前頁面文本)
path: 'pages/index/index?id=123&age=18',//分享地址 路徑，傳遞參數到指定頁面。(為空則為當前頁面路徑)
imageUrl: '../../imgs/xx.png',//分享的封面圖(為空則為當前頁面)
success: function (res) {
console.log("轉發成功:" + JSON.stringify(res));
},
fail: function (res) {
console.log("轉發失敗:" + JSON.stringify(res));
}
}
} |
步驟三、
一般自定義按鈕和button組件的樣式會有沖突， 下面代碼就是更改button組件的樣式的：
button::after {
border: none;
}
button {
background-color: #fff;
} |
