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

Myth丶恋晨 2022-07-11 00:28 143阅读 0赞

本文章来自[【知识林】][Link 1]

### **实例主要功能** ###

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

### **先看效果图** ###

![微信小程序 - 问答机器人][-]

### **关键代码分析** ###

*  提示信息

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`

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

*  视图模板

> 以上只是贴出了一些相对关键的代码，直接使用无法运行。
> 
> 机器人的接口参考了[聚合数据][Link 2]，也感谢聚合数据为我们提供了各种接口。
> 
> 本文章源代码：[https://github.com/zsl131/wx-app-study/tree/master/robot][https_github.com_zsl131_wx-app-study_tree_master_robot]

本文章来自[【知识林】][Link 1]

[Link 1]: http://www.zslin.com/web/article/detail/69
[-]: /images/20220711/ada5fdc9a0d84fbbab09b550c1a1206d.png
[scroll-view]: https://mp.weixin.qq.com/debug/wxadoc/dev/component/scroll-view.html?t=2017112
[Link 2]: https://www.juhe.cn
[https_github.com_zsl131_wx-app-study_tree_master_robot]: https://github.com/zsl131/wx-app-study/tree/master/robot