小程序template模板为知你客服传入微信头像和昵称

自从利用了知你客服以来，我们自己的小程序已经完全完成了服务内环化，即所有操作已经可以完全在微信内部完成，不必在使用qq联系客户，但在未配置之前，知你客服无法辨别出客户到底是谁，所以从网上找到了解决方案，分享给大家

文章目录

小程序template模板为知你客服传入微信头像和昵称
- 如何使用知你客服
- 利用小程序模板在需要的页面导入客服按钮
- - 创建模板
  - 使用模板
- 官方案例
- - 参考资料

如何使用知你客服

这个到官网绑定即可

利用小程序模板在需要的页面导入客服按钮

创建模板

首先我们先创建kefu.wxml作为模板,图片的地址根据自己的图片地址更改即可，
注意这里的session-from里传递的值，这个是知你客服官方要求的传入客户信息与头像的地址，同时因为是模板传值，需要遵守官方的模板方法（见下一节）
见知你客服官方指南

<!--kefu.wxml-->
<template name="kefu"><button class="kf_button" open-type="contact" session-from='{"nickName":"{{nickName}}","avatarUrl":"{{avatarUrl}}"}'><image class="kf_image" src="../../images/kefu.png"></image></button>
</template>

再创建客服按钮的样式kefu.wxss，客服按钮的图片从阿里的图库随便找一个就行

/*kefu.css*/
.kf_button{z-index: 9999;background-color: rgba(255, 255, 255, 0);border: 0px;height: 100rpx;right: 0;bottom: 20rpx;position: fixed;
}
.kf_button::after{border: 0px;
}
.kf_image{z-index: 9999;width: 100rpx;height: 100rpx;
}

使用模板

然后我们到需要使用客服按钮的页面中加入引入如下代码来加入这个模板
比如这个就是我们要引入的index.wxml页面

<!--index.wxml-->
//在头部加入下面这一行代码
<import src="../../templates/kefu.wxml" />
......//这里就是整个页面的代码
//然后再加入模板
<template is="kefu" data="{{...userInfo}}"/>

注意data={{...userInfo}}这个属性，这个是模板传递值的官方方法,即...+传入组，这里我引入的是index.js中的userInfo这个数组字典，话说这个这个怎么称呼来着？

我们看看index.js

//index.js
Page({data: {userInfo:{}}onload:function(){`通过登录来获取传递入userInfo值，这个是官方的一个默认小程序demo，可以自己查看`}
})

然后template模板就能获得该页面的数据传递了
总之一定要注意就是，模板值的来源是引用模板页面的js文件

然后是在index.wxss
在头部引入样式

/*index.wxss*/
@import "../../templates/kefu.wxss";

最后我们刷新一下，即可，可以看右下角的效果

点击后，即可在知你客服官方，看到客户的昵称与头像了

官方案例

以下是官方模板案例 详情见微信小程序官方开发指南

定义模板
使用 name 属性，作为模板的名字。然后在内定义代码片段，如：


<!--index: intmsg: stringtime: string
-->
<template name="msgItem"><view><text>{{index}}: {{msg}}</text><text>Time: {{time}}</text></view>
</template>

使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：

<template is="msgItem" data="{{...item}}" />

Page({data: {item: {index: 0,msg: 'this is a template',time: '2016-09-15'}}
})

可以看到这个...item就是在我们引入模板页面的js文件中的一个data内数据文件

参考资料

小程序 template传递数据两种方式/setData修改数组或对象
小程序开发指南·模板
知你客服·获取微信头像和昵称