小程序模板網(wǎng)

知識(shí)林微信小程序?qū)嵗_(kāi)發(fā)《二》問(wèn)答機(jī)器人，笑話大全

發(fā)布時(shí)間：2017-11-27 17:42 所屬欄目：小程序開(kāi)發(fā)教程

一：?jiǎn)柎饳C(jī)器人實(shí)例主要功能風(fēng)格類似聊天窗口用戶發(fā)送信息時(shí)，調(diào)用機(jī)器人接口返回回答信息將所有信息記錄到本地存儲(chǔ)中每次打開(kāi)都顯示最近的問(wèn)答數(shù)據(jù)當(dāng)發(fā)送空信息時(shí)有相應(yīng)提示先看 ...

 
 

一：?jiǎn)柎饳C(jī)器人

實(shí)例主要功能

  • 風(fēng)格類似聊天窗口
  • 用戶發(fā)送信息時(shí)，調(diào)用機(jī)器人接口返回回答信息
  • 將所有信息記錄到本地存儲(chǔ)中
  • 每次打開(kāi)都顯示最近的問(wèn)答數(shù)據(jù)
  • 當(dāng)發(fā)送空信息時(shí)有相應(yīng)提示

先看效果圖

微信小程序 - 問(wèn)答機(jī)器人

關(guān)鍵代碼分析

  • 提示信息
wx.showToast({
  title: '請(qǐng)輸入您的問(wèn)題',
  icon: 'loading'
});

說(shuō)明：icon可以接收loading、success（默認(rèn)）

  • 存儲(chǔ)數(shù)據(jù)到本地
setContent2Storage: function(data) {
    wx.setStorage({
      key: 'content',
      data: data,
      success: function(res){
        // success
        //console.log("=====保存成功=====");
      }
    })
  }

說(shuō)明：數(shù)據(jù)存儲(chǔ)是以鍵值對(duì)的形式存在，key表示鍵，data表示值，可以是字段串，也可以是對(duì)象

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

說(shuō)明：上面的setContent2Storeage和loadContent都是屬于自己在本例中的封裝，微信所封裝的方法分別是wx.setStorage和wx.getStorage，通過(guò)鍵即可獲取出數(shù)據(jù)，并將數(shù)據(jù)設(shè)置到page的data中，這樣即可更新頁(yè)面中的數(shù)據(jù)。

  • 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="輸入您的問(wèn)題" value="{{q}}" bindinput="inputEvent"/>
        </view>
        <view>
        <button type="primary" bindtap="queryAnswer">發(fā)送</button>
        </view>
    </view>
</view>

說(shuō)明：在這個(gè)實(shí)例中增加使用了scroll-view可滾動(dòng)的視圖容器。詳細(xì)說(shuō)明可參考官方scroll-view，也使用了wx:if用于判斷該使用哪個(gè)視圖模板

  • 視圖模板
<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>

以上只是貼出了一些相對(duì)關(guān)鍵的代碼，直接使用無(wú)法運(yùn)行。

機(jī)器人的接口參考了聚合數(shù)據(jù)，也感謝聚合數(shù)據(jù)為我們提供了各種接口。

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

 

源碼下載：robot.zip

二：笑話大全

實(shí)例主要功能

  • 使用tabbar做底部導(dǎo)航菜單
  • 使用onReachBottom觸發(fā)底部事件
  • 自定義工具函數(shù)放到util.js中
  • 上拉至底部時(shí)獲取新數(shù)據(jù)
  • 將新數(shù)據(jù)組合到原有數(shù)據(jù)中一起顯示

先看效果圖

微信小程序-笑話大全 純文字笑話

微信小程序-笑話大全 圖文笑話

關(guān)鍵代碼分析

  • tabBar的使用

在app.json中增加以下代碼

"tabBar": {
    "color": "#888",
    "selectedColor": "#444",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "笑話",
      "iconPath": "pages/imgs/joke.png",
      "selectedIconPath": "pages/imgs/joke2.png"
    }, {
      "pagePath": "pages/pictures/main",
      "text": "趣圖",
      "iconPath": "pages/imgs/pic.png",
      "selectedIconPath": "pages/imgs/pic2.png"
    }]
  }

說(shuō)明：tabBar是一個(gè)數(shù)據(jù)，只能配置至少2個(gè)、最多5個(gè)tab，tab按數(shù)組順序排序，更多詳情說(shuō)明請(qǐng)參考官方文檔tabBar

  • 笑話部份代碼
var util = require("../../utils/util.js");
var app = getApp();
Page({
  data:{
    jokes:[],
    page: 1,
    pagesize:15
  },
  onLoad:function(options){
    // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
    this.loadJokes();
  },
  onReachBottom: function() {
    // 頁(yè)面上拉觸底事件的處理函數(shù)
    this.setData({page: this.data.page+1});
    this.loadJokes();
  },

  loadJokes: function() {
    var that = this;
    var key = app.globalData.appkey;
    var url = "http://japi.juhe.cn/joke/content/text.from";

    wx.request({
      url: url,
      data: {
        key: key,
        page: that.data.page,
        pagesize: that.data.pagesize
      },
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 設(shè)置請(qǐng)求的 header
      success: function(res){
        // success
        //console.log(res);

        that.rebuildData(res.data.result.data);
      }
    })
  },

  rebuildData: function(data) {
    var tmp_data = [];
    for(var i=0; i<data.length; i++) {
      var d = data[i];
      tmp_data.push({"updatetime":d.updatetime, "content":util.replaceAll(d.content, "　　", "\r\n")});
    }
    //console.log(tmp_data);
    //tmp_data = tmp_data.push(this.data.jokes);
    this.setData({jokes: this.data.jokes.concat(tmp_data)});
  }
})

說(shuō)明：在這里使用了require來(lái)引用外部js，util.replaceAll就是引用的外部函數(shù)。this.data.jokes.concat(tmp_data)將原始數(shù)據(jù)與最新數(shù)據(jù)組合在一起，實(shí)現(xiàn)無(wú)刷新顯示。

  • util工具類
function replaceAll(source, oldStr, newStr) {
    while (source.indexOf(oldStr) >= 0){
      source = source.replace(oldStr, newStr);
    }
    return source;
}

module.exports = {
  formatTime: formatTime,
  replaceAll: replaceAll
}
  • 視圖頁(yè)面（比較簡(jiǎn)單）
<view class="container">
  <import src="../templates/joke-tpl"/>
  <block wx:for="{{jokes}}" wx:key="item">
    <template is="joke-tpl" data="{{item, index}}"/>
  </block>
</view>
  • 視圖模板
<template name="joke-tpl">
    <view class="single-joke">
        <view><view class="num">{{index+1}}</view>{{item.updatetime}}</view>
        <text>{{item.content}}</text>
    </view>
</template>

以上只是貼出了一些相對(duì)關(guān)鍵的代碼，直接使用無(wú)法運(yùn)行。

機(jī)器人的接口參考了聚合數(shù)據(jù)，也感謝聚合數(shù)據(jù)為我們提供了各種接口。

本文章源代碼：https://github.com/zsl131/wx-app-study/tree/master/joke

 

源碼下載：joke.zip



易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址：http://www.u-renovate.com/wxmini/doc/course/17961.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