小程序學習--頁面設置

案例一? float頁面布局效果

1.案例的整體介紹

設計一個小程序，利用float布局來實現頁面的布局效果。有兩種效果分別是上左右下和上左中右下。

2.案例的代碼詳解

(1)index.wxss? 視覺層代碼解析

整體樣式是外框box和標題title,在app.wxss中寫明(詳細代碼見前文)，中間是兩個框架，bg1和bg2，框架中依次有4個和5個格子，在wxss文件中寫明。

(2)index.wxss?格式設置

第一塊背景框bg1，設置整體高度240，在box1,2,3,4分別為80，整體寬度200，box1,2,3,4都是100。邊距margin，第一參數表示上下邊距為，auto表示左右間距。實現上左右下的格式。

不同view默認另起一行。

box1中上下和bg1邊距為0，在bg1中水平居中。box2中左浮動，靠在bg1的左邊界上，默認換行了。box3中右浮動，靠在bg1的右邊界上，未換行。

box4清除了前面左右浮動的格式，默認換行?了，設置離bg1上下邊距為0，左右邊距平均分配，水平居中相對于bg2。

第二塊背景框架bg2，整體高度400，分別為100,200，200,200,100，寬度默認為布局寬度，text-align設置其中文本居中對齊。上下邊距為10，左右居中對齊。

header，定義行高即文本內容高度100，默認height和line-height相同，則文本水平居中對齊。

leftbar：寬度為bg2寬度的20%，且通過左浮動靠左對齊，設置列高為200，則高度height也為200，文本垂直居中。

main:寬度為bg2的60%，且通過左浮動考到leftbar旁邊，設置列高為200，等于文字高度，文本垂直居中。

rightBar中寬度為bg2的20%，且通過右浮動靠近bg2右側，左側剛好是main。列高為200，等于文字高度，文本垂直居中。

footer:列高為100，等于文字高度，文本垂直居中，清楚前面左右浮動，默認換行。沒有提供寬度，默認整行。

最后再來一個實現效果圖

(3)知識點介紹

(4)小總結 ---居中對齊的方式

1.水平居中對齊,margin: 10px? ?auto

2.垂直居中，?設置line-height，則height默認等于line-height，居中。

案例二? 簡單功能實現? 溫度單位轉換

(1)案例的整體介紹

(2)案例的代碼詳解

1.wxml中代碼介紹，視覺層

整體樣式和前面的一樣，外框加標題，在wxss中設置

里面第一個view顯示標題

第二個中有一個input組件，placeholder 占位符?顯示提示內容。type=digit表示輸入的是數字，顯示數字鍵盤， bindblur表示綁定了一個失去焦點事件，發生后會調用一個函數calc，進行運算，是在js中定義的，函數返回結果用一個數據的綁定,用｛｛變量｝｝實現，直接返回到F。通過數據和事件的綁定實現視圖層和邏輯層之間的通信。

2.wxss中樣式的設定。

設置上下、左右邊距，還有下邊框格式。

3.index.js邏輯層的設計。

事件綁定函數定義在page(｛｝)中? ?函數名：function(變量)｛｝，然后在函數中先定義變量。賦值直接獲取input組件的值，即在輸入完成后點擊其他地方引發失去焦點事件，函數被調用，輸入的值被傳入。那最后計算的值怎么從邏輯層傳遞到視圖層呢，this.setData是一個內置函數，參數是對象參數，通過冒號后面加計算表達式給對象賦值，然后在傳遞到視圖層看到結果。

4.實現效果，點擊其他地方，引發失去焦點事件，從而調用函數進行計算

(3)知識點介紹

順序結構?使用，其中有數學運算，數據的輸入和輸出。事件和數據的綁定。

案例三?條件語句和數學函數

1，整體介紹

條件結構和數學函數的使用，輸入值，通過函數的計算得到值，同樣也是用失去焦點的事件引發來開始計算。輸入輸出模式和上一個案例相同，但內部有條件判斷結構。

2，代碼介紹與詳解

(1)index.wxml視圖層的代碼詳解

首先是邊框和標題在app.wxss文件中設置。然后第二個view中有input組件，placeholder屬性，占位符，提示文本；綁定事件calc，bindblur表示失去焦點的事件，即輸入后點擊其他地方，輸入框就會失去焦點，從而調用這個函數。第二個view，輸出計算結果，進行數據的綁定，通過函數，有x就可以計算得到y，再根據setData函數將y的值發送到視圖層就可以看到結果了。

(2)index.wxss樣式定義

下劃線設置為1個像素，實線，藍色，設置上下邊距20，左右0。

(3)index.js?邏輯層設置

主要定義了一個失去焦點的函數，calc，參數e代表那個事件。首先定義了兩個變量x，y。x被賦值為失去焦點后獲得輸入框input組件的值。再計算，判斷加求解，其中用到判斷語句if--else，類似c語言語法，一些數學函數通過Math.函數名?來調用。最后再通過setData函數來將我們求解到的值返回到視圖層，實現效果。

3.知識點總結

(1)條件語句的使用格式

滑動查看更多

(2)數學函數的表示

(3)總結

在邏輯層和視覺層之間的交流先通過事件綁定來實現，失去焦點的函數? bindblur=“函數名”,在事件觸發后，通過?參數=事件.detail.value 得到輸入的值，在里面運算得到結果，再通過this.setData({? 輸出參數：?計算結果})?把輸出結果傳到視覺層。

