本文所属【知识林】:http://www.zslin.com/web/article/detail/69

实例主要功能

  • 风格类似聊天窗口
  • 用户发送信息时,调用机器人接口返回回答信息
  • 将所有信息记录到本地存储中
  • 每次打开都显示最近的问答数据
  • 当发送空信息时有相应提示

先看效果图

微信小程序 - 问答机器人

关键代码分析

  • 提示信息
wx.showToast({
  title: '请输入您的问题',
  icon: 'loading'
});

说明:icon可以接收loadingsuccess(默认)

  • 存储数据到本地
setContent2Storage: function(data) {
    wx.setStorage({
      key: 'content',
      data: data,
      success: function(res){
        // success
        //console.log("=====保存成功=====");
      }
    })
  }

说明:数据存储是以键值对的形式存在,key表示键,data表示值,可以是字段串,也可以是对象

  • 从本地存储中取值
loadContent: function() {
    var page = this;
    wx.getStorage({
      key: 'content',
      success: function(res){
        // success
        console.log(res);
        page.setData({content:res.data});
      }
    })
  }

说明:上面的setContent2StoreageloadContent都是属于自己在本例中的封装,微信所封装的方法分别是wx.setStoragewx.getStorage,通过键即可获取出数据,并将数据设置到page的data中,这样即可更新页面中的数据。

  • index.wxml
<view class="main-container">

    <scroll-view class="content" scroll-y="true">
        <import src="../templates/me-tpl"/>
        <import src="../templates/robot-tpl"/>
        <block wx:for="{{content}}" wx:key="item">
            <template wx:if="{{item.isRobot}}" is="robot-tpl" data="{{item}}"/>
            <template wx:if="{{!item.isRobot}}" is="me-tpl" data="{{item}}"/>
        </block>
    </scroll-view>

    <view class="sender-container">
        <view style="flex-grow:1">
            <input placeholder="输入您的问题" value="{{q}}" bindinput="inputEvent"/>
        </view>
        <view>
        <button type="primary" bindtap="queryAnswer">发送</button>
        </view>
    </view>
</view>

说明:在这个实例中增加使用了scroll-view可滚动的视图容器。详细说明可参考官方scroll-view,也使用了wx:if用于判断该使用哪个视图模板

  • 视图模板
<template name="me-tpl">
    <view class="me">
        <image src="../imgs/me.png"/>
        <view>
            <text class="date">{{item.date}}</text>
            <text>{{item.text}}</text>
        </view>
    </view>
</template>

以上只是贴出了一些相对关键的代码,直接使用无法运行。

机器人的接口参考了聚合数据,也感谢聚合数据为我们提供了各种接口。

本文章源代码:https://github.com/zsl131/wx-app-study/tree/master/robot

本文所属【知识林】:http://www.zslin.com/web/article/detail/69
文章点评共:0 条
点评内容: 提交点评