Article directory
1. The book continues from the previous chapter
Friends who want to know more about the previous article can click on the WeChat mini program front-end zero-based entry case . Following the case in the previous article, we will continue to improve the content of the homepage.
2. Case display
Click on the food to jump to the details page of the food, click on the bath and foot massage to jump to the corresponding details page, and so on...
3. Code writing
3.1. Add details page
Modify the pages option of the app.json page and add the serverlist page to display the corresponding details page. The code is as follows:
"pages":[
"pages/home/home",
"pages/message/message",
"pages/about/about",
"pages/serverlist/serverlist"
],
3.2. Implement page jump
In home.wxml, add navigation to the data of Jiugongge, and pass the corresponding id and name, which are used for the title of the details page and to initiate its corresponding request. The code is as follows
<view class="gridList">
<navigator class="gridItem" wx:for="{
{GridList}}" wx:key="id" url="/pages/serverlist/serverlist?id={
{item.id}}&title={
{item.name}}">
<image src="{
{item.icon}}"></image>
<text>{
{item.name}}</text>
</navigator>
</view>
3.3. Receive data and initiate a request
The details page receives the id and name passed after clicking on the homepage. The name is used to dynamically render the title, and the id is used to dynamically initiate requests.
1. Open serverlist.js and define the data. In data, query receives the id and name passed from the homepage. , details are used to receive the data after sending the request, page indicates which page, pageSize indicates the number of items displayed on each page, total indicates the total number of items, and flag is used for subsequent judgment and throttling to avoid failure due to multiple bottom strokes. Initiate multiple requests
2. Custom method getDetails(), used to send requests and receive data. Before requesting data, call the wx.showLoading() method to display the data loading screen. Set the flag to true to indicate that the request is being sent, and reset it to false in complete to indicate that the request has ended. This avoids repeated requests, and then calls wx .request() is used to initiate a request, where the url changes dynamically according to the id in the query.
3. The method in onLoad() is called when the page is loaded, and the passed data id and name are encapsulated into the query, and Initiate a request and assign a value to the data in data
4. The method in onReady() will be called when the initial rendering of the page is completed. The wx.setNavigationBarTitle() method is to render the title of the page, such as food...
5. The onPullDownRefresh() function is implemented Triggered when the page is pulled down, used to reset data and send new requests.
6. onReachBottom() will be called when the page is pulled up to 50 pixels from the bottom of the screen (default 50 pixels, can be modified in the corresponding .json file), first Determine whether there is still data needed on the next page. If not, the wx.showToast() method will pop up a prompt box corresponding to the prompt on the screen and display the content in the title. If so, modify the value of the page and send the request again. data for the next page.
// pages/serverlist/serverlist.js
Page({
/**
* 页面的初始数据
*/
data: {
query:{},
details:[],
page:1,
pageSize:10,
total:0,
falg:false
},
getDetails(stop){
wx.showLoading({
title: '数据加载中...',
})
this.setData({
falg:true
})
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)=>{
this.setData({
details: [...this.data.details, ...res.data],
total:res.header['X-Total-Count']-0
})
},
complete:()=>{
wx.hideLoading()
this.setData({
falg:false
})
stop && stop()
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
query:options
})
this.getDetails();
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
wx.setNavigationBarTitle({
title: this.data.query.title,
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
//重置数据
this.setData({
page:1,
total:0,
details:[]
})
//发起请求
this.getDetails(()=>{
wx.stopPullDownRefresh()
})
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
if (this.data.page * this.data.pageSize >= this.data.total) {
wx.showToast({
title: '到底了！'
})
}
if (this.data.falg==false && (this.data.page * this.data.pageSize < this.data.total)) {
this.setData({
page:this.data.page+1
})
this.getDetails()
}
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
3.4. Render data to the page
1. The serverlist.wxml page is similar to the browser's HTML page. The last line of code will be explained in detail in 3.5 Data Processing. It is used to process mobile phone number strings. The code is as follows
<view wx:for="{
{details}}" wx:key="id" class="detail-item">
<view class="img">
<image src="{
{item.images[0]}}"></image>
</view>
<view class="text">
<text>{
{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>
2. The serverlist.wxss page is to beautify the serverlist.wxml page, similar to the role of browser css. The code is as follows
/* pages/serverlist/serverlist.wxss */
.detail-item{
display: flex;
padding: 10rpx;
border: 2rpx solid #efefef;
margin: 15rpx;
border-radius: 10rpx;
box-shadow: 2rpx 2rpx 10rpx #ddd;
}
.img image{
width: 250rpx;
height: 250rpx;
margin-right: 20rpx;
}
.text{
display: flex;
flex-direction: column;
justify-content: space-around;
font-size: 24rpx;
}
.text :nth-child(1){
font-weight: bold;
}
3.5. Data processing
Add "-" to the mobile phone number in the details page to facilitate memory and dialing.
1. Create a new tools.wxs file in the untils folder. wxs is equivalent to the js code in the browser. Define the function splitPhone to process the mobile phone number. string, export it, and call it on the serverlist.wxml page.
function splitPhone(str){
if (str.length != 11) {
return str
}
var arr=str.split('')
arr.splice(3,0,'-')
arr.splice(8,0,'-')
return arr.join('')
}
module.exports = {
splitPhone:splitPhone
}
4. Run the display
After writing the code, I found that the page data and images could not be loaded. Remember to check the following options, Details->Local Settings->No Verification..., and they will all be loaded after the settings are completed.
