微信小程序悬浮可拖动客服组件

青旅半醒 2022-12-29 04:34 277阅读 0赞

写了一个微信小程序里面的悬浮可拖动的客服组件，下次可以直接使用了。

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>

发表评论取消回复

表情：

评论列表（有 0 条评论，277人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序客服使用指南

客服消息使用指南为丰富小程序的服务能力，提高服务质量，微信为小程序提供客服消息能力，以便小程序用户可以方便快捷地与小程序服务提供方进行沟通。功能介绍用户可使

约定不等于承诺〃/ 2023年10月14日 01:28/ 0 赞/ 58 阅读

相关 33.微信小程序（组件--表单：按钮微信开放能力与客服）

微信小程序（组件–表单：按钮微信开放能力与客服）前言本节主要讲解下按钮组件之open-type —微信开放能力常用属性值 ①contact客户会话 ②s

系统管理员/ 2023年03月02日 10:08/ 0 赞/ 36 阅读

相关微信小程序悬浮可拖动客服组件

写了一个微信小程序里面的悬浮可拖动的客服组件，下次可以直接使用了。 movable-area 和movable-view 用法参考微信官方手册：https://develop

青旅半醒/ 2022年12月29日 04:34/ 0 赞/ 278 阅读

相关微信小程序客服消息

验签在下面一步微信小程序后台开发设置的时候前提是此接口已经完成、否则微信小程序会验签失败！ package com.cong.controller;

清疚/ 2022年11月26日 07:38/ 0 赞/ 291 阅读

相关微信小程序客服功能

1、在页面中使用以下代码可以显示进入客服会话按钮。 <button open-type="contact"> 客服</button> 2、在微信公众平台中添加客

我就是我/ 2022年11月05日 08:39/ 0 赞/ 201 阅读

相关微信小程序—contact-button(客服)

客服会话按钮，用于在页面上显示一个客服会话按钮，用户点击该按钮后会进入客服会话。效果图如下， ![这里写图片描述][SouthEast] 1.index.wxml中：

- 日理万妓/ 2022年05月22日 11:10/ 0 赞/ 240 阅读

相关微信小程序-组件悬浮

字节跳动校招内推码: C4BDSMC 投递链接: https://job.toutiao.com/s/J691fRK 内推交流QQ群：104917572

男娘i/ 2022年05月18日 05:49/ 0 赞/ 406 阅读

相关微信小程序拖动组件：movable-view

原文：[https://www.jianshu.com/p/dd4feb9cc74f][https_www.jianshu.com_p_dd4feb9cc74f] 此次的更新

╰半橙微兮°/ 2022年03月07日 11:41/ 0 赞/ 327 阅读

相关微信小程序之可拖动悬浮按钮的实现

微信小程序之可拖动悬浮按钮的实现什么都不说先看效果图 ![在这里插入图片描述][20190321173621284.gif] 下面上代码 wxml

柔情只为你懂/ 2022年03月01日 04:38/ 0 赞/ 1195 阅读

相关微信小程序客服系统

[微信公众平台][Link 1] 点击客服添加 [微信文档-接收消息和事件][-] 在页面中使用第三方客服系统芝麻小客服填写对应的 appid && Ap

忘是亡心i/ 2021年09月20日 05:42/ 0 赞/ 323 阅读