當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

微信小程序基础2【条件渲染、swiper组件、生命周期、发起请求API】

發布時間：2024/9/30 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了微信小程序基础2【条件渲染、swiper组件、生命周期、发起请求API】小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

視頻地址：

https://www.bilibili.com/video/BV1cW411T7t6? 【2018】學做小程序- 清華大學

https://www.bilibili.com/video/BV1M7411w7ez? ?清華大學- 學做小程序（基礎+實戰）

視頻-項目-源碼：https://pan.baidu.com/s/1qJ_8S0yL9ES0kl5t2AfSvg

如果百度網盤鏈接失效，可以聯系我。【QQ 386335886】

?【p01 - p16】：https://blog.csdn.net/weixin_44949135/article/details/105087975

?【p17 - p28】：https://blog.csdn.net/weixin_44949135/article/details/105198450

?【p29 - p41】：https://blog.csdn.net/weixin_44949135/article/details/105308817

希望能幫到大家，hhh~? ? ? 如有錯誤，歡迎指正~

目? ?錄

p17 --- 條件渲染

1、使用渲染條件與 hidden屬性，有什么區別?

p18 --- 列表渲染

1、【列表渲染】硬代碼實現：

2、【列表渲染】優化代碼：

p19 --- 使用 swiper 組件

1、swiper 小例子 --- 運行截圖

2、swiper 小例子 --- 實現代碼

3、幻燈片輪播的樣式優化

p20 --- 頁面的生命周期函數

1、需求1: swiper中如何默認切換到最后一頁幻燈片。

2、需求2: 非本周幻燈片頁添加 “返回本周“按鈕

3、頁面狀態數據如何初始化、onLoad(options)

p21 --- 更新數據

1、this.setData() 方法

p22 --- 事件機制

1、查看事件詳情信息

p23 ---?組件的自定義數據屬性

1、新增detail頁

2、wx.navigateTo(OBJECT)

3、參數化的page path

p24 --- 實現電影詳情頁的基本框架

1、恢復weekly頁上每個“返回本周”按鈕的點擊行為(catchtap應用)

2、頁面初始化獲取query參數 : onLoad(options)?

p25 --- 發起請求API

1、服務器域名配置

2、測試網址：https://coder10.net/test/wxapp.htm

p26?---?調用豆瓣API獲取電影詳情數據并展示

1、電影詳情頁的設置

2、判斷狀態碼，避免出錯

3、將所有的電影的id值設置為正確值：

p27 --- 動態設置導航欄loading狀態和標題

1、導航欄官方文檔

p28 --- 頁面事件處理函數與自定義頁面轉發

2、自定義頁面轉發【默認狀態】

3、頁面事件處理函數

4、頁面事件處理函數【設置標題】?

5、動態地設置頁面標題

附：【使用云開發】

1、上傳代碼失敗-展示截圖

2、使用云開發，新建文件夾

3、復制云開發中的圖片地址?

4、替換文件中的圖片地址

5、底部導航欄-原配置頁面

p17 --- 條件渲染

概念---條件成立時，組件才渲染生成。
?wx：if
?wx：if VS hidden

1、使用渲染條件與 hidden屬性，有什么區別?

hidden取值，要取反！【當且僅當博主對這個電影是強烈推薦的時候，要顯示出強烈推薦這個標志?！?/li>

使用hidden屬性時，這個元素總是要先被渲染生成的。hidden屬性只是控制了其可見性而已。

使用hidden屬性時，初始化開銷較大，若控制條件發生切換，節點數無變化，開銷較小。

使用條件渲染時，當渲染條件發生切換，節點數會有對應的變化（例：渲染條件：true-->false），需要生成對應的元素及后代元素，然后將其插入到對應的節點數中。

對于可見性需要頻繁切換的情況，不建議使用條件渲染。

對于hidden而言，即使用戶得到了數據里面，博主沒有去強烈推薦這個電影，那么它也會在初始生成的時候，去生成這么一個元素。

