首页 网络编程 前端制作 数据库 CMS教程 脚本编程 微信开发 小程序开发 服务器

小程序开发

热门: ASP.NET PHP编程 ASP编程 JSP编程

微信小程序组件 使用button更有效的 打开客服会话

来源:未知 发布时间:2017-12-28

本文不介绍如何开启客服,而是如何打开客服会话,本来使用contact-button控件是可以实现的,介是有效区域太小,所以还是得找替换方法,button是可以支持的只是在测试的时候需要用真机打开才会有效果,所以很多人在用contact-button来做,什么多放一些contact-button来增大有效点击区域,真是太无语了。

二、以下是介绍两种使用方法:

1、使用button来打开客服会话(本人推荐)

button参数说明

Html代码 
  1. <view class="deg">  
  2.     <button  open-type="contact" session-from="weapp">  
  3.         <image src="/pages/images/m_service_ico.png" mode="widthFix"></image>客服  
  4.     </button>  
  5. </view>  

去掉button一些默认样式

Css代码 
  1. .deg button{border:none;height:90rpx;background:none;border-radius:0;line-height:90rpx;color:#333;font-size:20rpx;text-align:center;}  
  2.     .deg button:after{border:none;}  

2、使用contact-button来打开客服会话


客服会话按钮,用于在页面上显示一个客服会话按钮,用户点击该按钮后会进入客服会话。

属性名 类型 默认值 说明
size Number 18 会话按钮大小,有效值 18-27,单位:px
type String default-dark 会话按钮的样式类型
session-from String   用户从该按钮进入会话时,开发者将收到带上本参数的事件推送。本参数可用于区分用户进入客服会话的来源。

type 有效值:

说明
default-dark  
default-light  

示例代码

<contact-button 
type="default-light" 
size="20" 
session-from="weapp
">
</contact-button>  

相关api:详见客服消息接口文档

三、结语:小程序真是一个奇葩的寄生体

网络编程 | 前端制作 | 数据库 | CMS教程 | 脚本编程 | 微信开发 | 小程序开发 | 服务器 |

程序员学习网,提供最新的微信开发教程,小程序开发教程,网络编程、php教程、asp.net教程、微信公众平台二次开发教程、脚本编程、网页制作、网页设计、网页特效,为站长与网络编程从业者提供学习资料,凡本网站转载的文章、图片等资料的版权归版权所有人所有,因无法和版权所有者一一联系,如果本网站选取的文/图威胁到您的权益,请您及时和本网站联系。 我们会在第一时间内采取措施,避免给双方造 成不必要的损失。
© 2015-2018 程序员学习网 版权所有,并保留所有权利。

电脑版 | 移动版