Directorio de artículos
1. El libro continúa desde el capítulo anterior.
Los amigos que quieran saber más sobre el artículo anterior pueden hacer clic en el caso de entrada de base cero del front-end del mini programa WeChat . Siguiendo el caso del artículo anterior, continuaremos mejorando el contenido de la página de inicio.
2. Visualización del caso
Haga clic en la comida para saltar a la página de detalles de la comida, haga clic en baño y masaje de pies para saltar a la página de detalles correspondiente, y así sucesivamente...
3. Escritura de código
3.1 Agregar página de detalles
Modifique la opción de páginas de la página app.json y agregue la página serverlist para mostrar la página de detalles correspondiente. El código es el siguiente:
"pages":[
"pages/home/home",
"pages/message/message",
"pages/about/about",
"pages/serverlist/serverlist"
],
3.2 Implementar salto de página
En home.wxml, agregue navegación a los datos de Jiugongge y pase la identificación y el nombre correspondientes, que se utilizan para el título de la página de detalles y para iniciar su solicitud correspondiente. El código es el siguiente
<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 Recibir datos e iniciar una solicitud
La página de detalles recibe la identificación y el nombre pasados después de hacer clic en la página de inicio. El nombre se usa para representar dinámicamente el título y la identificación se usa para iniciar solicitudes dinámicamente. 1.
Abra serverlist.js y defina los datos. En datos, consulte recibe la identificación y el nombre pasados desde la página de inicio. Los detalles se utilizan para recibir los datos después de enviar la solicitud, la página indica qué página, el tamaño de la página indica la cantidad de elementos que se muestran en cada página, el total indica la cantidad total de elementos y la bandera es se utiliza para juicios posteriores y aceleración para evitar fallas debido a múltiples golpes inferiores Iniciar múltiples solicitudes
2. Método personalizado getDetails (), utilizado para enviar solicitudes y recibir datos. Antes de solicitar datos, llame al método wx.showLoading() para mostrar la pantalla de carga de datos. Establezca el indicador en verdadero para indicar que la solicitud se está enviando y restablezcalo en falso por completo para indicar que la solicitud ha finalizado. Esto evita solicitudes repetidas y luego llamadas wx .request() se usa para iniciar una solicitud, donde la URL cambia dinámicamente de acuerdo con la identificación en la consulta
3. El método en onLoad() se llama cuando se carga la página y se pasa La identificación y el nombre de los datos se encapsulan en la consulta, e inician una solicitud y asignan un valor a los datos en los datos
4. El método en onReady() se llamará cuando se complete la representación inicial de la página. El método es representar el título de la página, como comida...
5. La función onPullDownRefresh() se implementa. Se activa cuando se baja la página, se usa para restablecer datos y enviar nuevas solicitudes.
6. Se llamará a onReachBottom(). cuando la página se extiende hasta 50 píxeles desde la parte inferior de la pantalla (el valor predeterminado es 50 píxeles, que se puede modificar en el archivo .json correspondiente). Primero, determine si todavía se necesitan datos en la página siguiente. De lo contrario, , el método wx.showToast () mostrará un cuadro emergente correspondiente al mensaje en la pantalla y mostrará el contenido en el título. Si es así, modifique el valor de la página y envíe la solicitud nuevamente. datos para la página siguiente.
// 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 Renderizar datos en la página
1. La página serverlist.wxml es similar a la página HTML del navegador. La última línea de código se explicará en detalle en 3.5 Procesamiento de datos. Se utiliza para procesar cadenas de números de teléfonos móviles. El código es el siguiente
<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 página serverlist.wxss es para embellecer la página serverlist.wxml, similar a la función del navegador CSS, el código es el siguiente
/* 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 Procesamiento de datos
Agregue "-" al número de teléfono móvil en la página de detalles para facilitar la memoria y la marcación.
1. Cree un nuevo archivo tools.wxs en la carpeta hastas. wxs es equivalente al código js en el navegador. Defina la función splitPhone para procesar el número de teléfono móvil, expórtelo y llámelo en la página 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. Ejecute la pantalla
Después de escribir el código, descubrí que los datos de la página y las imágenes no se podían cargar. Recuerde marcar las siguientes opciones, Detalles->Configuración local->Sin verificación..., y todas se cargarán una vez que se complete la configuración.
