So fügen Sie dem WeChat-Miniprogramm eine Kundendienstschaltfläche hinzu

Dieses Mal zeige ich Ihnen, wie Sie eine Kundendienstschaltfläche zum WeChat-Miniprogramm hinzufügen und welche Vorsichtsmaßnahmen für das Hinzufügen einer Kundendienstschaltfläche zum WeChat-Miniprogramm gelten. Hier ist ein praktischer Fall , lass uns einen Blick darauf werfen.

1. Fügen Sie eine normale Kundendienstschaltfläche hinzu

 <button open-type=&#39;contact&#39; session-from=&#39;&#39;>客服-联系我们</button>

2. Fügen Sie eine schwebende Kundendienstschaltfläche hinzu und passen Sie das Bild an

Wenn Sie sich die Karte ansehen, gibt es eine Bildressource für den Kundenservice. Gehen Sie einfach auf die Iconfont-Website, um eine zu finden.

index.wxml

<button class="kf_button" open-type="contact" session-from="weapp">
 <image class="kf_image" src="../../resources/img/kf.PNG"></image>
</button>

index.wxss

.kf_button{
 background-color: rgba(255, 255, 255, 0);
 border: 0px;
 height: 100rpx;
 right: 0;
 bottom: 20rpx;
 position: fixed;
}
.kf_button::after{
 border: 0px;
}
.kf_image{
 z-index: 9999;
 width: 100rpx;
 height: 100rpx;
}

Ich glaube, Sie haben die Methode gemeistert, nachdem Sie den Fall in diesem Artikel gelesen haben. und es gibt noch mehr spannende Dinge. Bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie man eine Vue-Baidu-Map erstellt, um die Seite aufzurufen und automatisch zu positionieren

Wie um Vue2.0 zu verwenden Rufen Sie die Kamera an, um Bilder aufzunehmen

Das obige ist der detaillierte Inhalt vonSo fügen Sie dem WeChat-Miniprogramm eine Kundendienstschaltfläche hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!