微信小程序-----校园头条详细开发之首页

1.首页展示功能的实现

1.1  结构

1.2 代码实现

1.2.1  界面的设计这里就不多说了，样式都是我自己写的，还有就是页面的跳转，看详细代码

var app = getApp()
Page({
  /**
   * 页面的初始数据
   */
  data: {
    imgUrls: null,
    schoolInform: null,
    testInform: null,
    contentInform: null,
    indicatorDots: true,
    autoplay: true,
    circular: true,
    interval: 5000,
    duration: 1000,
    schoolName: null,
    id: 0
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    var that = this
    wx.request({
      url: 'http://xxxxxxx:8080/webchat/index/querylatestinfo',
      data: {
        shoolId: app.globalData.userInfo.schoolid
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: res => {
        console.log(res.data)
        that.setData({
          imgUrls: res.data.data.pictures,
          schoolName: app.globalData.userInfo.schoolname,
          schoolInform: res.data.data.message.schoolInform,
          testInform: res.data.data.message.testInform,
          contentInform: res.data.data.message.contentInform
        })

        console.log(this.data.schoolInform)

        // that.data.schoolInform = res.data.data,message.schoolInform;
        // that.data.testInform = res.data.data.message.testInform;
        // that.data.contentInform = res.data.data.message.contentInform;
      }
    })

  },

  broadcast: function() {
    console.log("点击广播成功了")
    wx.navigateTo({
      url: '../broadcast/broadcast',
      success: function(res) {},
      fail: function(res) {},
      complete: function(res) {},
    })
  },
  schoolInfo: function() {
    console.log("点击学校通知成功了")
    wx.navigateTo({
      url: '../schoolinfo/schoolinfo',
    })
  },
  testInfo: function() {
    console.log("点击考试成功了")
    wx.navigateTo({
      url: '../testinfo/testinfo',
    })
  },
  contentInfo: function() {
    console.log("点击竞赛成功了")
    wx.navigateTo({
      url: '../contentinfo/contentinfo',
    })
  },

  onClickschooolInfo: function() {
    var that = this;
    that.setData({
      id: that.data.schoolInform.id
    })
    wx.navigateTo({
      url: '../content/content?id='+that.data.id,
    })
  },
  onClicktestInfo: function() {
    var that = this;
    that.setData({
      id: that.data.testInform.id
    })
    wx.navigateTo({
      url: '../content/content?id=' + that.data.id,
    })
  },
  onClickcontentInfo: function() {
    var that = this;
    that.setData({
      id: that.data.contentInform.id
    })
    wx.navigateTo({
      url: '../content/content?id=' + that.data.id,
    })
  }
})

index.js

1.2.2  还有就是想要说的是底部导航栏的设计，这个设计，放在全局中app,json

 "tabBar": {
    "selectedColor": "#FFD700",
    "list": [
      {
        "iconPath": "images/first.png",
        "selectedIconPath": "images/firstactive.png",
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "iconPath": "images/my.png",
        "selectedIconPath": "images/myactivity.png",
        "pagePath": "pages/me/me",
        "selectedColor": "#FFFF00",
        "text": "我的"
      }
    ]
  }

app.json

1.3技术难点

1）界面布局的时候，flex布局，很方便，很有效，可以很好的解决布局的位置，不使用这个，很麻烦

2）底部有导航页面和没有导航的界面，跳转的方式要了解。否则跳不过去