視頻地址：

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取值，要取反！【當且僅當博主對這個電影是強烈推薦的時候，要顯示出強烈推薦這個標志。】

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

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

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

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

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

weekly.wxml :

<!--pages/weekly/weekly.wxml--> <!-- <text>pages/weekly/weekly.wxml</text> --><view class="container"><!--相當于div：容器元素--><!--src : http://... 發起http請求,從web服務器上加載。絕對路徑--><image class="about-banner" src="{{thisWeekMovie.imagePath}}"></image><text>這里是頁面二~</text><text>{{thisWeekMovie.name}}</text><!--綁定到 weekly.js 內部狀態變量thisWeekMovie name值--><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><!--src : http://... 發起http請求,從web服務器上加載。絕對路徑--><view class="movie-details"><text>{{weeklyMovieList[0].name}}</text><!--綁定到 weekly.js 內部狀態變量 weeklyMovieList[0] name值 內屬性--><text>點評：{{weeklyMovieList[0].comment}}</text><!-- <text>{{(score >= 666) ? "及格~" : "不及格！！！"}}</text> --><!-- <text>{{count + score}}</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 :

<view><text>本周推薦</text><view class="movie" wx:for="{{weeklyMovieList}}"><!--在視圖層提供循環的控制結構 數據綁定：針對綁定的數組，生成數組中的每一個值。--><image class="movie-image" src="{{item.imagePath}}"></image><!--src : http://... 發起http請求,從web服務器上加載。絕對路徑--><view class="movie-details"><text>{{item.name}}</text><!--綁定到 weekly.js 內部狀態變量 weeklyMovieList[0] name值 內屬性--><text>第 {{index + 1}} 周：{{item.name}}</text><text>點評：{{item.comment}}</text></view></view> </view>

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><!--src : http://... 發起http請求,從web服務器上加載。絕對路徑--><view class="movie-details"><text>{{item.name}}</text><!--綁定到 weekly.js 內部狀態變量 weeklyMovieList[0] name值 內屬性--><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"><!--indicator-dots 面板指示--><swiper-item class="movie" wx:for="{{weeklyMovieList}}"><!--在視圖層提供循環的控制結構 數據綁定：針對綁定的數組，生成數組中的每一個值。--><view class="container movie-card"><image class="movie-image" src="{{item.imagePath}}"></image><!--src : http://... 發起http請求,從web服務器上加載。絕對路徑--><!-- <view class="movie-details"> --><text>{{item.name}}</text><!--綁定到 weekly.js 內部狀態變量 weeklyMovieList[0] name值 內屬性--><text>第 {{index + 1}} 周：{{item.name}}</text><text>點評：{{item.comment}}</text><text wx:if="{{item.isHighlyRecommended}}" style="font-size:21px; color: red;">強烈推薦</text><!-- </view> --></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 文件代碼 ：

<!--pages/detail/detail.wxml--> <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。】所以，當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】的全部內容，希望文章能夠幫你解決所遇到的問題。

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