微信小程序官方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. pyhanlp 文本聚类详细介绍

    文本聚类 文本聚类简单点的来说就是将文本视作一个样本,在其上面进行聚类操作.但是与我们机器学习中常用的聚类操作不同之处在于. 我们的聚类对象不是直接的文本本身,而是文本提取出来的特征.因此如何提取特征 ...

  2. 用shell通过jps -m来杀死进程

    #!/bin/sh ### find pid jps=`jps -m` echo "$jps"|while read i do if[[ $i =~"agentTestT ...

  3. ubuntu-docker入门到放弃（一）docker的安装

    基于ubuntu14.04系统 安装参考官网:https://docs.docker.com 1.首先检查是否安装过docker,如果安装过,卸载: sudo apt-get remove docke ...

  4. 在VMware中安装Mac OS

    macOS与Darwin http://blog.csdn.net/hintcnuie/article/details/38468093 OS X 是整个操作系统的一个集体名称.而Darwin 就是其 ...

  5. TeamViewer 的早期版本下载

    对于10及上以的:https://www.teamviewer.com/zhcn/download/previous-versions/ 5~9的版本下载:https://community.team ...

  6. Java第01次实验提纲(基本概念+编程环境入门+PTA)

    0. 控制台下编译.运行 在Notepad++编写Java程序 学会使用控制台,javac.java 学会使用Notepad++ 参考资料: 控制台-cmd应用基础 扫盲教程 使用命令行编译并运行ja ...

  7. Jenkins的详细安装

    操作环境:Windows 一.环境准备 1 安装JDK 本文采用jdk-8u111-windows-x64.exe: 2 配置tomcat 本文采用tomcat8,无需安装,配置JAVA_HOME及J ...

  8. C++11--正则表达式<regex>

    /* 正则表达式:一个指定的模式用来对文本中的字符串提供精确且灵活的匹配 */ #include <regex> using namespace std; int main() { str ...

  9. Spark 在Hadoop HA下配置HistoryServer问题

    我的Spark机群是部署在Yarn上的,因为之前Yarn的部署只是简单的完全分布式,但是后来升级到HA模式,一个主NN,一个备NN,那么Spark HistoryServer的配置也需要相应的做修改, ...

  10. bzoj4020: 未来程序·改

    只需写一个解释器 第一次预处理将输入进行分词,分割出 关键字,运算符,变量/函数名,整数常量,并对变量/函数名离散化以便处理 第二次预处理建语法树,每个节点存节点类型,变量定义表等信息 运行时在语法树 ...