别人写的项目，自己练习跟着写一遍，练练手。
配置标签栏
标签栏和样式在app.json的tabBar中配置
标签栏的样式
配置公共样式
公共样式在app.wxss中配置，小程序中所有的页面都在page标签中
背景色样式
首页
首页布局有两点需要注意
-
轮播图片
图片大小可能和轮播大小不匹配，在小程序中，通过设置image标签的mode属性来改变。
- 九宫格
九宫格常用flex布局来实现。
发送请求
- 跨域问题
微信小程序中没有跨域，因为跨域是浏览器做的事，小程序的“浏览器”就是微信，微信没有跨域限制。 - 请求的地址必须在管理后台添加白名单。
- 域名必须备案，服务端必须采用HTTPS。
首页功能的实现
- 封装
fetch.js
module.exports = (url, data) => {
return new Promise( (resolve, reject) => {
wx.request({
url: `https://locally.uieee.com/${url}`,
success: resolve,
fail: reject
})
})
}
- 逻辑层发送请求，视图层绑定数据
index.js
const fetch = require('../../utils/fetch')
Page({
/**
* 页面的初始数据
*/
data: {
slides: [],
categories: []
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
fetch('slides').then(res => {
this.setData({ slides: res.data })
})
fetch('categories').then(res => {
this.setData({ categories: res.data})
})
},
})
index.wxml
<swiper class='slides'>
<swiper-item wx:for='{{slides}}' wx:key='id'>
<image src='{{item.image}}' mode='aspectFill' />
</swiper-item>
</swiper>
<view class='grids'>
<view class='item' wx:for="{{categories}}" wx:key="id">
<image src='{{item.icon}}'></image>
<text>{{item.name}}</text>
</view>
</view>
页面间跳转
- 页面间的跳转，用navigator标签
- tab栏中的网址，不能设置为navigator的跳转地址
index.wxml
<swiper class='slides'>
<swiper-item wx:for='{{slides}}' wx:key='id'>
<navigator wx:if="{{item.link}}" url='{{item.link}}'>
<image src='{{item.image}}' mode='aspectFill' />
</navigator>
<image wx:else src="{{item.image}}" />
</swiper-item>
</swiper>
<view class='grids'>
<navigator url='/pages/list/list?cat={{item.id}}' class='item' wx:for="{{categories}}" wx:key="id">
<image src='{{item.icon}}'></image>
<text>{{item.name}}</text>
</navigator>
</view>
-
跳转到对应的页面时，可以打印options拿取信息
列表页
-
wx.setNavigationBarTitle设置标题要在首次渲染后执行 - 分类信息加载成功后，才能加载商铺信息
list.js
const fetch = require('../../utils/fetch')
Page({
data: {
category: {},
shops: []
},
onLoad: function (options) {
fetch(`categories/${options.cat}`).then(res => {
// 这里不一定是在页面初次渲染完成（onReady）后执行
this.setData({category: res.data})
wx.setNavigationBarTitle({
title: res.data.name
})
// 加载完分类信息之后，才能加载商铺信息
return fetch(`categories/${this.data.category.id}/shops`, { _page: 1, _limit: 10})
})
.then(res => {
this.setData({shops: res.data})
})
},
onReady: function () {
if (this.data.category.name) {
wx.setNavigationBarTitle({
title: res.data.name
})
}
},
})
上拉加载
-
onReachBottom页面上拉触底函数 -
list.json中可以配置onReachBottomDistance参数
loadMore () {
// 判断是否要加载更多
if (!this.data.hasMoreFlag) return
// 加载更多
let {pageIndex, pageSize} = this.data
fetch(`categories/${this.data.category.id}/shops`, { _page: ++pageIndex, _limit: pageSize} ).then(res => {
let contentTotal = parseInt(res.header['X-Total-Count'])
let hasMoreFlag = pageIndex * pageSize < contentTotal
this.setData({hasMoreFlag})
let shops = this.data.shops.concat(res.data)
this.setData({shops, pageIndex})
})
},
onReachBottom: function () {
this.loadMore()
},
下拉刷新
-
list.json中配置enablePullDownRefresh - 数据刷新完毕，
wx.stopPullDownRefresh可停止刷新动作
list.js
onPullDownRefresh: function () {
this.setData({shops: [], pageIndex: 0, hasMoreFlag: true})
this.loadMore().then(res => {
wx.stopPullDownRefresh()
})
}
-
loadMore函数返回了promise
loadMore () {
// 判断是否要加载更多
if (!this.data.hasMoreFlag) return
// 加载更多
let {pageIndex, pageSize} = this.data
return fetch(`categories/${this.data.category.id}/shops`, { _page: ++pageIndex, _limit: pageSize} ).then(res => {
let contentTotal = parseInt(res.header['X-Total-Count'])
let hasMoreFlag = pageIndex * pageSize < contentTotal
this.setData({hasMoreFlag})
let shops = this.data.shops.concat(res.data)
this.setData({shops, pageIndex})
})
},
详情页
- 要在
detail.wxml中调用函数，函数要定义在wxs中，wxs不支持es6 - 小程序全屏预览图片
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
