微信小程序增加悬浮在线客服

例如在index首页增加客服代码及一键拨打电话

1、index.wxss或者app.wxss文件里增加样式

.img-plus-style {
  height: 70rpx;
  width: 70rpx;
  position: fixed;
  bottom: 220rpx;
  right: 30rpx;
  opacity: 0.7
}
.img-plus-style1 {
  height: 70rpx;
  width: 70rpx;
  position: fixed;
  bottom: 130rpx;
  right: 30rpx;
  opacity: 0.7
}
.zindex100{z-index: 100}
.yc{opacity: 0}

2、index.wxml文件增加代码

<view>
<contact-button type="default-dark" size="20" session-from="weapp" class="img-plus-style zindex100 yc">
</contact-button>
<image src="../../image/xk_kefu.png" class="img-plus-style"></image>
<image src="../../image/xk_tel.png" class="img-plus-style1" bindtap="calling"></image>
</view>

3、index.js增加 一键拨号

calling: function () {
      wx.makePhoneCall({
        phoneNumber: ‘10086‘,
      })
    },

4、把两个图标放在image目录下

 

内容参考:http://www.xkmov.net/jiaocheng/xiaochengxu/s294.html

原文地址:https://www.cnblogs.com/wangyuman26/p/8649029.html

时间: 2024-10-04 18:07:20

微信小程序增加悬浮在线客服的相关文章

微信小程序添加悬浮在线客服会话按钮

微信为小程序提供客服消息能力,小程序用户可以方便快捷地与小程序服务提供方进行沟通,并且已经做成了组件的形式,直接就可以调用.客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话.那么如何自定义成悬浮客服会话按钮呢?随Z5Win一起来看看 1.我们可以定义contact-button的样式,加一个class.这个客服组件可以放在一个固定模板里,方便每个页面都调用到. <view> <contact-button class="img-plus-style

微信小程序中悬浮窗功能的实现(主要探讨和解决在原生组件上的拖动)

问题场景 所谓悬浮窗就是图中微信图标的按钮,采用fixed定位,可拖动和点击. 这算是一个比较常见的实现场景了. 为什么要用cover-view做悬浮窗?原生组件出来背锅了~ 最初我做悬浮窗用的不是cover-view,而是view. 这是简化的代码结构: index.wxml: <view class="move-view" style=" top:{{top}}px;left:{{left}}px;" bindtap="goToHome"

微信小程序开发的在线影院系统

开发工具:微信开发者工具 微信小程序开发开发的在线影院系统 [详情查看](http://www.myzblog.cn:8080/blog/articles/22.html) { "pages":["pages/movie/movie","pages/recommend/recommend","pages/search/search","pages/detail/detail","pages/loc

微信小程序客服系统手机版五大功能介绍

很多朋友小程序上线后,客服消息这块一直没得到解决.小程序客服消息只能在PC端回复,是让众多小程序运营商及商家头疼的问题,因为一个再牛逼的客服,也不可能随时随地都抱着电脑,这就导致很多用户的留言不能及时得到回复,从而影响用户的使用体验,严重的可能导致顾客投诉.跳单,甚至直接把你的小程序打入"冷宫",挥挥手再也不见. ①微信小程序客服消息可以直接在手机回复吗? ②客服不在线会有消息提示吗? ③可以设置多客服吗? ④一个客服可以服务多个小程序免登入切换吗? ⑤消息可以分类,批量处理吗? 这是

微信小程序怎么做淘宝客优惠券商城手把手教你完成从申请到上线

做淘宝客始终无法绕开微信,因为微信的用户基数大.粘度高.客户使用方便.想从微信的巨大流量池中获取客户就必须围绕微信做相关延伸产品的架设,如微信公众号.小程序.这些都是微信的核心产品.市场上不少淘客工具提供商都开发了微信公众号查券,小程序优惠券商城等等.今天我们主要讲怎么用微信小程序接入淘宝客领券的功能. 第一步:准备微信小程序账户大家可以自行百度微信小程序官网,咱们写文章是不方便直接放小程序官网链接的,这里主要讲注册小程序账号需要注意的一些事项,否则即使搭建好小程序也无法通过审核的. 1. 如果

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

两天撸一个天气应用微信小程序

这是一个完整的已经线上运行的天气应用小程序,点击可查看源码,可随意 star.也可以扫描下方的小程序码直接体验. 效果图: 说明 鸣谢:pure 天气 APP:首页样式借鉴了 pure天气 APP.如侵删. 数据来源 地理编码.天气数据均来自百度地图开放平台.个人开发完全免费,有对应的小程序 sdk,加入即可,但是返回的天气数据较少. 运行前准备 注册微信小程序,获取 appid 注册百度地图开放平台开发者,创建应用,获取 ak(其他配置自行查看) 在 app.js 中替换 globalData

QQ在线客服插件代码,下载自CSDN==可拖动在线客服插件。

  制作网站需要的在线客服功能, 代码: var isIE = /msie/i.test(navigator.userAgent); function gID(id){return document.getElementById(id);} //漂浮 //参数:层ID,记录上次滚动位置(默认可以为空,递归使用) function ScrollDiv(id,pScrollY){ //var ScrollY = document.documentElement.scrollTop ? documen

微信小程序源码下载(200多个)

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微