04 - 微信小程序实例开发 - 笑话大全

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

实例主要功能

• 使用tabbar做底部导航菜单
• 使用onReachBottom触发底部事件
• 自定义工具函数放到util.js中
• 上拉至底部时获取新数据
• 将新数据组合到原有数据中一起显示

先看效果图

微信小程序-笑话大全 纯文字笑话

微信小程序-笑话大全 图文笑话

关键代码分析

• 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"
    }]
  }

说明：tabBar是一个数据，只能配置至少2个、最多5个tab，tab按数组顺序排序，更多详情说明请参考官方文档tabBar

• 笑话部份代码

var util = require("../../utils/util.js");
var app = getApp();
Page({
  data:{
    jokes:[],
    page: 1,
    pagesize:15
  },
  onLoad:function(options){
    // 生命周期函数--监听页面加载
    this.loadJokes();
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
    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: {}, // 设置请求的 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)});
  }
})

说明：在这里使用了require来引用外部js，util.replaceAll就是引用的外部函数。this.data.jokes.concat(tmp_data)将原始数据与最新数据组合在一起，实现无刷新显示。

• util工具类

function replaceAll(source, oldStr, newStr) {
    while (source.indexOf(oldStr) >= 0){
      source = source.replace(oldStr, newStr);
    }
    return source;
}

module.exports = {
  formatTime: formatTime,
  replaceAll: replaceAll
}

• 视图页面（比较简单）

<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>

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

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

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

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