小程序?qū)W習(xí)--頁(yè)面設(shè)置

案例一? float頁(yè)面布局效果

1.案例的整體介紹

設(shè)計(jì)一個(gè)小程序，利用float布局來實(shí)現(xiàn)頁(yè)面的布局效果。有兩種效果分別是上左右下和上左中右下。

2.案例的代碼詳解

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

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

(2)index.wxss?格式設(shè)置

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

不同view默認(rèn)另起一行。

box1中上下和bg1邊距為0，在bg1中水平居中。box2中左浮動(dòng)，靠在bg1的左邊界上，默認(rèn)換行了。box3中右浮動(dòng)，靠在bg1的右邊界上，未換行。

box4清除了前面左右浮動(dòng)的格式，默認(rèn)換行?了，設(shè)置離bg1上下邊距為0，左右邊距平均分配，水平居中相對(duì)于bg2。

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

header，定義行高即文本內(nèi)容高度100，默認(rèn)height和line-height相同，則文本水平居中對(duì)齊。

leftbar：寬度為bg2寬度的20%，且通過左浮動(dòng)靠左對(duì)齊，設(shè)置列高為200，則高度height也為200，文本垂直居中。

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

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

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

最后再來一個(gè)實(shí)現(xiàn)效果圖

(3)知識(shí)點(diǎn)介紹

(4)小總結(jié) ---居中對(duì)齊的方式

1.水平居中對(duì)齊,margin: 10px? ?auto

2.垂直居中，?設(shè)置line-height，則height默認(rèn)等于line-height，居中。

案例二? 簡(jiǎn)單功能實(shí)現(xiàn)? 溫度單位轉(zhuǎn)換

(1)案例的整體介紹

(2)案例的代碼詳解

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

整體樣式和前面的一樣，外框加標(biāo)題，在wxss中設(shè)置

里面第一個(gè)view顯示標(biāo)題

第二個(gè)中有一個(gè)input組件，placeholder 占位符?顯示提示內(nèi)容。type=digit表示輸入的是數(shù)字，顯示數(shù)字鍵盤， bindblur表示綁定了一個(gè)失去焦點(diǎn)事件，發(fā)生后會(huì)調(diào)用一個(gè)函數(shù)calc，進(jìn)行運(yùn)算，是在js中定義的，函數(shù)返回結(jié)果用一個(gè)數(shù)據(jù)的綁定,用｛｛變量｝｝實(shí)現(xiàn)，直接返回到F。通過數(shù)據(jù)和事件的綁定實(shí)現(xiàn)視圖層和邏輯層之間的通信。

2.wxss中樣式的設(shè)定。

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

3.index.js邏輯層的設(shè)計(jì)。

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

4.實(shí)現(xiàn)效果，點(diǎn)擊其他地方，引發(fā)失去焦點(diǎn)事件，從而調(diào)用函數(shù)進(jìn)行計(jì)算

(3)知識(shí)點(diǎn)介紹

順序結(jié)構(gòu)?使用，其中有數(shù)學(xué)運(yùn)算，數(shù)據(jù)的輸入和輸出。事件和數(shù)據(jù)的綁定。

案例三?條件語(yǔ)句和數(shù)學(xué)函數(shù)

1，整體介紹

條件結(jié)構(gòu)和數(shù)學(xué)函數(shù)的使用，輸入值，通過函數(shù)的計(jì)算得到值，同樣也是用失去焦點(diǎn)的事件引發(fā)來開始計(jì)算。輸入輸出模式和上一個(gè)案例相同，但內(nèi)部有條件判斷結(jié)構(gòu)。

2，代碼介紹與詳解

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

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

(2)index.wxss樣式定義

下劃線設(shè)置為1個(gè)像素，實(shí)線，藍(lán)色，設(shè)置上下邊距20，左右0。

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

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

3.知識(shí)點(diǎn)總結(jié)

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

滑動(dòng)查看更多

(2)數(shù)學(xué)函數(shù)的表示

(3)總結(jié)

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

案例三?計(jì)算學(xué)生平均成績(jī) ---邏輯運(yùn)算符和按鈕組件

1.案例的整體介紹和實(shí)現(xiàn)思路

有輸入框提供輸入，再經(jīng)過中間運(yùn)算后再輸出。

效果如圖

2.詳細(xì)的代碼實(shí)現(xiàn)過程

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

如前文的例子一樣，整體設(shè)置一個(gè)邊框box，開頭設(shè)置標(biāo)題為title樣式。?