weekly.wxml :

<view class="container"><image class="about-banner" src="{{thisWeekMovie.imagePath}}"></image><text>這里是頁面二~</text><text>{{thisWeekMovie.name}}</text><text>點評：{{thisWeekMovie.comment}}</text><text>{{count + score}}</text><text>{{(score >= 666) ? "及格~" : "不及格！！！"}}</text><text wx:if="{{thisWeekMovie.isHighlyRecommended}}" style="font-size:21px; color: red;">推薦1</text><text hidden="{{!thisWeekMovie.isHighlyRecommended}}" style="font-size:21px; color: red;">推薦2</text><text hidden="{{thisWeekMovie.isHighlyRecommended}}" style="font-size:21px; color: red;">推薦3</text></view>

weekly.js :

// pages/weekly/weekly.js Page({/*** 頁面的初始數據*/data: {thisWeekMovie: {name: "教父",comment: "最精彩的劇本, 最真實的黑幫電影。",imagePath: "/images/2.gif",isHighlyRecommended: false},count: 123,score: 666},/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function() {},/*** 生命周期函數--監聽頁面顯示*/onShow: function() {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function() {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function() {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function() {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function() {},/*** 用戶點擊右上角分享*/onShareAppMessage: function() {} })

p18 --- 列表渲染

列表渲染 --- 重復的渲染生成組件
wx ：for

1、【列表渲染】硬代碼實現：

weekly.wxml :

<view><text>本周推薦</text><view class="movie"><image class="movie-image" src="{{weeklyMovieList[0].imagePath}}"></image><view class="movie-details"><text>{{weeklyMovieList[0].name}}</text><text>點評：{{weeklyMovieList[0].comment}}</text><text wx:if="{{weeklyMovieList[0].isHighlyRecommended}}" style="font-size:21px; color: red;">強推1</text><text hidden="{{!weeklyMovieList[0].isHighlyRecommended}}" style="font-size:21px; color: red;">強推2</text></view></view><view class="movie"><image class="movie-image" src="{{weeklyMovieList[1].imagePath}}"></image><view class="movie-details"><text>{{weeklyMovieList[1].name}}</text><text>點評：{{weeklyMovieList[1].comment}}</text><text wx:if="{{weeklyMovieList[1].isHighlyRecommended}}" style="font-size:21px; color: red;">強推1</text><text hidden="{{!weeklyMovieList[1].isHighlyRecommended}}" style="font-size:21px; color: red;">強推2</text></view></view></view>

weekly.wxss :

/* pages/weekly/weekly.wxss *//* .container {background-color: pink;height: 100vh;display: flex;flex-direction: column;justify-content: space-around;align-items: center; } */.movie {display: flex; }.movie-details {display: flex;flex-direction: column; }.movie-image {width: 150px;height: 150px; }

weekly.js :

// pages/weekly/weekly.js Page({/*** 頁面的初始數據*/data: {weeklyMovieList: [{name: "泰坦尼克號",comment: "失去的才是，永恒的。",imagePath: "/images/1.gif",isHighlyRecommended: true,},{name: "這個殺手不太冷",comment: "小蘿莉與怪蜀黍，純真爛漫的愛情故事。",imagePath: "/images/2.gif",isHighlyRecommended: true},{name: "教父",comment: "最精彩的劇本, 最真實的黑幫電影。",imagePath: "/images/3.gif",isHighlyRecommended: true}],count: 123,score: 666},/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function() {},/*** 生命周期函數--監聽頁面顯示*/onShow: function() {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function() {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function() {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function() {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function() {},/*** 用戶點擊右上角分享*/onShareAppMessage: function() {} })

2、【列表渲染】優化代碼：

item：內置循環變量直接訪問到本次所遍歷到的數組中的值。通過item變量，對每一個對象的各個分量屬性進行綁定輸出。

index：內置循環變量，當前所遍歷到的item值在數組中的下標。

