實例主要功能

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

先看效果圖

關鍵代碼分(fen)析

• tabBar部份代碼

"tabBar": {
    "selectedColor": "#99322d",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "星座(zuo)運勢(shi)",
      "iconPath": "pages/imgs/xz2.png",
      "selectedIconPath": "pages/imgs/xz1.png"
    }, {
      "pagePath": "pages/history/index",
      "text": "歷史(shi)今天",
      "iconPath": "pages/imgs/history2.png",
      "selectedIconPath": "pages/imgs/history1.png"
    }, {
      "pagePath": "pages/qq/index",
      "text": "QQ吉(ji)兇",
      "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="白羊(yang)座" bindtap="showDetail">
        <image src="../imgs/baiyang.png" mode="widthFix"></image>
        <text>白羊座</text>
    </view>
    <view class="single-view" data-name="金牛(niu)座" 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){
    // 生命周期函數--監(jian)聽頁面(mian)加載
    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 = "//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 // 回退(tui)前 delta(默(mo)認為1) 頁面
    })
  }
})

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

// pages/history/index.js
var util = require("../../utils/myDate.js");
Page({
  data:{
    day:'',
    today:{}
  },
  onLoad:function(options){
    // 頁面初始化(hua) 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 = "//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){
    // 生命(ming)周期(qi)函(han)數--監聽頁面加載
  },
  loadData: function(qq) {
      var that = this;
      var key = "e32c2619ad9beec999e729afcfb3cce7";
      var url = "//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);
      }
  }
})

以(yi)上只是貼出了一些(xie)相對關鍵的代碼，直接使用無法(fa)運(yun)行。

機器(qi)人的接(jie)口(kou)參(can)考(kao)了聚(ju)合數(shu)(shu)據，也感謝聚(ju)合數(shu)(shu)據為我們提(ti)供了各種接(jie)口(kou)。

本文(wen)章源代(dai)碼：//github.com/zsl131/wx-app-study/tree/master/constellation

 

源碼下載：constellation.zip