微信小程式懸浮可拖動客服元件

寫了一個微信小程式裡面的懸浮可拖動的客服元件，下次可以直接使用了。

movable-area 和movable-view 用法參考微信官方手冊：https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html

kefu.js

Component({
properties: {},
data: {
x: 250,//定位X軸位置
y: 250//定位Y軸位置
},
pageLifetimes: {
show: function() {
var that = this;
wx.getSystemInfo({
success: function(res) {
that.setData({
x: res.windowWidth - 50,
y: res.windowHeight /2+50
})
},
fail: function(res) {},
complete: function(res) {},
})

},
hide: function() {},
resize: function() {},
},
methods: {},

});

kefu.wxss

movable-area{
width: 100%;
height:100%;
/*設定透明不影響後面的操作*/
pointer-events: none;
position:fixed;
text-align: center;
right:0px;
top:0px;
background: none;
}
.kefu, .kefuIcon {
width: 45px;
height: 45px;
border: none;
padding: 0;
background: none;
}
.kefu image {
max-width: 100%;
max-height: 100%;
}

.kefu button::after {
border: none;
}

kefu.wxml

<movable-area>
<movable-view x='{{x}}' y='{{y}}' direction="all" style="pointer-events: auto;">
<button open-type="contact" bindcontact="handleContact" class="kefu">
<image src='../../images/icon/kefu.png' class="kefuIcon"></image>
</button>
</movable-view>
</movable-area>

需要引入客服的頁面的json配置：

{
    "component": true,
    "usingComponents": {
        "v-kefu": "/components/kefu/kefu"
    }
}

wxml頁面呼叫：

<v-kefu></v-kefu>