案例三?計算學生平均成績 ---邏輯運算符和按鈕組件

1.案例的整體介紹和實現思路

有輸入框提供輸入，再經過中間運算后再輸出。

效果如圖

2.詳細的代碼實現過程

(1)index.wxml 視覺層代碼，主要是頁面顯示效果。

如前文的例子一樣，整體設置一個邊框box，開頭設置標題為title樣式。?

接著三個input組件的輸入框，placeholder占位符，提示語句，通過placeholder-class設置其對應樣式的，即提示文本樣式，定義在wxss中，用的樣式名是placeholder，最后 bindinput是事件?的綁定，表明我們輸入的時候引發的事件，一輸入就會引發事件調用后面的函數，type表示輸入的類型。button組件綁定了點擊按鈕事件對應的函數叫mysbumit，這些事件綁定的函數在js中定義。

顯示效果：正確顯示了邊框和標題以及要輸入的三個對象的格式，通過提交按鈕來把數據傳到邏輯層進行運算。

最后是一個輸出結果的顯示，view中的hidden屬性對應flag，而flag默認為ture，所以是被隱藏了，通過改變flag來進行顯示，達到結果。輸出布局樣式用的是content，而里面view的樣式用的是content-item,最后輸出還有數據的綁定，實現了邏輯層到視覺層之間的交流。在這段代碼中，得到結果后的輸出過程，先是隱藏，輸出再顯示，輸出依次有提示和通過數據綁定得到顯示的值。

(2)index.wxss? 樣式設置

page針對整個頁面的，背景為huise

占位符，指定字的大小15個像素

input組件的樣式，背景白色，高度，外邊距，左內邊距，邊界實線，粗細，顏色

botton，按鈕，邊距，上下，左右，背景顏色，文本顏色

content，輸出區域，背景，內邊距，文本顏色

content-item:content中的樣式：內邊距，文本大小，行距

(3)index.jx邏輯層的設置

首先定義了data的屬性值，flag為ture，輸出不顯示，后面可以說是初始化，為空。后面定義了三個事件綁定函數，用來給對應綁定的數據賦值，用我們輸入的值賦值到wxml中數據綁定的變量，輸入往后，點擊提交引發綁定函數，如果輸入的值有空會返回，如果都輸入?了，定義變量，進行計算，注意輸入默認為字符，如果要變為數組，可以 *1操作，得到數字結果，最后，通過setData，賦值給綁定數據，且給flag賦值為false，顯示輸出。

(3)總結和知識點介紹

開始是數據是輸入，有一些樣式設計，占位符提示和輸入樣式設計，然后輸入事件函數綁定，輸入后引發事件綁定的函數，輸入值在邏輯層通過this.setData({變量：e.detail.value})賦值綁定到變量上，這里是數據綁定，后面輸出通過數據綁定來實現。在邏輯層,通過上面已經賦值的變量，通過this.data.變量名使用變量進行判斷和計算，同樣e.detail.value也可以獲得輸入的值。最后的計算結果再通過賦值進行數據綁定，傳遞計算的值和修改某些參數的值，進而在視覺層可以使用輸出結果。

邏輯運算符同c語言，還有botton組件的使用方法。

案例四?循環求和計算器

1?利用循環語句求解輸入兩個數據之間的整數和

展現形式為：外框，標題，兩個輸入框輸入兩個數據，下面有一個輸出框。

設計思路：用失去焦點的事件綁定函數來傳入輸入的值，再通過循環計算，通過數據綁定來輸出數據。

(2)代碼詳解

1.wxml

先是邊框和標題，同之前的小程序設計。

再是一個view中有兩個input組件，給了一個placeholder屬性，文本提示，類型type是數字，用數字鍵盤輸入，bindblur表示一旦失去焦點后會調用函數，獲取輸入的數值，最后一個是數據的輸出結果，通過數據的綁定來實現的，sum在js中定義傳遞過來的，后面button，按鈕，點擊會引發調用事件函數calc，按鈕類型type是primary，對應圖中效果。文字為求和。

2.wxss

先定義了input組件的樣式，下邊框線，上下外邊距為20，左右外邊距為0，還有botton組件，外邊距為20，分開。

3.js

先定義了三個全局變量，在文件中各個位置都可以使用。

再定義了三個事件綁定函數，輸入完成后，一旦失去焦點，就會調用startNum和endNum，把輸入的值轉換用parseInt成整數賦值給變量。在calc中，變量賦值，然后有for循環求解，同c語言中for的使用，得到結果后，采用this.setData({})把全局變量sum的值渲染到視圖層

補充：一旦失去焦點事件發生后，會調用事件函數，獲取相應的數值，而顯示結果是通過數據綁定來實現的

(3)知識點總結

01

02

03

04

滑動查看更多

總結 ：循環語句的使用，同c

全局對象函數的使用 ---一些函數

全局變量的定義------定義位置

注意事項

微信小程序打好的代碼要編譯或者是保存，直接退出會不見的。(慘痛的經歷)

點擊藍字 關注我們

期待你的

分享

點贊

在看

新手學習，如有不對，請?指正！

總結

以上是生活随笔為你收集整理的C语言小案例_小程序学习（三）的全部內容，希望文章能夠幫你解決所遇到的問題。

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