05 - 微信小程序实例开发 - 综合小娱乐

青旅半醒 2022-07-11 00:28 176阅读 0赞

本文章来自[【知识林】][Link 1]

### **实例主要功能** ###

*  星座运势
 *  历史上的今天
 *  QQ吉凶查询
 *  使用`tabbar`做底部导航菜单
 *  自定义工具函数`myDate.js`
 *  页面跳转、页面返回
 *  事件绑定

### **先看效果图** ###

![微信小程序-综合小娱乐 星座运势][-_]

![微信小程序-综合小娱乐 星座运势][-_ 1]

![微信小程序-综合小娱乐 历史上的今天][-_ 2]

![微信小程序-综合小娱乐 QQ吉凶查询][-_ QQ]

![微信小程序-综合小娱乐 QQ吉凶查询][-_ QQ 1]

### **关键代码分析** ###

*  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`代码

*  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);
          }
      }
    })

> 以上只是贴出了一些相对关键的代码，直接使用无法运行。
> 
> 机器人的接口参考了[聚合数据][Link 2]，也感谢聚合数据为我们提供了各种接口。
> 
> 本文章源代码：[https://github.com/zsl131/wx-app-study/tree/master/constellation][https_github.com_zsl131_wx-app-study_tree_master_constellation]

本文章来自[【知识林】][Link 1]

[Link 1]: http://www.zslin.com/web/article/detail/71
[-_]: /images/20220711/711b886967c94f54bb5e5b0378a6c290.png
[-_ 1]: /images/20220711/d87f3341ed494cfdb2da63813b92685c.png
[-_ 2]: /images/20220711/dd297d6260144a4f8b3856aedd093b66.png
[-_ QQ]: /images/20220711/7ca8cbf4d8b841efa57f19b6f9f84a5b.png
[-_ QQ 1]: /images/20220711/1d0b574ca1b84c549efaf94a1e89ff36.png
[Link 2]: https://www.juhe.cn
[https_github.com_zsl131_wx-app-study_tree_master_constellation]: https://github.com/zsl131/wx-app-study/tree/master/constellation