#1
上次给客户小程序接入图灵机器人后，发现需要实现的功能很多都没有。
出于对客户保密，就不列出具体的哪些需求图灵机器人没有满足。
对比完云知声、百度、腾讯、出门问问、科大讯飞等智能对话机器人后，
客户决定采用微信对话开放平台
https://openai.weixin.qq.com
相比其他平台，微信对话开放平台对小程序开发有天然优势。
可使用 API 接入，也可使用官方的《微信对话开放平台小程序插件》接入。
这无疑大大节省了开发时间。
#2
现在微信对话开放平台处于推广期，不像其他智能对话机器人针对个人有使用次数限制。
其他功能方面可以去官网查看，就不一一列举了。毕竟没有担任他们的推广大使。
直接进入主题
通过插件接入平台也有两种方式，
一种是自己实现UI，使用平台的接口实现聊天交互。
另一种就是直接官方做好的也可以自定义样式的带UI的方式，
为了节省开发时间，就选第二种好了。不用自己写太多UI，只微调就好。
#3
在初始化
var plugin = requirePlugin("chatbot");
App({
onLaunch: function() {
console.log(plugin, "+++");
plugin.init({
appid: "P5Ot9PHJDechCYqDFAW1AiK6OtG3Ja", //小程序示例账户，仅供学习和参考
openid: "",//用户的openid，非必填，建议传递该参数
textToSpeech: false //默认为ture打开状态
success: () => {}, //非必填
fail: error => {} //非必填
});
}
});
和引用
{
"usingComponents": {
"chat": "plugin://chatbot/chat"
}
}
后进行自定义组件微调UI的时候，懵了！
这和平时写自定义组件的方式不太一样啊？之前自定义组件里的 properties 除了 type、value、 default 之外也没看过其他属性啊？这、这、 算了不说什么吧。
想办法吧，看看微信小程序自定义组件文档有没有之前没注意的地方。
https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
在看到组件生命周期时，就知道问题解决有望了。
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})
为什么？ 能看到组件自加载到销毁时发生了什么、产生了什么样的数据，问题自然也就迎刃而解了。
来看看组件加载时发生了什么
很好，里面的 _data_ 字段好像出现了 msg 字样，我们再点开它看看是不是我们需要的
很好，这就和官方的文档对上了。
下面做的就很简单了，在组件 js 文件里写入
properties: {
msg: {
type: Object,
}
},
然后在 wxml 里调用 msg 的相关属性值就可以了。
<scroll-view>
<view wx:for="{{msg.docs}}" wx:key>
<view>歌名：{{item.name}}</view>
<view>演唱:{{item.author}}</view>
<view>封面地址:{{item.album_pic_url}}</view>
<view>歌曲地址:{{item.url}}</view>
</view>
</scroll-view>
其他的几个可覆盖的组件类别按文档里对应的数据结构取值就好了，在这里就不一一演示了。
#4
到这里，微信对话开放平台自定义组件演示就结束了。如果你有其他疑问或者需求加我微信一起交流
本文公章号地址：
