微信小程序功能中心模块开发

目录

微信小程序创建项目配置底部导航栏
微信小程序滚动播放内容
微信小程序功能中心模块开发
微信小程序个人中心页面开发
微信小程序获取电话号码
微信小程序显示列表数据
微信小程序显示分页列表
微信小程序添加插屏广告
微信小程序添加激励式广告

最终效果可扫码查看

遇到问题可通过公众号留言反馈

概述

功能中心展示全部功能的入口，因为练手的小程序比较简单，只有两个主要功能，所以除了两个入口和一个更多功能的按钮，下方又增加展示了两个纵向滚动提示，和首页的布局代码一样。
请求的两个接口，第一个调整为新的接口http://yr.lootaa.com/ship/time/todayEnd，第二个没有变化，依旧使用http://yr.lootaa.com/time/channel/lately

新增

和之前相比，只新增了navigator的使用，url参数指定跳转的页面。

样式

@import "../index/weui.wxss";

page {
  background-color: #F8F8F8;
  height: 100%;
  font-size: 32rpx;
  line-height: 1.6;
}

.pages-row { 
  width: 100%; 
  display: flex; 
  flex-direction: row; 
  justify-content: space-around; 
 } 

 .pages-icon { 
  width: 100rpx; 
  height: 100rpx; 
 } 

 .pages-icon-wrapper { 
  display: flex; 
  justify-content: space-around; 
  align-items: center; 
  margin: 0rpx; 
  border-radius: 30%; 
  height: 70%; 
 } 

 .pages-item { 
  position: relative; 
  padding: 10rpx; 
  width: 33%; 
  background-color: #fff; 
  border: #ddd solid 1px; 
 } 
   
 .pages-text-wrapper { 
  text-align: center; 
 } 
   
 .pages-text { 
  font-weight: bolder; 
 } 

 .page-body{
  padding-top: 60rpx;
}
.page-section{
  width: 100%;
  margin-bottom: 60rpx;
}
.page-section_center{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-section:last-child{
  margin-bottom: 0;
}
.page-section-gap{
  box-sizing: border-box;
  padding: 0 30rpx;
}
.page-section-spacing{
  box-sizing: border-box;
  padding: 0 20rpx;
}
.page-section-title{
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
}
.page-section-gap .page-section-title{
  padding-left: 0;
  padding-right: 0;
}

.demo-text-1{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #1AAD19;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-1:before{
  content: 'A';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-2{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #2782D7;
  color: #FFFFFF;
  font-size: 36rpx;
}
.demo-text-2:before{
  content: 'B';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.demo-text-3{
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: #F1F1F1;
  color: #353535;
  font-size: 36rpx;
}
.demo-text-3:before{
  content: 'C';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button{
  margin-bottom: 30rpx;
}
button:last-child{
  margin-bottom: 0;
}
.page-section-title{
  padding: 0;
}
.swiper-item{
  display: block;
  height: 150px;
}
.page-section-title{
  margin-top: 60rpx;
  position: relative;
}
.info{
  position: absolute;
  right: 0;
  color: #353535;
  font-size: 30rpx;
}
.page-foot{
  margin-top: 50rpx;
}

逻辑

Page({
  data: {
    list3:[],
    list4:[],
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: false,
    vertical: true,
    autoplay: true,
    circular: true,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0
  },
  onLoad: function () {
    var that=this;
    wx.request({
      url: 'http://yr.lootaa.com/ship/time/todayEnd',
      success (res) { 
        that.setData({
          list3: res.data.data.data
        })
        console.log(res.data.data.data)
      }
    })
    
    wx.request({
      url: 'http://yr.lootaa.com/time/channel/lately',
      success (res) {
        that.setData({
          list4: res.data.data
        })
        console.log(res.data.data)
      }
    })
  }
})

布局

<view class="container">
  <view class="pages-row">
    <navigator url="../logs/logs" class="pages-item" style="height:75px">
      <view class="pages-icon-wrapper">
        <image src="../../images/ship.png" class="pages-icon"></image>
      </view>
      <view class="pages-text-wrapper">
        <text class="pages-text">船动态</text>
      </view>
    </navigator>
    <navigator url="../logs/logs" class="pages-item" style="height:75px">
      <view class="pages-icon-wrapper">
        <image src="../../images/time.png" class="pages-icon"></image>
      </view>
      <view class="pages-text-wrapper">
        <text class="pages-text">出场时间</text>
      </view>
    </navigator>
    <navigator url="../logs/logs" class="pages-item" style="height:75px">
      <view class="pages-icon-wrapper">
        <image src="../../images/more.png" class="pages-icon"></image>
      </view>
      <view class="pages-text-wrapper">
        <text class="pages-text">更多</text>
      </view>
    </navigator>
  </view>

  <view class="page-body" style="padding-top:10px">
    <view class="page-section page-section-spacing swiper">
      <view bindtap="dingyue" style="padding-bottom: 5px; color: blue;">今日新增船动态信息</view>
      <swiper display-multiple-items="2"
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{list3}}" wx:key="*this">
          <swiper-item>
            <view>船名：{{item.shipNameCn}}</view>
            <view>航次：{{item.voyage}}</view>
            <view>截关时间：{{item.endTime}}</view>
          </swiper-item>
        </block>
      </swiper>
    </view>

    <view class="page-section page-section-spacing swiper">
      <view style="padding-bottom: 5px; color: blue;">最近集装箱进出场时间查询</view>
      <swiper display-multiple-items="2"
        indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
        interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px">
        <block wx:for="{{list4}}" wx:key="*this">
          <swiper-item>
            <view>提单号：{{item.billNo}}</view>
            <view>箱号：{{item.boxNo}}</view>
            <view>出场时间：{{item.time}}</view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    
  </view>
</view>