微信小程序官方api中提到的微信客服，是一个固定的组件，图标样式固定，大小最多27px 很明显这个是不能满足我们各种奇葩需求的。下面提供一个野蛮的自定义方法。

比如做一个这样的按钮:

图标用自定义的，并且点击整个按钮区域都能跳转微信客服

第一步：在按钮中放N个contact-button标签，尽量铺满容器，按钮用relative定位，contact-button用absolute定位

第二步：将contact-button样式设置纯透明 opacity: 0;(o゜▽゜)o☆[BINGO!]

微信小程序自定义微信客服按钮的更多相关文章

  1. 小程序中添加客服按钮contact-button

    小程序的客服系统,是微信做的非常成功的一个功能,开发者可以很方便的通过一行代码,就可实现客服功能. 1. 普通客服按钮添加 <button open-type='contact' session ...

  2. 微信小程序 功能函数 客服

    <view> <view class='btn-img'> <image class='image-full' src='../../imgs/index/tab6.pn ...

  3. 微信小程序 自定义单选复选按钮组的实现(用于实现购物车产品列表功能)

    (一)单选按钮组 模型图如下: index.js Page({ data: { parameter: [{ id: 1, name: '银色' }, { id: 2, name: '白色' },{ i ...

  4. 【微信小程序】：客服消息教程

    1.本教程完全链接W3Cschool的教程,已经讲的非常清晰和透彻. 2.链接:https://www.w3cschool.cn/weixinapp/weixinapp-api-custommsg-c ...

  5. 微信小程序自定义Tabber，附详细源码

    目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码 ...

  6. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  7. 微信小程序——自定义导航栏

    微信头部导航栏可能通过json配置: 但是有时候我们项目需求可能需要自定义头部导航栏,如下图所示: 现在具体说一下实现步骤及方法: 步骤: 1.在 app.json 里面把 "navigat ...

  8. 微信小程序自定义弹窗wcPop插件|仿微信弹窗样式

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的 ...

  9. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

随机推荐

  1. 100M双绞线接头的标准接法

     双绞线接头(RJ45)针脚号码定义

  2. ML: 降维算法-LDA

    判别分析(discriminant analysis)是一种分类技术.它通过一个已知类别的“训练样本”来建立判别准则,并通过预测变量来为未知类别的数据进行分类.判别分析的方法大体上有三类,即Fishe ...

  3. Xshell存在后门

    Xshell 它是一款终端模拟软件,由NetSarang公司出品,支持SSH1.SSH2和Windows系统中Telnet协议. 简介 卡巴斯基实验室在8月7日发现Xshell软件中的nssock2. ...

  4. Set ARITHABORT Option设置为ON

    MSDN注释中提到,应该总是将Set ARITHABORT Option设置为ON,原因有四: 1,如果SSMS和application client的设置不同,那么会导致application cl ...

  5. 【Maven】从Maven中导出项目依赖的Jar包

    从SVN上下载源代码 svn export https://10.200.1.201/xxxx/PLATFORM code/ --force --username xxx --password xxx ...

  6. ==和is

    is是比较两个引用是否指向了同一个对象(引用比较) ==是比较两个对象是否相等 数字在:-5~256之间的时候用来赋值的内存地址是不变的

  7. hadoop-n.x.y.tar.gz、hadoop-n.x.y.tar.gz.asc 、hadoop-n.x.y.tar.gz.md5 、hadoop-n.x.y.tar.gz.mds分别是什么？

    不多说,直接上干货! 我这里,以hadoop-2.6.0为例. hadoop-n.x.y.tar.gz.mds,此mds文件是为了检验在下载和移动文件过程中文件的完整性. 通过验证文件的md5值去检验 ...

  8. Java-Runoob-高级教程-实例-时间处理：04. Java 实例 - 时间戳转换成时间

    ylbtech-Java-Runoob-高级教程-实例-时间处理:04. Java 实例 - 时间戳转换成时间 1.返回顶部 1. Java 实例 - 时间戳转换成时间  Java 实例 以下实例演示 ...

  9. WordPress无法显示Gravatar头像的解决方法

    最近捣鼓WordPress博客发现无法正常显示Gravatar头像,查找原因是因为国内屏蔽了Gravatar导致的,这导致无数国内Wordpress网站头像无法显示,并且影响到了相关页面的访问速度(如 ...

  10. 基于JavaScript 声明全局变量的三种方式详解

    原文地址:http://www.jb51.net/article/36548.htm JS中声明全局变量主要分为显式声明或者隐式声明下面分别介绍. 声明方式一: 使用var(关键字)+变量名(标识符) ...