目录
1.新建项目并梳理项目结构
(1)在对应目录下创建一个新的文件夹
(2)进入小程序后有黄色警告 如果不想显示此警告
点击project.config.json在setting里面加入
"checkSiteMap": false
(3)在pages中创建页面 默认页面删除掉
"pages": [
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
]
2.配置导航栏
app.json->window里面进行更改
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#2b4b6b",
"navigationBarTitleText": "本地生活",
"navigationBarTextStyle": "white"
}
3.配置tabBar
在文件夹下面创建images并把需要用到的图片放入
在app.json中新增tabBar
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
}, {
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
}, {
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}]
}
4.实现轮播图和九宫格和图片布局
(1) 设置两个数组存放数据列表
data: {
//存放轮播图数据的列表
swiperList: [],
//存放九宫格数据的列表
gridList: []
},
(2)定义两个获取轮播图数据的方法
//获取轮播图数据的方法
getSwiperList() {
wx.request({
url: 'https://www.escook.cn/slides',
method: 'GET',
success: (res) => {
console.log(res)
this.setData({
swiperList: res.data
})
}
})
},
//获取九宫格数据的方法
getGridList() {
wx.request({
url: 'https://www.escook.cn/categories',
method: 'GET',
success: (res) => {
this.setData({
gridList: res.data
})
}
})
},
注:这里使用的图片为后台写好的图片
(3)页面刚加载就要获取轮播图的数据,在页面加载中调用这两个方法
onLoad: function (options) {
this.getSwiperList(),
this.getGridList()
},
(4)视图层
<!-- 轮播图区域 -->
<swiper indicator-dots circular>
<swiper-item wx:for="{{swiperList}}" wx:key="id">
<image src="{{item.image}}"></image>
</swiper-item>
</swiper>
<!-- 九宫格区域 -->
<view class="grid-list">
<view class="grid-item" wx:for="{{gridList}}" wx:key="id">
<image src="{{item.icon}}"></image>
<text>{{item.name}}</text>
</view>
</view>
<!-- 图片区域 -->
<view class="bottoms">
<image src="/images/1.png" mode="widthFix"></image>
<image src="/images/2.png" mode="widthFix"></image>
</view>
(5)渲染层
swiper {
height: 350rpx;
}
swiper image {
width: 100%;
height: 100%;
}
.grid-list {
display: flex;
/*一行放不下允许换行*/
flex-wrap: wrap;
border-top: 1rpx solid #efefef;
border-left: 1rpx solid #efefef;
}
.grid-item {
width: 33.33%;
height: 200rpx;
/*使文本与图像纵向布局 默认为横向*/
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: 1rpx solid #efefef;
border-bottom: 1rpx solid #efefef;
/*设置的总宽高包括盒子边框*/
box-sizing: border-box;
}
.grid-item image {
width: 60rpx;
height: 60rpx;
}
.grid-item text {
font-size: 24rpx;
margin-top: 10rpx;
}
.bottoms {
display: flex;
}
.bottoms image {
float: 1px;
}
5.新建一个非tabBar页面并写wxs脚本
WXML
<!--pages/shoplist/shoplist.wxml-->
<view class="shop-item" wx:for="{{shopList}}" wx:key="id">
<view class="thumb">
<image src="{{item.images[0]}}"></image>
</view>
<view class="info">
<text class="shop-title">{{item.name}}</text>
<text>电话:{{tools.splitPhone(item.phone)}}</text>
<text>地址:{{item.address}}</text>
<text>营业时间:{{item.businessHours}}</text>
</view>
</view>
<wxs src="../../utils/tools.wxs" module="tools"></wxs>
WXSS
/* pages/shoplist/shoplist.wxss */
.shop-item {
/* 默认为横向布局 */
display: flex;
padding: 15rpx;
border: 1rpx solid #efefef;
border-radius: 8rpx;
margin: 15rpx;
}
.thumb image {
width: 250rpx;
height: 250rpx;
display: block;
margin-right: 15rpx;
}
.info {
/* 改为纵向布局并且每行有间隔 */
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 24rpx;
}
.shop-title {
font-weight: bold;
}
JS
// pages/shoplist/shoplist.js
Page({
/**
* 页面的初始数据
*/
data: {
query: {},
shopList: [],
page: 1,
pageSize: 10,
total: 0,
isloading: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.setData({
query: options
}),
this.getShopList()
},
getShopList(cb) {
this.setData({
isloading: true
})
//展示loading效果
wx.showLoading({
title: '数据加载中...',
})
wx.request({
url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
method: 'GET',
data: {
_page: this.data.page,
_limit: this.data.pageSize
},
success: (res) => {
console.log(res)
this.setData({
shopList: [...this.data.shopList, ...res.data],
total: res.header['X-Total-Count'] - 0
})
},
complete: () => {
//隐藏loading效果
wx.hideLoading()
this.setData({
isloading: false
})
//除了下拉刷新 其他的也会调用该方法 所以此处不能写wx.stopPullDownRefresh()
cb && cb()
}
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
wx.setNavigationBarTitle({
title: this.data.query.title
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
//需要重置关键的数据
this.setData({
page: 1,
shopList: [],
tatal: 0
})
//重新发起数据请求
this.getShopList(()=>{
wx.stopPullDownRefresh()
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if (this.data.page * this.data.pageSize >= this.data.total) {
//证明没有下一页数据
return wx.showToast({
title: '数据加载完毕!',
icon: 'none'
})
}
//判断是否正在加载其他数据
if (this.data.isloading) return
this.setData({
page: this.data.page + 1
})
this.getShopList()
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
JSON
{
"usingComponents": {},
"onReachBottomDistance": 200,
"enablePullDownRefresh": true,
"backgroundColor":"#efefef",
"backgroundTextStyle": "dark"
}
tools.wxs
function splitPhone(str) {
if(str.lenght!=11) return str
var arr=str.split('')
arr.splice(3,0,'-')
arr.splice(8,0,'-')
return arr.join('')
}
module.exports = {
splitPhone: splitPhone
}