weekly.wxml :

weekly.wxss :

.movie {display: flex; }.movie-details {display: flex;flex-direction: column;width: 600rpx; }.movie-image {width: 200rpx;height: 200rpx; }

p19 --- 使用 swiper 組件

swiper 組件 --- 用來表示一個滑動容器，常用來實現幻燈片輪播 or 輪播圖。子元素用swiper-item來表示。

swiper 組件 --- 從列表展示變為幻燈片輪播?展示。

1、swiper 小例子 --- 運行截圖

2、swiper 小例子 --- 實現代碼

<view><text>本周推薦</text><view class="movie" wx:for="{{weeklyMovieList}}"><image class="movie-image" src="{{item.imagePath}}"></image><view class="movie-details"><text>{{item.name}}</text><text>第 {{index + 1}} 周：{{item.name}}</text><text>點評：{{item.comment}}</text></view></view><swiper style="background: #FFC0CB"><swiper-item>111</swiper-item><swiper-item>222</swiper-item><swiper-item>333</swiper-item></swiper><swiper style="background: #7FFFAA; height: 260px;"><swiper-item><text>111</text><image src="/images/1.png"></image></swiper-item><swiper-item><text>222</text><image src="/images/2.png"></image></swiper-item><swiper-item><text>333</text><image src="/images/3.png"></image></swiper-item></swiper></view>

3、幻燈片輪播的樣式優化

優化效果圖：

weekly.wxml :

<view><text>本周推薦</text><swiper class="movie-swiper" indicator-dots="{{true}}" previous-margin="50rpx" next-margin="50rpx"><swiper-item class="movie" wx:for="{{weeklyMovieList}}"><view class="container movie-card"><image class="movie-image" src="{{item.imagePath}}"></image><text>{{item.name}}</text><text>第 {{index + 1}} 周：{{item.name}}</text><text>點評：{{item.comment}}</text><text wx:if="{{item.isHighlyRecommended}}" style="font-size:21px; color: red;">強烈推薦</text></view></swiper-item></swiper> </view>

weekly.wxss :

