微信小程序添加悬浮在线客服会话按钮
微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用。客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。那么如何自定义成悬浮客服会话按钮呢?随Z5Win一起来看看
1.我们可以定义contact-button的样式,加一个class。这个客服组件可以放在一个固定模板里,方便每个页面都调用到。
<view>
<contact-button class="img-plus-style zindex100 yc"></contact-button>
<image src="../../images/kefu.png" class="img-plus-style"></image>
</view>
2.在app.wxss或其他文件里增加样式
.img-plus-style {
height: 70rpx;
width: 70rpx;
position: fixed;
bottom: 200rpx;
right: 13rpx;
opacity: 0.7
}
.zindex100{z-index: 100}
.yc{opacity: 0}
3.上传自定义的客服图标
4.当然你也可以调用拨打电话的功能,只要在图片里加一个bindtap=”calling”属性
<view>
<contact-button class="img-plus-style zindex100 yc"></contact-button>
<image src="../../images/kefu.png" class="img-plus-style" bindtap="calling"></image>
</view>
然后再定义一个calling的js function,比如在tel.js文件里
calling: function () {
wx.makePhoneCall({
phoneNumber: ‘10086’,
})
}
微信小程序添加悬浮在线客服会话按钮就实现了,感兴趣的朋友可以试试
微信小程序添加悬浮在线客服会话按钮的更多相关文章
- 微信小程序wx.showActionSheet调用客服信息功能
微信小程序wx.showActionSheet调用客服消息功能 官方文档的代码: wx.showActionSheet({ itemList: ['A', 'B', 'C'], success (re ...
- 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作
图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...
- 微信小程序--简约风博客小程序(基于云开发 - 全开源)
微信小程序--简约风博客小程序(基于云开发 - 全开源) 项目启动纯属突发奇想,想看看博客小程序,例如wehalo博客小程序,但是感觉自建平台还要浪费自己的服务器算力,还没有访问量,省省吧. 本着白嫖 ...
- 微信小程序添加外部地图服务数据
先上效果: 缘起 使用微信小程序做地图相关功能的时候,有个需求是需要接入自己发布的地图服务.查看微信小程序地图组件文档,发现它对地图相关的支持很少,只有一些基础功能,比如添加点.线.面.气泡和一些常规 ...
- 微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)
问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是c ...
- 微信小程序添加卡券到微信卡包,使用wx.addCard()方法传参及整体流程
一.准备: 1.经微信认证过的微信公众号. 2.经微信认证过的微信小程序号. 先来看看微信小程序官方的文档,https://developers.weixin.qq.com/miniprogram/d ...
- 微信小程序添加背景图片的坑
给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客 https://blog.csdn.net/y ...
- 网页中添加QQ在线客服
方法一:调用本地已安装的QQ进行会话 <a href='tencent://message/?uin=QQ号码&Site=网站地址&Menu=yes'></a> ...
- 微信小程序添加、删除class’
终于等到公司开发小程序了,学习的时候不觉得有什么,实际开发就会出现各种问题. 今天第一天开发就遇到问题了. 项目需求,要一个平时的nav导航栏,这玩意用jQuery两行代码解决了,可是小程序不允许操作 ...
随机推荐
- swoole web服务
web.php <?php $http = ); $http->on('request', function ($request, $response) { var_dump($reque ...
- php文件缓存方法总结
为大家分享很全的php文件缓存,供大家参考,具体内容如下 <?php class cache { private static $_instance = null; protected ...
- JS编程题
1.计算给定数组 arr 中所有元素的总和 (数组中的元素均为 Number 类型) function sum(arr) { var sum=0; for (var i=arr.length-1; i ...
- POJ 3249 Test for Job
Test for Job Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 13457 Accepted: 3100 Descrip ...
- JVM源码分析之栈溢出完全解读
概述 之所以想写这篇文章,其实是因为最近有不少系统出现了栈溢出导致进程crash的问题,并且很隐蔽,根本原因还得借助coredump才能分析出来,于是想从JVM实现的角度来全面分析下栈溢出的这类问题, ...
- [Asp.net]缓存简介
写在前面 针对一些经常访问而很少改变的数据,使用缓存,可以提高性能.缓存是一种用空间换取时间的技术,说的直白点就是,第一次访问从数据库中读取数据,然后将这些数据存在一个地方,比如内存,硬盘中,再次访问 ...
- 读《Spring源码深度解析》途中问题1
step 1:检查自己的eclipse版本:在help->About Eclipse中查看: step 2:进入 https://github.com/groovy/groovy-eclipse ...
- .NET Core开发日志——Model Binding
ASP.NET Core MVC中所提供的Model Binding功能简单但实用,其主要目的是将请求中包含的数据映射到action的方法参数中.这样就避免了开发者像在Web Forms时代那样需要从 ...
- AD 16 下绘图的几个技巧
1.绘制封装如果引脚过多怎么办,使用阵列粘贴功能 首先建立一个焊盘,然后选中,使用 ctrl + c 复制,注意复制确认的时候,鼠标一定要点击到焊盘中间. 选择阵列粘贴 条款就是你要复制多少个,增量就 ...
- IAR 路径导致的错误
Error while running "c:\ti\simplelink_cc2640r2_sdk_1_50_00_58\..\xdctools_3_50_03_33_core\xs&qu ...