小程序模板網(wǎng)

微信小程序使用button按鈕分享

發(fā)布時(shí)間:2021-07-09 09:38 所屬欄目:小程序開發(fā)教程

關(guān)于小程序的分享按鈕

在做項(xiàng)目的過(guò)程中,有這么一需求,

用戶A可以將當(dāng)前的商品分享給別的用戶B,

用戶B點(diǎn)擊查看時(shí),可以直接定位到當(dāng)前的商品。

經(jīng)過(guò)一番學(xué)習(xí),找到了 button 控件中的  open-type='share' 

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

小程序文檔:https://developers.weixin.qq.com/miniprogram/dev/component/button.html

步驟一、

先在界面上,放置 button 按鈕,并綁定函數(shù) "shareView" (建議用 catchtap 綁定 ,不用 bindtap 防止點(diǎn)擊冒泡)
 

<button catchtap="shareView" open-type='share'>分享</button>
步驟二、

定義點(diǎn)擊之后的函數(shù)操作(函數(shù)名:shareView)

shareView:function(e)
{ 
    return { 
        title: 'xx小程序',//分享內(nèi)容(為空則為當(dāng)前頁(yè)面文本)
        path: 'pages/index/index?id=123&age=18',//分享地址 路徑,傳遞參數(shù)到指定頁(yè)面。(為空則為當(dāng)前頁(yè)面路徑)
        imageUrl: '../../imgs/xx.png',//分享的封面圖(為空則為當(dāng)前頁(yè)面)

    success: function (res) {
      console.log("轉(zhuǎn)發(fā)成功:" + JSON.stringify(res));
    },
    fail: function (res) {
      console.log("轉(zhuǎn)發(fā)失敗:" + JSON.stringify(res));
    }
    } 
}

步驟三、

一般自定義按鈕和button組件的樣式會(huì)有沖突, 下面代碼就是更改button組件的樣式的:

button::after {
  border: none;
}

button {
  background-color: #fff;
}
 


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/27086.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