05 - 微信小程式例項開發 - 綜合小娛樂

本文章來自【知識林】
歡迎訪問【微信小程式專題】

例項主要功能

• 星座運勢
• 歷史上的今天
• QQ吉凶查詢
• 使用tabbar做底部導航選單
• 自定義工具函式myDate.js
• 頁面跳轉、頁面返回
• 事件繫結

先看效果圖

關鍵程式碼分析

• tabBar部份程式碼

"tabBar": {
    "selectedColor": "#99322d",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "星座運勢",
      "iconPath": "pages/imgs/xz2.png",
      "selectedIconPath": "pages/imgs/xz1.png"
    }, {
      "pagePath": "pages/history/index",
      "text": "歷史今天",
      "iconPath": "pages/imgs/history2.png",
      "selectedIconPath": "pages/imgs/history1.png"
    }, {
      "pagePath": "pages/qq/index",
      "text": "QQ吉凶",
      "iconPath": "pages/imgs/qq2.png",
      "selectedIconPath": "pages/imgs/qq1.png"
    }]
}

• 星座運勢首頁邏輯層程式碼

Page({
  data:{},
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的引數
  },
  showDetail: function(e) {
    var name = e.currentTarget.dataset.name
    console.log(name);
    wx.navigateTo({
      url: '/pages/constellation-detail/index?name='+name
    })
  }
})

• 星座運勢首頁檢視層部份程式碼

<view class="title-part">
    星座運勢
</view>

<view class="index-container">
    <view class="single-view" data-name="白羊座" bindtap="showDetail">
        <image src="../imgs/baiyang.png" mode="widthFix"></image>
        <text>白羊座</text>
    </view>
    <view class="single-view" data-name="金牛座" bindtap="showDetail">
        <image src="../imgs/jinniu.png" mode="widthFix"></image>
        <text>金牛座</text>
    </view>
    ……
</view>

<view class="footer-part">
    點選星座檢視運勢，僅供娛樂！
</view>

• 星座運勢首頁樣式表

.single-view {
    width:19%; border:1px #dfdfdf solid; float:left; margin: 19px 0px 5px 2.2%;
    padding:5px; border-radius:5px; text-align: center; align-items: center;
    
}
.single-view image {
    width:100%;
}
.single-view text {
    font-size:30rpx; color:brown;
}

• 星座運勢詳情頁邏輯層程式碼

Page({
  data:{
    name:'',
    today:{},
    year:{}
  },
  onLoad:function(options){
    // 生命週期函式--監聽頁面載入
    var name = options.name;
    this.setData({name: name});
    this.loadData(name, "today");
    this.loadData(name, "year");
  },

  loadData: function(name, type) {
      var that = this;
      var key = "057d56db14bcf4dc5d6f8f5736b0df95";
      var url = "http://web.juhe.cn:8080/constellation/getAll";
      wx.request({
        url: url,
        data: {
            consName: name,key:key,
            type:type
        },
        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        success: function(res){
          // success
          if("today"==type) {
            var data = res.data;
            that.setData({
              today: {
                datetime:data.datetime,
                all:data.all.replace("%", ""),
                color:data.color,
                health: data.health.replace("%", ""),
                love: data.love.replace("%", ""),
                money: data.money.replace("%", ""),
                number:data.number,
                QFriend: data.QFriend,
                summary: data.summary,
                work: data.work.replace("%", "")
              }
            });
          } else if("year"==type) {
            console.log(res);
            that.setData({year: res.data});
          }
        }
      })
  },
  goBack: function() {
    wx.navigateBack({
      delta: 1 // 回退前 delta(預設為1) 頁面
    })
  }
})

• 歷史上的今天邏輯層程式碼

// pages/history/index.js
var util = require("../../utils/myDate.js");
Page({
  data:{
    day:'',
    today:{}
  },
  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的引數
    var day = options.day;
    if(!day) {
      day = util.buildDay(0); //今天
    }
    this.setData({day: day});
    this.loadData(day);
  },
  loadData: function(day) {
    var that = this;
    var key = "03d6f756332d667e8446c4f1be4cf39b";
    var url = "http://v.juhe.cn/todayOnhistory/queryEvent.php";
    wx.request({
      url: url,
      data: {
        key: key,
        date: day
      },
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      success: function(res){
        // success
        console.log(res);
        that.setData({today: res.data.result});
      }
    })
  }
})

• 自己封裝的myDate.js程式碼

function buildDay(flag) {
    var a = newDate(flag);
    var month = a.getMonth()+1;
    var day = a.getDate();
    return month+"/"+day;
}

//添減天
function newDate(flag) {
    var a = new Date();
    var long = a.valueOf();
    long = long + flag * 24 * 60 * 60 * 1000;
    a = new Date(long);
    return a;
}

module.exports = {
  buildDay: buildDay
}

• QQ 吉凶查詢邏輯層程式碼

Page({
  data:{
    qq:'',
    result:'請輸入QQ號碼查詢',
    detail:'----'
  },
  onLoad:function(options){
    // 生命週期函式--監聽頁面載入
  },
  loadData: function(qq) {
      var that = this;
      var key = "e32c2619ad9beec999e729afcfb3cce7";
      var url = "http://japi.juhe.cn/qqevaluate/qq";
      wx.request({
        url: url,
        data: {
            key: key,
            qq: qq
        },
        method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
        success: function(res){
          // success
          console.log(res);
          that.setData({
              qq: qq,
              result: res.data.result.data.conclusion,
              detail: res.data.result.data.analysis
          });
        }
      })
  },
  changeQQ: function(e) {
      var qq = e.detail.value;
      //console.log(qq);
      this.setData({qq: qq});
  },
  queryData: function(e) {
      var qq = this.data.qq;
      if(qq=='') {
        wx.showToast({title: 'QQ號碼為空！', icon:"loading"});
      } else {
        this.loadData(qq);
      }
  }
})

以上只是貼出了一些相對關鍵的程式碼，直接使用無法執行。

機器人的介面參考了聚合資料，也感謝聚合資料為我們提供了各種介面。

本文章原始碼：https://github.com/zsl131/wx-app-study/tree/master/constellation

歡迎訪問【微信小程式專題】
本文章來自【知識林】