.movie {display: flex; }.movie-details {display: flex;flex-direction: column;width: 600rpx; }.movie-image {width: 200rpx;height: 200rpx; } .movie-swiper{height: 90vh; }.movie-card{height: 100%;width: 100%;background-color: #FFEBCD;margin: 0 20rpx; }

p20 --- 頁面的生命周期函數

1、需求1: swiper中如何默認切換到最后一頁幻燈片。

2、需求2: 非本周幻燈片頁添加 “返回本周“按鈕

3、頁面狀態數據如何初始化、onLoad(options)

p21 --- 更新數據

1、this.setData() 方法

小程序并沒有提供類似DOM的JS API來直接更新視圖。
this.setData()方法-更新數據并讓框架自動更新相關視圖。
更新是增量式的。
單向綁定。

p22 --- 事件機制

事件綁定
冒泡事件與非冒泡事件
bind綁定 VS catch綁定
事件對象簡介?

事件分類：?https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

事件分為冒泡事件和非冒泡事件：

冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞。

非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。

1、查看事件詳情信息

p23 ---?組件的自定義數據屬性

1、新增detail頁

2、wx.navigateTo(OBJECT)

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。使用?wx.navigateBack?可以返回到原頁面。小程序中頁面棧最多十層。

導航 API

wx.navigateTo(Object object)

保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到 tabbar 頁面。

使用?wx.navigateBack?可以返回到原頁面。小程序中頁面棧最多十層。

wx.redirectTo(Object object)

關閉當前頁面，跳轉到應用內的某個頁面。

但是不允許跳轉到 tabbar 頁面。

wx.switchTab(Object object) 跳轉到 tabBar 頁面，并關閉其他所有非 tabBar 頁面。 wx.reLaunch(Object object)

基礎庫 1.1.0 開始支持，低版本需做兼容處理。

關閉所有頁面，打開到應用內的某個頁面。

wx.navigateBack(Object object)

關閉當前頁面，返回上一頁面或多級頁面。

可通過?getCurrentPages?獲取當前的頁面棧，決定需要返回幾層。

3、參數化的page path

p24 --- 實現電影詳情頁的基本框架

1、恢復weekly頁上每個“返回本周”按鈕的點擊行為(catchtap應用)

2、頁面初始化獲取query參數 : onLoad(options)?

希望 detail頁被打開時，自身能夠知道在對應的完整url中被指定的id參數是多少?
小程序框架在每次以完整url方式打開detail頁時，會首先調用detail頁?注冊的onLoad()生命周期函數?對?detail頁?進行初始化。在調用onLoad()函數前，會首先將url中“？”后的每個參數值解析出來，組合成一個對應的js對象。將對象作為實參值，傳遞給onLoad()函數。所以，onLoad()函數在具體執行初始化的過程中，就可以從接收到的對象中獲取到url中各個參數的取值。

onLoad()方法?在被調用的時候，會接收到一個options對象，從options對象中可以獲取到本次被打開時?被指定的各種query的取值。

p25 --- 發起請求API

1、服務器域名配置

官方文檔：?https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html

2、測試網址：https://coder10.net/test/wxapp.htm

在運行時，接收到response之后，無論狀態碼是啥（404 ，not found / 403，forbidden ），request調用成功，調用success。success回調函數接收res對象包含了response中的哪些數據：

data：抽取了http response中<body></body>文本，將其轉化為字符串。

header中，Content-Type: "text/ html"，Content-Type返回類型為text/ html。
?
Content-Type返回類型為json類型，data對應json類型文本。

statusCode ：抽取狀態碼，進行保存。

p26?---?調用豆瓣API獲取電影詳情數據并展示

調用豆瓣API獲取電影詳情數據并展示
豆瓣Restful API簡介
通過wx.request來調用豆瓣的獲取電影條目信息API
403 Forbidden的問題
- )原因
- )解決辦法
detail頁具體展示

1、電影詳情頁的設置

2、判斷狀態碼，避免出錯

3、將所有的電影的id值設置為正確值：

detail.js 文件代碼 :

// pages/detail/detail.js Page({/*** 頁面的初始數據*/data: {},/*** 生命周期函數--監聽頁面加載*/onLoad: function(options) {console.log(options.id)this.setData({mid: options.id})//將頁面對象的引用進行保存。//在success回調函數處理時，直接通過that變量獲取外部的頁面對象的引用var that = this;//發起request請求【異步調用】wx.request({// url: 'https://douban.uieee.com/v2/book/1220562',url: 'https://douban.uieee.com/v2//movie/subject/' + options.id,//https://douban.uieee.com/v2/book/1220562 前面的說的不是電影反正能用就行//https://api.douban.com/v2/movie/subject/1291841//豆瓣當前可用api:https://douban.uieee.com/v2/book/1220562//如果豆瓣沒辦法用用時光網也可以https://ticket-api-m.mtime.cn/movie/detail.api?locationId=290&movieId=103937//https://coder10.net/test/wxapp.htm//https://api.douban.com/a/b.jsp// method: 'GET', //默認get()方法指定使用什么http的請求方法// data: { // 在請求中，捎帶一些數據給server服務器// x: 1,// y: 2// },// //對請求的header字段進行特定設置。捎帶一些源數據給serverheader: {//必須要設置"content-type":"json",不然會報錯 400 (Bad Request)"content-type": "json"},//小程序接收到服務器返回的response后，如何處理？//通過幾個對應的回調函數來處理。/**小程序接收到server端返回的http response后，對response進行解析，* 將其中的一些關鍵數據抽取出來封裝成js對象，* 傳遞給success回調函數進行處理。*/success: function(res) {console.log(res)if (res.statusCode == 200) {that.setData({ //this指向success所在的參數對象wx.request,不指向頁面對象//將信息保存到內部狀態數據中movie: res.data})}},/*接口調用失敗的回調函數：因網絡原因，請求發不出去or在規定的時間段內，未收到server端返回的response */fail: function() {},/*無論失敗還是成功，complete都會被調用。 */complete: function() {}})console.log("ok-666")},/*** 生命周期函數--監聽頁面初次渲染完成*/onReady: function() {},/*** 生命周期函數--監聽頁面顯示*/onShow: function() {},/*** 生命周期函數--監聽頁面隱藏*/onHide: function() {},/*** 生命周期函數--監聽頁面卸載*/onUnload: function() {},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function() {},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function() {},/*** 用戶點擊右上角分享*/onShareAppMessage: function() {}})

