二、首页布局搭建
1.底部页面的搭建
一个微信小程序必不可少的就是底部导航栏，所以我们先搭建一个底部导航栏 ，根据微信小程序的开发者文档可知，底部导航栏需要在api.json定义tabBar并做好相应的配置（注意先在pages做好页面的定义）。
底部导航栏没有图标是显得非常单调的，所以我们还要创建一个文件夹名为static用来存放图片
继续在static文件夹下创建一个文件名为tabBar，将我们所需的图标放入，搭配属性iconPath引用图标即可。
{ "pages":[ "pages/index/index", "pages/meeting/list/list", "pages/vote/list/list", "pages/ucenter/index/index", "pages/pageOne/pageOne", "pages/pageTwo/pageTwo", "pages/users/user", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "Weixin", "navigationBarTextStyle":"black" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath": "/static/tabBar/coding.png", "selectedIconPath": "/static/tabBar/coding-active.png" }, { "pagePath": "pages/meeting/list/list", "text": "会议", "iconPath": "/static/tabBar/sdk.png", "selectedIconPath": "/static/tabBar/sdk-active.png" }, { "pagePath": "pages/vote/list/list", "text": "投票", "iconPath": "/static/tabBar/template.png", "selectedIconPath": "/static/tabBar/template-active.png" } , { "pagePath": "pages/ucenter/index/index", "text": "设置", "iconPath": "/static/tabBar/component.png", "selectedIconPath": "/static/tabBar/component-active.png" }] }, "style": "v2", "sitemapLocation": "sitemap.json" }
2.首页轮播图搭建
2.1.后端接口管理
轮播图这种资源一定是从数据库来的数据，那么我们怎么通过微信小程序开发获取后端呢？
还是一样看官网，通过官网可知我们发送ajax请求是wx.restartMiniProgram(Object object)
其他的东西还是基本与我们发送ajax请求一致的。
为了后期方便维护我们先将所有的后端接口通过一个文件来保存，在根目录下新建config文件夹随后建立api.js文件。
// 以下是业务服务器API地址 // 本机开发API地址 var WxApiRoot = 'http://localhost:8080/demo/wx/'; // 测试环境部署api地址 // var WxApiRoot = 'http://192.168.0.101:8070/demo/wx/'; // 线上平台api地址 //var WxApiRoot = 'https://www.oa-mini.com/demo/wx/'; module.exports = { IndexUrl: WxApiRoot + 'home/index', //首页数据接口 SwiperImgs: WxApiRoot+'swiperImgs', //轮播图 MettingInfos: WxApiRoot+'meeting/list', //会议信息 };
还是一样先定义本机开发的API地址，具体的请求在下面定义方便管理。
2.2.Mock模拟数据
今天不带大家展示请求后端所以我们利用Mock来制造一些“假数据”来模拟一下。
Mock 的入口在工具调试面板顶部的 Tab，点 + 新建规则
Mock模拟的轮播图数据：
{ "data": { "images":[ { "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner1.png", "text": "1" }, { "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner2.png", "text": "2" }, { "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner3.png", "text": "3" }, { "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner4.png", "text": "4" }, { "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner5.png", "text": "5" }, { "img": "https://cdn-we-retail.ym.tencent.com/tsr/home/v2/banner6.png", "text": "6" } ] }, "statusCode": "200", "header": { "content-type":"applicaiton/json;charset=utf-8" } }
// index.js // 获取应用实例 const app = getApp() const api = require("../../config/api") Page({ data: { imgSrcs:[] }, loadSwiperImgs(){ let that=this; wx.request({ url: api.SwiperImgs, dataType: 'json', success(res) { console.log(res) that.setData({ imgSrcs:res.data.images }) } }) }, // 事件处理函数 bindViewTap() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } this.loadSwiperImgs(); }, })
index.wxml
<!--index.wxml--> <view class="myswiper"> <swiper indicator-dots="true" autoplay="true"> <block wx:for="{{imgSrcs}}" wx:key="{{text}}"> <swiper-item> <image src="{{item.img}}"></image> </swiper-item> </block> </swiper> </view>
小贴士：
有一部分的友友可能遇到以下问题： http://localhost:8080 不在以下 request 合法域名列表中
因为我们现在的小程序开发默认检查安全证书（域名为https）所以我们的请求过不去，我们只需点击微信小程序开发中的详情按钮，再继续点击本地设置将不校验合法域名选项打开。
3.首页会议信息搭建
我们照猫画虎，和我们轮播图的流程一样，定义接口发送ajax再利用Mock模拟数据根据官网提供的组件进行完善。
<view class="mobi-title"> <text class="mobi-icon"></text> <text>会议信息</text> </view> <block wx:for-items="{{lists}}" wx:for-item="item" wx:key="item.id"> <view class="list" data-id="{{item.id}}"> <view class="list-img"> <image class="video-img" mode="scaleToFill" src="{{item.image}}"></image> </view> <view class="list-detail"> <view class="list-title"><text>{{item.title}}</text></view> <view class="list-tag"> <view class="state">{{item.state}}</view> <view class="join"><text class="list-num">{{item.num}}</text>人报名</view> </view> <view class="list-info"><text>{{item.location}}</text>|<text>{{item.starttime}}</text></view> </view> </view> </block> <view class="mysection"> <text>到底啦</text> </view>
// index.js // 获取应用实例 const app = getApp() const api = require("../../config/api") Page({ data: { imgSrcs:[] }, loadSwiperImgs(){ let that=this; wx.request({ url: api.SwiperImgs, dataType: 'json', success(res) { console.log(res) that.setData({ imgSrcs:res.data.images }) } }) }, //首页会议信息的ajax loadMeetingInfos(){ let that=this; wx.request({ url: api.MettingInfos, dataType: 'json', success(res) { console.log(res) that.setData({ lists:res.data.lists }) } }) }, // 事件处理函数 bindViewTap() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad() { if (wx.getUserProfile) { this.setData({ canIUseGetUserProfile: true }) } this.loadSwiperImgs(); this.loadMeetingInfos(); }, })
WXSS
/**index.wxss**/ .swiper-item { height: 300rpx; width: 100%; border-radius: 10rpx; } /**index.wxss**/ .myswiper{ padding:0 0 0 25px; } .mobi-title{ background-color: rgb(252, 248, 248); margin-left: 5px; color: gray; font-weight: 600; } .mobi-icon{ border-left: red solid 1px ; margin-right: 3px; } .list{ display: flex; border-bottom: rgb(233, 231, 231) solid 3px; } .list-img{ display: flex; align-items: center; margin-right: 15px; } .video-img{ width: 120rpx; height: 120rpx; } .list-title{ font-weight: bold; } .list-tag{ display: flex; } .state{ border: rgb(35, 171, 224) solid 1px; color: rgb(35, 171, 224); align-items: center; width: 65px; display: flex; justify-content: center; } .join{ margin-left: 8px; color: lightgray; } .list-num{ color: red; font-weight: 600; } .list-info{ display: flex; color: lightgray; margin-top: 10px; } .mysection{ display: flex; justify-content: center; } .userinfo { display: flex; flex-direction: column; align-items: center; color: #aaa; } .userinfo-avatar { overflow: hidden; width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%; } .usermotto { margin-top: 200px; }
Mock模拟的会议信息数据：
{ "data": { "lists": [ { "id": "1", "image": "/static/persons/1.jpg", "title": "对话产品总监 | 深圳·北京PM大会 【深度对话小米/京东/等产品总监】", "num":"304", "state":"进行中", "starttime": "2022-03-13 00:00:00", "location": "深圳市·南山区" }, { "id": "1", "image": "/static/persons/2.jpg", "title": "AI WORLD 2016世界人工智能大会", "num":"380", "state":"已结束", "starttime": "2022-03-15 00:00:00", "location": "北京市·朝阳区" }, { "id": "1", "image": "/static/persons/3.jpg", "title": "H100太空商业大会", "num":"500", "state":"进行中", "starttime": "2022-03-13 00:00:00", "location": "大连市" }, { "id": "1", "image": "/static/persons/4.jpg", "title": "报名年度盛事，大咖云集！2016凤凰国际论坛邀您“与世界对话”", "num":"150", "state":"已结束", "starttime": "2022-03-13 00:00:00", "location": "北京市·朝阳区" }, { "id": "1", "image": "/static/persons/5.jpg", "title": "新质生活 · 品质时代 2016消费升级创新大会", "num":"217", "state":"进行中", "starttime": "2022-03-13 00:00:00", "location": "北京市·朝阳区" } ] }, "statusCode": "200", "header": { "content-type":"applicaiton/json;charset=utf-8" } }
效果展示
