小程序條件渲染demo

1. 微信小程序怎麼打開demo

1. 直接發現小程序里搜索-

2. 點擊進入就可以打開-demo

2. 微信小程序開發——列表渲染 & 條件渲染 & tabBar & 頁面跳轉

在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。即wx:for指令用於循環數組數據，生成組件。
循環出來的每一項通過item返回，每一項對應的索引，通過index返回。

wx:key=""，設置每一項唯一的標識。循環列表時，添加wx:key的好處是，將來列表發生變化時重新渲染列表的損耗為更低。

使用 wx:for-item 可以指定數組當前元素的變數名，使用 wx:for-index 可以指定數組當前下標的變數名：

條件渲染可以使用 wx:if 或 hidden 。
一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好；如果在運行時條件不大可能改變，則 wx:if 較好。

wx:if用於條件渲染：條件為真生成裡面的內容，條件為假不會生成裡面的內容。扮祥（每次重新生成內容）
也可以用 wx:elif 和 wx:else 來添加一個 else 塊。

hidden用於條件渲染：條件為真隱藏裡面的內容，條件為假顯示裡面的內容。（每次切換樣式）

在app.json文鬧純件中添加tabBar節點。tabBar是小程序客戶端底部或頂部tab欄的實現。

color： tab上的文字默認顏色，僅支持十六進制顏色。
selectedColor： tab上的文字選中時的顏色，僅支持十六進制顏色。
backgroundColor： tab的背景色，僅支持十六進制顏色。
borderStyle： tabbar上邊框的顏色， 僅支持 black / white。
position： tabBar的位置，默認值是: bottom，僅支持 bottom / top。當 position 為 top 時，不顯示 icon。
custom： 自定義tabBar。

list是一個數組，它定義了tab的列表。只能配置最少2個、最多5個tab。
pagePath： 頁面路徑，必須在 pages 中先定義。
text： tab 上按鈕文字。
iconPath： 圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。
selectedIconPath： 選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。

跳轉到普通頁，可以直接通過返回按鈕返回。

navigateTo()方法，用於跳轉普通頁面。可以直接通過返回按鈕返回。

頁液缺咐面js文件中添加方法：

redirectTo()方法，關閉當前頁面再跳轉到指定頁，不能通過返回按鈕返回頁面。該方法不能用於跳轉tabBar頁面。

頁面js文件中添加方法：

跳轉到tabBar頁面，通過tabBar按鈕返回。

如果要使用navigator組件跳轉tabBar頁面，需要設置open-type="switchTab"。

switchTab()方法，用於跳轉tabBar頁面。

頁面js文件中添加方法：

3. 條件渲染wx:if

小程序中使用 wx:if="{{condition}}" 進行條件渲染，當 condition 為 true 時，攜帶 wx:if 這個可知屬性的標鬧閉橡簽才會被渲染顯示。

之前在項目中就遇到過一個問題：
頁面的 wxml 如下：

結合兩張圖渲染順序可以看出， image 是最後渲染加在頁面上的，但從 DOM 結構來看， image 應該會早於 white-bgView 先渲染。那麼導致實際與預期出現偏差但原因是什麼呢？

查看 image 標簽，可以猜測應該 wx:if 控制屬性影響的，為驗證猜想，去掉 wx:if 屬性後，小程序調試器 xml 窗口顯示結構如預期：

Tip：官方文檔也將wx:if和hidden進行比較態首，在具體實際使用中如何選液旁擇有很大幫助。

4. 微信小程序--渲染頁面（列表渲染，條件渲染）

                                                                   列表渲染

1、wx:for

wx:for指令用於循環數組數據，生成組件。

循環出來的每一項通過item返回，每一項對應的索引，通過index返回。

    <view wx:for="{{songs}}" wx:key="index" class="items">

       <text>{{index}}--{{item.id}}--{{item.name}}</text>

    </view>

2、wx:key

wx:key=""，設置每一項唯一的標識。循環列表時，添加wx:key的好處是，將來列表發生變化時重新渲染列表的損耗為更低。

                                                             條件渲染

條件渲染可以使用wx:if或hidden。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。

1、wx:if

wx:if用於條件渲染：條件為真生成裡面的內容，條件為假不會生成裡面的內容。（每次重新生成內容）

也可以用wx:elif 和 wx:else 來添加一個 else 塊。

  <view wx:if="{{typeID == 1}}"> 1 </view>

  <view wx:elif="{{typeID == 2}}"> 2 </view>

  <view wx:else> 3 </view>

2、hidden

hidden用於條件渲染：條件為真隱藏裡面的內容，條件為假顯示裡面的內容。（每次切換樣式）

  <view hidden="{{typeID!= 2}}"> 1 </view>

5. 微信小程序（上）

注冊開發者賬號： https://mp.weixin.qq.com/

安裝小程序開發工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

