關于(yu)小程序的分(fen)享(xiang)按鈕

在做項目(mu)的過程中，有這么一需求(qiu)，

用戶A可(ke)以將當前的商品分享給別的用戶B，

用戶B點擊(ji)查看時，可以(yi)直接定位到當前的(de)商品。

經過一番學(xue)習，找到了 button 控件中的(de)  open-type='share' 

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

小程序文檔(dang)：//developers.weixin.qq.com/miniprogram/dev/component/button.html

步驟一、

先在界面上，放置 button 按鈕，并綁定函數 "shareView" （建議用 catchtap 綁定 ，不用 bindtap 防止點擊冒泡）
 

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

步驟二、

定義點擊之后的函數(shu)(shu)操作(zuo)（函數(shu)(shu)名：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組件的樣式(shi)(shi)會有(you)沖突(tu)， 下面(mian)代碼就是更(geng)改button組件的樣式(shi)(shi)的：

button::after {
  border: none;
}

button {
  background-color: #fff;
}