detailwxml 文件代碼：

<text>pages/detail/detail.wxml \n</text> <text>detail page for movid id = <text style="color: red;">{{mid}}</text></text> <view class="container"><image class="detail-image" src="{{movie.images.small}}"></image><text style="font-weight:bold" font-size:50rpx>{{movie.title}}</text><text>想看：{{movie.wish_count}}</text><text>看過：{{movie.collect_count}}</text><text>評分：{{movie.rating.average}}</text><text>簡介：{{movie.summary}}</text> </view>

運行截圖：

p27 --- 動態設置導航欄loading狀態和標題

1、導航欄官方文檔

https://developers.weixin.qq.com/miniprogram/dev/api/ui/navigation-bar/wx.showNavigationBarLoading.html

導航欄

wx.showNavigationBarLoading(Object object)

在當前頁面顯示導航條加載動畫。

wx.setNavigationBarTitle(Object object)

動態設置當前頁面的標題。

wx.setNavigationBarColor(Object object)

[ 基礎庫 1.4.0 開始支持，低版本需做兼容處理。 ]設置頁面導航條顏色。

wx.hideNavigationBarLoading(Object object)

在當前頁面隱藏導航條加載動畫。

wx.hideHomeButton(Object object)

[?基礎庫 2.8.3 開始支持，低版本需做兼容處理。 ]

隱藏返回首頁按鈕。微信7.0.7版本起，當用戶打開的小程序最底層頁面是非首頁時，默認展示“返回首頁”按鈕，開發者可在頁面 onShow 中調用 hideHomeButton 進行隱藏。

先獲取電影id，然后通過request方法調用，發出請求，發出請求后立刻返回，頁面初始化完成。開始進入wxml視圖的渲染，視圖在渲染的時候回去找內部狀態變量movie?！镜沁@個時候，并沒有movie，因為還沒有收到server端返回的response---即沒有進入success回調函數代碼的執行，沒有通過setData()函數來設置內部狀態變量movie?！克?#xff0c;當wxml頁面在渲染的時候，找不到內部狀態變量movie，頁面會將所有數據綁定的表達式渲染的結果置為空白。只有當很短的一段時間后，成功收到豆瓣API server返回的數據后，才會進入success回調函數執行代碼。這個時候，才會真正地將電影詳情數據對象保存到新增的內部狀態變量movie中。并且，通過setData()函數的調用令框架自動更新視圖。然后，視圖中的各個數據字段，才會加載完成，并顯示。

需要在加載數據時，給用戶提示。

p28 --- 頁面事件處理函數與自定義頁面轉發

wx.stopPullDownRefresh(Object object)? ?[?基礎庫 1.5.0 開始支持，低版本需做兼容處理。 ]? ?停止當前頁面下拉刷新。

wx.onShareAppMessage(function callback)? 監聽用戶點擊右上角菜單的「轉發」按鈕時觸發的事件

2、自定義頁面轉發【默認狀態】

3、頁面事件處理函數

4、頁面事件處理函數【設置標題】?

5、動態地設置頁面標題

根據返回的電影詳情數據中的重要字段取值，動態地設置頁面標題：

“ 電影周周看 ”項目，相關視頻到此結束！【p1---p28】展示效果圖：