接著三個(gè)input組件的輸入框，placeholder占位符，提示語(yǔ)句，通過placeholder-class設(shè)置其對(duì)應(yīng)樣式的，即提示文本樣式，定義在wxss中，用的樣式名是placeholder，最后 bindinput是事件?的綁定，表明我們輸入的時(shí)候引發(fā)的事件，一輸入就會(huì)引發(fā)事件調(diào)用后面的函數(shù)，type表示輸入的類型。button組件綁定了點(diǎn)擊按鈕事件對(duì)應(yīng)的函數(shù)叫mysbumit，這些事件綁定的函數(shù)在js中定義。

顯示效果：正確顯示了邊框和標(biāo)題以及要輸入的三個(gè)對(duì)象的格式，通過提交按鈕來把數(shù)據(jù)傳到邏輯層進(jìn)行運(yùn)算。

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

(2)index.wxss? 樣式設(shè)置

page針對(duì)整個(gè)頁(yè)面的，背景為huise

占位符，指定字的大小15個(gè)像素

input組件的樣式，背景白色，高度，外邊距，左內(nèi)邊距，邊界實(shí)線，粗細(xì)，顏色

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

content，輸出區(qū)域，背景，內(nèi)邊距，文本顏色

content-item:content中的樣式：內(nèi)邊距，文本大小，行距

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

首先定義了data的屬性值，flag為ture，輸出不顯示，后面可以說是初始化，為空。后面定義了三個(gè)事件綁定函數(shù)，用來給對(duì)應(yīng)綁定的數(shù)據(jù)賦值，用我們輸入的值賦值到wxml中數(shù)據(jù)綁定的變量，輸入往后，點(diǎn)擊提交引發(fā)綁定函數(shù)，如果輸入的值有空會(huì)返回，如果都輸入?了，定義變量，進(jìn)行計(jì)算，注意輸入默認(rèn)為字符，如果要變?yōu)閿?shù)組，可以 *1操作，得到數(shù)字結(jié)果，最后，通過setData，賦值給綁定數(shù)據(jù)，且給flag賦值為false，顯示輸出。

(3)總結(jié)和知識(shí)點(diǎn)介紹

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

邏輯運(yùn)算符同c語(yǔ)言，還有botton組件的使用方法。

案例四?循環(huán)求和計(jì)算器

1?利用循環(huán)語(yǔ)句求解輸入兩個(gè)數(shù)據(jù)之間的整數(shù)和

展現(xiàn)形式為：外框，標(biāo)題，兩個(gè)輸入框輸入兩個(gè)數(shù)據(jù)，下面有一個(gè)輸出框。

設(shè)計(jì)思路：用失去焦點(diǎn)的事件綁定函數(shù)來傳入輸入的值，再通過循環(huán)計(jì)算，通過數(shù)據(jù)綁定來輸出數(shù)據(jù)。

(2)代碼詳解

1.wxml

先是邊框和標(biāo)題，同之前的小程序設(shè)計(jì)。

再是一個(gè)view中有兩個(gè)input組件，給了一個(gè)placeholder屬性，文本提示，類型type是數(shù)字，用數(shù)字鍵盤輸入，bindblur表示一旦失去焦點(diǎn)后會(huì)調(diào)用函數(shù)，獲取輸入的數(shù)值，最后一個(gè)是數(shù)據(jù)的輸出結(jié)果，通過數(shù)據(jù)的綁定來實(shí)現(xiàn)的，sum在js中定義傳遞過來的，后面button，按鈕，點(diǎn)擊會(huì)引發(fā)調(diào)用事件函數(shù)calc，按鈕類型type是primary，對(duì)應(yīng)圖中效果。文字為求和。

2.wxss

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

3.js

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

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

補(bǔ)充：一旦失去焦點(diǎn)事件發(fā)生后，會(huì)調(diào)用事件函數(shù)，獲取相應(yīng)的數(shù)值，而顯示結(jié)果是通過數(shù)據(jù)綁定來實(shí)現(xiàn)的

(3)知識(shí)點(diǎn)總結(jié)

01

02

03

04

滑動(dòng)查看更多

總結(jié) ：循環(huán)語(yǔ)句的使用，同c

全局對(duì)象函數(shù)的使用 ---一些函數(shù)

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

注意事項(xiàng)

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

點(diǎn)擊藍(lán)字 關(guān)注我們

期待你的

分享

點(diǎn)贊

在看

新手學(xué)習(xí)，如有不對(duì)，請(qǐng)?指正！

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。