微信小程序官方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. 商品和订单中使用MQ

    一.将Product服务增加到配置中心 1.添加引用 <dependency> <groupId>org.springframework.cloud</groupId&g ...

  2. B.A.T.M.A.N

    参考: http://wiki.openwrt.org/doc/howto/mesh.batman?s[]=batmand The Better Approach To Mobile Adhoc Ne ...

  3. S2算法应用

    需求:计算不同区域范围,X公里半径内实体店或场站覆盖率. 实现思路: 为了便于理解,将地球看成一个基于经纬度线的坐标系.将经度和纬度看成二维坐标系中的两个纬度,横轴表示经度[-180o, 0o),(0 ...

  4. DRP端口描述

    DRP端口描述 1.信息来源 2.端口描述

  5. HIMSS EMRAM新版标准将于2018年1月1日生效

    https://www.cn-healthcare.com/article/20170223/content-489862.html HIMSS EMRAM新版标准将于2018年1月1日生效 2017 ...

  6. python doc

    http://blog.51cto.com/lizhenliang/category16.html

  7. Windows Azure Storage (24) 启用Azure Blob日志

    <Windows Azure Platform 系列文章目录> 之前有一个业务需求,客户想知道Azure Storage是否有日志功能,可以检查某个Azure Blob文件在某个时间点被删 ...

  8. switch case语句重点概况

    witch-case语句格式如下: switch(变量){ case 变量值1: //; break; case 变量值2: //...; break; ... case default: //... ...

  9. 【ApplicationContext】通过实现ApplicationContextAware接口获取bean

    SpringApplicationUtils.java import org.springframework.beans.BeansException; import org.springframew ...

  10. 搞懂webdriver的底层原理，才敢说自己懂自动化！

    Selenium的历史1 selenium1.x:这个时候的selenium,使用的是JavaScript注入技术与浏览器打交道. 需要Selenium RC启动一个Server,将操作Web元素的A ...