記事ディレクトリ
1. この本は前の章から続いています
前回の記事の詳細を知りたい友人は、WeChat ミニ プログラム フロントエンド ゼロベース エントリ ケースをクリックしてください。前回の記事のケースに続いて、ホームページのコンテンツを引き続き改善していきます。
2. 事例展示
料理をクリックするとその料理の詳細ページにジャンプし、お風呂とフットマッサージをクリックすると該当の詳細ページにジャンプする…という具合です。
3. コードの書き方
3.1. 詳細ページの追加
app.json ページのページ オプションを変更し、serverlist ページを追加して、対応する詳細ページを表示します。コードは次のとおりです。
"pages":[
"pages/home/home",
"pages/message/message",
"pages/about/about",
"pages/serverlist/serverlist"
],
3.2. ページジャンプの実装
home.wxml で、Jugongge のデータにナビゲーションを追加し、詳細ページのタイトルに使用され、対応するリクエストを開始するために使用される対応する ID と名前を渡します。コードは次のとおりです。
<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. データを受信してリクエストを開始する
詳細ページは、ホームページをクリックした後に渡される ID と名前を受け取ります。名前はタイトルを動的にレンダリングするために使用され、ID は動的にリクエストを開始するために使用されます。1.serverlist.js を開いてデータを定義します。データ内で、クエリを実行します
。ホームページから渡された ID と名前を受け取ります。詳細はリクエストの送信後にデータを受信するために使用されます。page はどのページを示します。pageSize は各ページに表示される項目の数を示します。total は項目の合計数を示します。フラグは複数のボトムストロークによる失敗を回避するための後続の判断と調整に使用されます 複数のリクエストの開始
2. リクエストの送信とデータの受信に使用されるカスタム メソッド getDetails()。データをリクエストする前に、wx.showLoading() メソッドを呼び出してデータ読み込み画面を表示します。リクエストが送信中であることを示すにはフラグを true に設定し、リクエストが終了したことを示すには完了時にフラグを false に設定します。これにより、フラグが回避されます。リクエストを繰り返し、wx を呼び出します。request() はリクエストの開始に使用され、URL はクエリ内の ID に応じて動的に変更されます。3. ページが
ロードされると onLoad() のメソッドが呼び出され、渡されたデータ ID と名前はクエリにカプセル化され、リクエストを開始してデータのデータに値を割り当てます
4. ページの最初のレンダリングが完了すると、onReady() のメソッドが呼び出されます。メソッドは、食べ物などのページのタイトルをレンダリングすることです...
5. onPullDownRefresh() 関数が実装されています ページがプルダウンされたときにトリガーされ、データをリセットして新しいリクエストを送信するために使用されます 6.
onReachBottom() が呼び出されますページが画面の下部から最大 50 ピクセルまでプルされると (デフォルトは 50 ピクセル、対応する .json ファイルで変更できます)、まず次のページに必要なデータがまだあるかどうかを確認します。ない場合は、wx. showToast() メソッドは、画面上のプロンプトに対応するプロンプト ボックスをポップアップし、タイトルの内容を表示します。その場合は、ページの値を変更し、次のページのデータを再度リクエストして送信します。
// 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. データをページにレンダリングする
1.serverlist.wxml ページはブラウザの HTML ページに似ています。コードの最後の行については、「3.5 データ処理」で詳しく説明します。携帯電話番号文字列の処理に使用されます。コードは次のとおりです。
<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.serverlist.wxss ページは、ブラウザの CSS の役割と同様に、serverlist.wxml ページを美しくするためのものです。コードは次のとおりです。
/* 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. データ処理
記憶とダイヤルを容易にするために、詳細ページの携帯電話番号に「-」を追加します。
1. untils フォルダーに新しい tools.wxs ファイルを作成します。 wxs は、ブラウザーの js コードに相当します。 処理する関数 splitPhone を定義します。携帯電話番号の文字列をエクスポートして、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. ディスプレイを実行します
コードを書いた後、ページ データと画像が読み込めないことがわかりました。詳細 -> ローカル設定 -> 検証なし... にチェックを入れてください。設定完了後にすべて読み込まれるようになります。
