實(shí)例主要功能

• 星座運(yùn)勢(shì)
• 歷史上的今天
• QQ吉兇查詢
• 使用tabbar做底部導(dǎo)航菜單
• 自定義工具函數(shù)myDate.js
• 頁(yè)面跳轉(zhuǎn)、頁(yè)面返回
• 事件綁定

先看效果圖

關(guān)鍵代碼分析

• tabBar部份代碼

"tabBar": {
    "selectedColor": "#99322d",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "星座運(yùn)勢(shì)",
      "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"
    }]
}

• 星座運(yùn)勢(shì)首頁(yè)邏輯層代碼

Page({
  data:{},
  onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
  },
  showDetail: function(e) {
    var name = e.currentTarget.dataset.name
    console.log(name);
    wx.navigateTo({
      url: '/pages/constellation-detail/index?name='+name
    })
  }
})

• 星座運(yùn)勢(shì)首頁(yè)視圖層部份代碼

<view class="title-part">
    星座運(yùn)勢(shì)
</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">
    點(diǎn)擊星座查看運(yùn)勢(shì)，僅供娛樂(lè)！
</view>

• 星座運(yùn)勢(shì)首頁(yè)樣式表

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

• 星座運(yùn)勢(shì)詳情頁(yè)邏輯層代碼

Page({
  data:{
    name:'',
    today:{},
    year:{}
  },
  onLoad:function(options){
    // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
    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(默認(rèn)為1) 頁(yè)面
    })
  }
})

• 歷史上的今天邏輯層代碼

// pages/history/index.js
var util = require("../../utils/myDate.js");
Page({
  data:{
    day:'',
    today:{}
  },
  onLoad:function(options){
    // 頁(yè)面初始化 options為頁(yè)面跳轉(zhuǎn)所帶來(lái)的參數(shù)
    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:'請(qǐng)輸入QQ號(hào)碼查詢',
    detail:'----'
  },
  onLoad:function(options){
    // 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載
  },
  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號(hào)碼為空！', icon:"loading"});
      } else {
        this.loadData(qq);
      }
  }
})

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

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

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

 

源碼下載：constellation.zip