微信小程序—智能对话开发

时间 2019-12-07

标签微信程序智能对话开发繁體版

原文原文链接

这段时间开发了一个智能对话的微信小程序，下面就把这个介绍一下。0.介绍界面：对话：功能：目前支持闲聊，问时间，问天气，算24点，单位换算，汇率查询，邮政编码，笑话，故事，算数功能。1.智能对话接口首先是对话 ...javascript

0.介绍

界面：

对话：

功能：目前支持闲聊，问时间，问天气，算24点，单位换算，汇率查询，邮政编码，笑话，故事，算数功能。前端

1.智能对话接口

首先是对话的接口，用的是OLAMI的接口，能够本身定义须要的对话，也有系统提供的对话模块。
对话模块定义好以后，查看API文档，将对话经过API发送以后就能够获得回答。java

API调用代码web

NLIRequest:function(corpus,arg) { // corpus是要发送的对话；arg是回调方法
    var that = this;
    // appkey
    var appkey = that.globalData.NLPAppkey;
    // appsecret
    var appSecret = that.globalData.NLPAppSecret;
    var api = "nli";
    var timestamp = new Date().getTime();
    // MD5签名
    var sign = MD5.md5(appSecret + "api=" + api + "appkey=" + appkey + "timestamp=" + timestamp + appSecret);
    var rqJson = { "data": { "input_type": 1, "text": corpus }, "data_type": "stt" };
    var rq = JSON.stringify(rqJson);
    var nliUrl = that.globalData.NLPUrl;
    // cusid是用来实现上下文的，能够本身随意定义内容，要够长够随机
    var cusid = that.globalData.NLPCusid;
    console.log("[Console log]:NLIRequest(),URL:" + nliUrl);
    wx.request({
      url: nliUrl,
      data: {
        appkey: appkey,
        api: api,
        timestamp: timestamp,
        sign: sign,
        rq: rq,
        cusid: cusid,
      },
      header: { 'content-type': 'application/x-www-form-urlencoded' },
      method: 'POST',
      success: function (res) {
        var resData = res.data;
        console.log("[Console log]:NLIRequest() success...");
        console.log("[Console log]:Result:");
        console.log(resData);
        var nli = JSON.stringify(resData);
        // 回调函数，解析数据
        typeof arg.success == "function" && arg.success(nli);
      },
      fail: function (res) {
        console.log("[Console log]:NLIRequest() failed...");
        console.error("[Console log]:Error Message:" + res.errMsg);
        typeof arg.fail == "function" && arg.fail();
      },
      complete: function () {
        console.log("[Console log]:NLIRequest() complete...");
        typeof arg.complete == "function" && arg.complete();
      }
    })
  }

2.对话内容显示

前端显示代码小程序

<view class="container">
  <scroll-view class="scrool-view" scroll-y="true" scroll-with-animation="true" scroll-into-view="{{scrolltop}}" enable-back-to-top="true">
    <view class="chat-list">
      <block wx:for="{{chatList}}" wx:key="time">
        <view id="roll{{index + 1}}" class="chat-left" wx:if="{{item.orientation == 'l'}}">
          <image class="avatar-img" src="/res/image/chat_logo.png"></image>
          <text>{{item.text}}</text>
          <image class="avatar-img"></image>
        </view>
        <view id="roll{{index + 1}}" class="chat-right" wx:if="{{item.orientation == 'r'}}">
          <image class="avatar-img"></image>
          <text>{{item.text}}{{item.url}}</text>
          <image class="avatar-img" src="{{userLogoUrl}}"></image>
        </view>
      </block>
    </view>
  </scroll-view>
  <view id="rollend" class="weui-footer weui-footer__text">语义解析技术由OLAMI提供</view>
  <form bindsubmit="sendChat">
    <view class="ask-input-word">
      <input class="input-big" placeholder="" name="ask_word" type="text" bindconfirm="sendChat" bindinput="Typing" value="{{askWord}}" />
      <button formType="submit" size="mini" disabled="{{sendButtDisable}}">发送</button>
    </view>
  </form>
</view>

【1】scroll-into-view=”{{scrolltop}}”是将对话滚动到最新位置，在js中把最新的id赋给scrolltop，页面会自动滚动到指定位置。
【2】chatList存储对话内容，循环渲染对话框。orientation是左右位置，左边是答案，右边是用户输入。
【3】userLogoUrl是用户头像的url，若是用户不受权使用用户公开信息，则使用默认的用户头像。微信小程序

最后

其余的内容就是一些判断以及解析数据。api

源代码地址：https://pan.baidu.com/s/1eSvjbQa微信