Day10-微信小程式實戰-交友小程式-自定義callPhone 和copyText元件

阿新 • • 發佈：2020-06-22

---為了方便使用者可以撥打電話和複製微訊號（下面就要實現這樣的兩個功能）

注意:在小程式中是沒辦法直接的新增使用者的微信的，所以就只能是複製微訊號

（這種東西的話可以直接去做，也可以做成元件，做出元件的好處就是可以在其他地方也可以用的）

下面也演示瞭如何建立一個元件

在components下面，新建一個callPhone目錄，然後在這個目錄下面新建一個callPhone的component檔案

然後如果要在detail詳情頁面中使用的話，就可以點開detail.json配置檔案

 "usingComponents": {

    "call-phone" : "/components/callPhone/callPhone"
 

  }

元件的名字就是key ，value就是元件的絕對地址

配置好了之後，就可以直接在wxml中通過 <call-phone />來引入了

然後就要對元件進行樣式的設定啦
如果是撥打電話的話，就直接用一個圖示來表示即可了

會發現：我們在detail.json裡面引入了這個元件了，然後在callPhone元件中也設定了樣式

<text class="iconfont icondadianhua"></text>

但是在detail頁面中並沒有顯示出來

因為iconfont是定義在外面的，其實也是全域性的，如果要在元件裡面引用的話，還要進行額外的設定才行的，檢視微信開發檔案

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

Component({

  options: {

    styleIsolation: 'isolated'

  }

})

styleIsolation選項從基礎庫版本2.6.5開始支援。它支援以下取值：

isolated表示啟用樣式隔離，在自定義元件內外，使用 class 指定的樣式將不會相互影響（一般情況下的預設值）；
apply-shared表示頁面 wxss 樣式將影響到自定義元件，但自定義元件 wxss 中指定的樣式不會影響頁面；

shared表示頁面 wxss 樣式將影響到自定義元件，自定義元件 wxss 中指定的樣式也會影響頁面和其他設定了apply-shared或shared的自定義元件。（這個選項在外掛中不可用。）

其中：apply-shared就是我們想要的了（選擇它之後，咱們就可以把外部的樣式傳入進來了）

之後就是要進行父子通訊了，要把電話號碼傳入到這個元件內部去，可以寫一個自定義屬性來實現

 <call-phone phoneNumber="{{ detail.phoneNumber }}" />

通過這個就可以，使得不同的使用者可以傳不同的電話號碼給這個元件了

然後把電話號碼傳過去之後

在元件中的properties 是用來接受傳過來的引數的，然後還要指定資料的型別

再把呼叫的方法寫到methods裡面

對元件中的wxml 新增一個點選事件 handleCallPhone 方法，然後在methond裡面定義即可了

之後就要看微信提高給我們撥打電話的介面API了

在開放檔案裡面

https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html

wx.makePhoneCall({

  phoneNumber: '1340000' //僅為示例，並非真實的電話號碼

})

  methods: {

    handleCallPhone(){

      wx.makePhoneCall({

        phoneNumber: this.data.phoneNumber

      })

    }

  }

以上就是對撥打電話這個元件的設計了

下面，就是複製微訊號元件的設計了

同理的和打電話一樣設定，元件然後到detail.json檔案裡面把元件引入，在detail.wxml中使用，記得自定義一個屬性把微訊號傳到元件中去

然後在元件的js檔案中properties定義傳過來的引數的資料型別，設定樣式共享，然後在元件的wxml中設定我們在iconfont中的複製圖示，即可看到如下效果了

然後就是給元件的wxml加一個點選事件，再到js檔案裡面定義這個方法即可了

這個方法就是微信提供的剪貼簿

 handleCopyText(){

      wx.setClipboardData({

        data:this.data.copyText,

        success(res){

          wx.getClipboardData({

            success(res){

              wx.showToast({

                title: '複製成功',

              })

            }

          })

        }

      });

    }