創建項目

pages目錄：用於存放所有的頁面。

utils目錄：用於存放工具類文件。

app.js：是入口文件，程序在運行時，首先要執行該文件。

app.json：是全局配置文件，用於配置小程序的信息（它裡面配置的是全局信息）。

app.wxss：是全局樣式文件。全局樣式文件裡面定義的選擇器，在所有的頁面中生效。

project.config.json：是項目配置文件。

sitemap.json：是SEO配置文件，方便用戶搜索到該小程序。

（1）pages配置項

pages裡面注冊的是視圖。用於指定小程序由哪些頁面組成，每一項都對應一個頁面的路徑（含文件名）信息

（2）window配置項

window 是全局窗口配置。

backgroundTextStyle 設置文本樣式（下拉loading的樣式），僅支持 dark / light。

navigationBarBackgroundColor 設置導航欄背景。

navigationBarTitleText 設置導航欄文本。

navigationBarTextStyle 設置導航欄標題顏色，僅支持 black / white。

（3）style

style 設置樣式級別，默認是v2。

（4）sitemapLocation

sitemapLocation 指明sitemap.json 的位置；默認為 'sitemap.json' 即在 app.json 同級目錄下名字的 sitemap.json 文件。

每一個頁面由四個文件組成：xxx.wxml文件、xxx.wxss文件、 xxx.js文件和xxx.json文件。

（1）xxx.wxml文件

xxx.wxml文件，就相當於一個html文件。在wxml文件中，不能寫傳統的html標簽，只能寫微信提供的組件。

① view組件

相當於div標簽。

② text組件

相當於span標簽。

③ swiper

swiper是滑塊視圖容器，它裡面只能放swiper-item組件。

swiper組件的常用屬性：

circular是銜接滑動

autoplay是自動切換

interval是自動切換時間間隔

indicator-dots是否顯示面板指示點

indicator-color指示點顏色

indicator-active-color當前選中的指示點顏色

④ image

image是圖片組件，最好全部採用網路圖片，因為小程序的總體積不允許超過2MB。

（2）xxx.wxss文件

xxx.wxss文件，就相當於一個css文件。在wxss文件中，最好不要寫標簽選擇器和id選擇器，統一寫類選擇器。

為了讓小程序裡面的內容在各種設備上能夠自適應顯示，微信推出了響應式單位：rpx。在iphone6中，2rpx=1px。

（3）xxx.js文件

xxx.js文件，是交互文件（核心文件）。

Page()函數，返回頁面對象，該函數需要傳一個配置參數，這個配置參數是一個對象。在這個配置對象中，定義當前頁面的所有內容。

① data

定義頁面的數據。

② 自定義函數

開發者可以添加任意的函數或數據到Object 參數中，在頁面的函數中用this可以訪問。

（4）xxx.json文件

xxx.json文件，是頁面的配置文件（它裡面配置的是當前頁面信息）。

WXML 中的動態數據均來自對應 Page 的 data。

（1）獲取data中數據

通過插值表達式{{}}，可以顯示js裡面定義的data裡面的數據。

（2）組件屬性(需要在雙引號之內)

（3）運算

可以在{{}} 內進行簡單的運算。

① 三元運算

② 邏輯判斷

bindtap是觸屏事件，其實就是相當於網頁中的點擊事件。

小程序中bindtap綁定方法時不能傳參數。所以組件通過data-xxx傳遞數據。

注意： 自定義屬性的命名用駝峰或者大寫命名，小程序內部會自動轉成小寫。

8、setData()方法

setData()方法，更新頁面中數據。頁面數據更新後，調用setData()方法重新渲染到頁面。

wx:for指令用於循環數組數據，生成組件。

循環出來的每一項通過item返回，每一項對應的索引，通過index返回。

wx:key=""，設置每一項唯一的標識。循環列表時，添加wx:key的好處是，將來列表發生變化時重新渲染列表的損耗為更低。

條件渲染可以使用wx:if或hidden。

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。

wx:if用於條件渲染：條件為真生成裡面的內容，條件為假不會生成裡面的內容。（每次重新生成內容）

也可以用wx:elif 和 wx:else 來添加一個 else 塊。

hidden用於條件渲染：條件為真隱藏裡面的內容，條件為假顯示裡面的內容。（每次切換樣式）

在app.json文件中添加tabBar節點。tabBar是小程序客戶端底部或頂部tab欄的實現。

color：tab上的文字默認顏色，僅支持十六進制顏色。

selectedColor：tab上的文字選中時的顏色，僅支持十六進制顏色。

backgroundColor：tab的背景色，僅支持十六進制顏色。

borderStyle：tabbar上邊框的顏色， 僅支持 black / white。

position：tabBar的位置，默認值是: bottom，僅支持 bottom / top。當 position 為 top 時，不顯示 icon。

custom：自定義tabBar。

