微信小程序—智能對話開發

時間 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，若是用戶不受權使用用戶公開信息，則使用默認的用戶頭像。微信小程序