附：【使用云開發】

1、上傳代碼失敗-展示截圖

2、使用云開發，新建文件夾

3、復制云開發中的圖片地址?

4、替換文件中的圖片地址

5、底部導航欄-原配置頁面

總結

以上是生活随笔為你收集整理的微信小程序基础2【条件渲染、swiper组件、生命周期、发起请求API】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：二叉树---根据【先序、中序序列】and
下一篇： Github【网站打不开 / 创建仓库

编程问答

微信小程序 基础2【条件渲染、swiper组件、生命周期、发起请求API】

p17 --- 條件渲染

1、使用 渲染條件 與 hidden屬性，有什么區別?

p18 --- 列表渲染

1、【列表渲染】硬代碼 實現：

2、【列表渲染】優化代碼 ：

p19 --- 使用 swiper 組件

1、swiper 小例子 --- 運行截圖

2、swiper 小例子 --- 實現代碼

3、幻燈片輪播的樣式優化

p20 --- 頁面的生命周期函數

1、需求1: swiper中如何默認切換到最后一頁幻燈片。

2、需求2: 非本周幻燈片頁 添加 “返回本周“按鈕

3、頁面狀態數據如何初始化、onLoad(options)

p21 --- 更新數據

1、this.setData() 方法

p22 --- 事件機制

1、查看事件詳情信息

p23 ---?組件的自定義數據屬性

1、新增detail頁

2、wx.navigateTo(OBJECT)

3、參數化的page path

p24 --- 實現電影詳情頁的基本框架

1、恢復weekly頁上每個“返回本周”按鈕的點擊行為(catchtap應用)

2、頁面初始化獲取query參數 : onLoad(options)?

p25 --- 發起請求API

1、服務器域名配置

2、測試網址 ：https://coder10.net/test/wxapp.htm

p26?---?調用豆瓣API獲取電影詳情數據并展示

1、電影詳情頁的設置

2、判斷狀態碼，避免出錯

3、將所有的電影的id值設置為正確值：

p27 --- 動態設置導航欄loading狀態和標題

1、導航欄 官方文檔

p28 --- 頁面事件處理函數與自定義頁面轉發

2、自定義頁面轉發【默認狀態】

3、頁面事件處理函數

4、頁面事件處理函數【設置標題】?

5、動態地設置頁面標題

附：【使用云開發】

1、上傳代碼失敗-展示截圖

2、使用 云開發，新建文件夾

3、復制 云開發中的圖片地址?

4、替換 文件中的圖片地址

5、底部導航欄-原配置頁面

總結

微信小程序基础2【条件渲染、swiper组件、生命周期、发起请求API】

1、使用渲染條件與 hidden屬性，有什么區別?

1、【列表渲染】硬代碼實現：

2、【列表渲染】優化代碼：

1、swiper 小例子 --- 運行截圖

3、幻燈片輪播的樣式優化

1、需求1: swiper中如何默認切換到最后一頁幻燈片。

2、需求2: 非本周幻燈片頁添加 “返回本周“按鈕

3、頁面狀態數據如何初始化、onLoad(options)

1、this.setData() 方法

1、新增detail頁

2、wx.navigateTo(OBJECT)

3、參數化的page path

1、恢復weekly頁上每個“返回本周”按鈕的點擊行為(catchtap應用)

2、頁面初始化獲取query參數 : onLoad(options)?

1、服務器域名配置

2、測試網址：https://coder10.net/test/wxapp.htm

1、電影詳情頁的設置

2、判斷狀態碼，避免出錯

1、導航欄官方文檔

2、自定義頁面轉發【默認狀態】

3、頁面事件處理函數

4、頁面事件處理函數【設置標題】?

1、上傳代碼失敗-展示截圖

2、使用云開發，新建文件夾

3、復制云開發中的圖片地址?

4、替換文件中的圖片地址

5、底部導航欄-原配置頁面