（2）list

list：tab的列表。

list 接受一個數組，只能配置最少 2 個、最多 5 個 tab。

pagePath：頁面路徑，必須在pages 中先定義。

text：tab 上按鈕文字。

iconPath：圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。selectedIconPath：選中時的圖片路徑，icon 大小限制為 40kb，建議尺寸為 81px * 81px，不支持網路圖片。

（1）跳轉普通頁面

方法① navigator組件

方法② navigateTo()方法

navigateTo()方法，用於跳轉普通頁面。

（2）跳轉tabBar頁面

方法① navigator組件

如果要使用navigator組件跳轉tabBar頁面，需要設置open-type="switchTab"。

方法② switchTab()方法

switchTab()方法，用於跳轉tabBar頁面。

title：提示的標題

content：提示的內容

success：介面調用成功的回調函數。回調函數中的confirm屬性返回true，表示點擊的是確定按鈕，否則是取消按鈕。

title：提示的內容

icon：圖標

ration：消息提示框的顯示時間

mask：是否顯示透明蒙層，防止觸摸穿透

模塊化語法有兩種：① commonjs規范，② es6規范。

nodejs環境採用的就是commonjs規范。採用exports 或 mole.exports 導出成員，採用require() 導入成員。

微信小程序支持commonjs規范，同時還支持官方的ES6規范。ES6規范採用export 導出成員，採用import 導入成員。

將封裝的方法放到util目錄下的js文件中。可以新建js文件，也可以寫在直接util.js文件中。

（1）確認框方法

定義確認框方法，並導出

（2）消息框方法

定義消息框方法，並導出

（3）獲取事件參數的方法

import是ES6的導入語句。

wx對象是微信小程序的全局對象，在任何地方都可以使用。

（1） 注冊語句

（2） 在app.js入口文件中導入

注意： 注冊給wx對象的方法，需要在app.js文件中導入，才可使用。

（3） 調用方法

wx.方法名(參數)

6. 微信小程序demo是什麼意思

Demo裡面定義了兩個初始化函數和一個全局對象,從輪山小程序的API上可以查到。 我們一個一個來說。 1.onLaunch函數是小程序初始化完成後執行的函數,此時可以調取微信端的一些廳殲資源,比如緩存。 2.getUserInfo函數並不是API中直接臘伏中獲取用戶信息的函數,而其內部的wx.getUserInfo才是

7. 微信小程序如何渲染頁面

運行微信開發者工具

選擇小程序項目


新建小程序項目


進入螞橘純小程序的開發界面


在index.wxml頁面中,添加一個按鈕

名稱為重新悶咐渲伍念染

<button>重新渲染</button>

添加後的效果如圖


給這個按鈕添加事件

<button bindtap="onrefresh">重新渲染</button>

進入index.js文件

完成事件方法

在onrefresh中完成重新渲染的事件

, onrefresh:function(){

wx.showToast({

title: '開始重新渲染',

icon: 'success',

ration: 2000

});

this.onLoad();

}

8. 微信小程序渲染層網路層錯誤怎麼解決

1、首先通過快捷方式打開微信小程序開發工具，在index.wxml文件中，插入view標簽，然後使用wx:for循環，wx:if和wx:else條件渲染，生成不同的組件。

9. 微信小程序 教程之條件渲染

系列文章：
微信小程序
教程之WXSS
微信小程序
教正逗納程之引用
微信小程序
教程之事件
微信小程序
教程之模板
微信小程序
教程之列表渲舉沒染
微信小程序
教程之條件渲染
微信小程序
教程之數據綁定
微信小程序
教程之WXML
wx:if
在MINA中，我們用wx:if="{{condition}}"來判斷是否需要渲染該代碼塊：
<view
wx:if="{{condition}}">
True
</view>
也可以用wx:elif和wx:else來添加一個else塊：
<view
wx:if="{{length
>
5}}">
1
</view>
<view
wx:elif="{{length
>
2}}">
2
</view>
<view
wx:else>
3
</view>
block
wx:if
因為wx:if
是一個控制屬性，需要將它添加到一個標簽上。但是如果我們想一次性判斷多個組件標簽，我們可以使指槐用一個<block/>標簽將多個組件包裝起來，並在上邊使用wx:if控制屬性。
<block
wx:if="{{true}}">
<view>
view1
</view>
<view>
view2
</view>
</block>
注意：
<block/>並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
wx:if
vs
hidden
因為wx:if之中的模板也可能包含數據綁定，所有當wx:if的條件值切換時，MINA有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。
同時wx:if也是惰性的，如果在初始渲染條件為false，MINA什麼也不做，在條件第一次變成真的時候才開始局部渲染。
相比之下，hidden就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
一般來說，wx:if有更高的切換消耗而hidden有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用hidden更好，如果在運行時條件不大可能改變則wx:if較好。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！