03 - 微信小程序实例开发 - 问答机器人

本文章来自【知识林】
欢迎访问【微信小程序专题】

实例主要功能

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

先看效果图

微信小程序 - 问答机器人

关键代码分析

• 提示信息

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

说明：icon可以接收loading、success（默认）

• 存储数据到本地

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});
      }
    })
  }

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

• index.wxml