Annuaire d'articles
1. Le livre continue du chapitre précédent
Les amis qui souhaitent en savoir plus sur l'article précédent peuvent cliquer sur le cas d'entrée frontale à base zéro du mini programme WeChat . Suite au cas de l'article précédent, nous continuerons à améliorer le contenu de la page d'accueil.
2. Affichage du boîtier
Cliquez sur l'aliment pour accéder à la page de détails de l'aliment, cliquez sur le bain et le massage des pieds pour accéder à la page de détails correspondante, et ainsi de suite...
3. Écriture de codes
3.1. Ajouter une page de détails
Modifiez l'option pages de la page app.json et ajoutez la page serverlist pour afficher la page de détails correspondante. Le code est le suivant :
"pages":[
"pages/home/home",
"pages/message/message",
"pages/about/about",
"pages/serverlist/serverlist"
],
3.2. Implémenter le saut de page
Dans home.wxml, ajoutez la navigation aux données de Jiugongge, et transmettez l'identifiant et le nom correspondants, qui sont utilisés pour le titre de la page de détails et pour lancer la requête correspondante. Le code est le suivant
<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. Recevoir des données et lancer une demande
La page de détails reçoit l'identifiant et le nom transmis après avoir cliqué sur la page d'accueil. Le nom est utilisé pour restituer dynamiquement le titre et l'identifiant est utilisé pour lancer dynamiquement des requêtes. 1. Ouvrez
serverlist.js et définissez les données. Dans data, interrogez reçoit l'identifiant et le nom transmis depuis la page d'accueil. , les détails sont utilisés pour recevoir les données après l'envoi de la demande, la page indique quelle page, pageSize indique le nombre d'éléments affichés sur chaque page, total indique le nombre total d'éléments et l'indicateur est utilisé pour le jugement et la limitation ultérieurs afin d'éviter les échecs dus à plusieurs coups de fond. Lancer plusieurs requêtes
2. Méthode personnalisée getDetails(), utilisée pour envoyer des requêtes et recevoir des données. Avant de demander des données, appelez la méthode wx.showLoading() pour afficher l'écran de chargement des données. Définissez l'indicateur sur true pour indiquer que la requête est en cours d'envoi, et réinitialisez-le sur false pour indiquer que la requête est terminée. Cela évite requêtes répétées, puis appelle wx .request() est utilisé pour lancer une requête, où l'URL change dynamiquement en fonction de l'identifiant dans la requête. 3.
La méthode dans onLoad() est appelée lorsque la page est chargée et le message passé L'identifiant et le nom des données sont encapsulés dans la requête, et lancez une requête et attribuez une valeur aux données dans les données
4. La méthode dans onReady() sera appelée lorsque le rendu initial de la page sera terminé. La méthode consiste à restituer le titre de la page, comme la nourriture...
5. La fonction onPullDownRefresh() est implémentée. Déclenchée lorsque la page est déroulée, utilisée pour réinitialiser les données et envoyer de nouvelles requêtes.
6. onReachBottom() sera appelé lorsque la page est tirée jusqu'à 50 pixels du bas de l'écran (50 pixels par défaut, peut être modifié dans le fichier .json correspondant), déterminez d'abord s'il y a encore des données nécessaires sur la page suivante. Sinon, le wx. La méthode showToast() fera apparaître une boîte de dialogue correspondant à l'invite à l'écran et affichera le contenu dans le titre. Si tel est le cas, modifiez la valeur de la page et renvoyez la demande de données pour la page suivante.
// 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. Afficher les données sur la page
1. La page serverlist.wxml est similaire à la page HTML du navigateur. La dernière ligne de code sera expliquée en détail dans 3.5 Traitement des données. Elle est utilisée pour traiter les chaînes de numéros de téléphone mobile. Le code est le suivant
<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. La page serverlist.wxss est destinée à embellir la page serverlist.wxml, similaire au rôle du navigateur CSS. Le code est le suivant
/* 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. Traitement des données
Ajoutez "-" au numéro de téléphone mobile dans la page de détails pour faciliter la mémoire et la numérotation.
1. Créez un nouveau fichier tools.wxs dans le dossier Untils. wxs est équivalent au code js dans le navigateur. Définissez la fonction splitPhone à traiter. le numéro de téléphone mobile.string, exportez-le et appelez-le sur la page serverlist.wxml.
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. Exécutez l'affichage
Après avoir écrit le code, j'ai constaté que les données et les images de la page ne pouvaient pas être chargées. N'oubliez pas de vérifier les options suivantes, Détails->Paramètres locaux->Aucune vérification..., et elles seront toutes chargées une fois les paramètres terminés.
