微信小程式與web頁面製作的區別

2021-10-05 22:27:07 字數 2937 閱讀 2549

1.1 差異

在html中,我們最常見的標籤有哪些呢?

1.2 聯絡

那麼他們兩者有沒有什麼聯絡呢?

總結:

這是我在我的個人部落格中做的輪播圖,看**

index.wxml

="banner"

>

"true" autoplay=

"true" circular=

"true"

class

="swiper-box" interval=

"4000"

>

for=

"}">

="banner-item"

>

image src=

"}" mode=

"aspectfill"

>

<

/image>

<

/swiper-item>

<

/block>

<

/swiper>

<

/view>

js**

page(,

,,]}

})

總結:

元件是前端web製作中html+css+js原生中沒有的,應該是參考了其它框架,然後給了乙個元件的使用,不得不說是非常方便的。

在做css樣式中,給我印象最深刻的有以下幾個:

1.怎麼選擇整個頁面

2.怎麼讓盒子裡面的內容上下居中

3.尺寸單位的使用

3.1 怎麼選擇整個頁面

我們在web頁面製作中,給整個頁面做樣式的使用,我們會用到:

*或者body就可以給整個頁面做樣式。

例如這樣:

*

//或者這樣

body

page
3.2 怎麼讓盒子裡面的內容上下居中

我們還是和web的樣式做比較,在web的css樣式處理中,我們最通常的做法,無非就是讓其高度等於行高,就可以幾乎讓裡面的內容上下居中了。

例如:在div標籤中有一行字

上下居中<

/div>使用高度等於行高

div

這裡我們就要提到flex了,我們首先得讓這個div盒子變為彈性盒子,然後配合align-item:cener就幾乎可以使得盒子裡面的內容上下居中,如果還不行的話,就還需要加入justify-content: center這個屬性。

下面是我使用的乙個場景,讓其input框在頁面上下居中和左右居中

.search
效果:

這裡有關於彈性布局的詳細使用:

3.3 尺寸單位的使用

官方文件的說明:

rpx(responsive pixel): 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iphone6上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素。

思路:我們通過用}來繫結變數,從而實現我們想要的效果

="box"

>

for=

"}">

="notice"

>

="notice-left"

>

}="notice-time"

>

}<

/view>

<

/view>

="notice-right" bindtap=

"change" id=

"}">

"}">

<

/image>

<

/view>

<

/view>

="notice-content }"

>

}<

/view>

<

/block>

<

/view>

wxss中做好樣式

/* pages/notice/notice.wxss */

.box

.notice

.notice .notice-time

.notice image

.notice-content

.hide

.show

最後,我們通過繫結變數的方式,來操作我們想要的標籤元素

page(,

,,,]

},// 更改下標

change

(e));}

})

效果

總結:好了,今天的總結就到此結束了

很有幸大家能看到我的部落格,希望通過和大家分享技術文章和其它話題文章,讓我的學習成長路線變得有趣,並且提高自己的同時,也希望能幫助大家增長知識。哈哈哈,我個菜鳥太不要臉了,不管了,我會加油的

微信小程式頁面布局

3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,flex布局的特點 1.任意方向的伸縮,向左,向右,向下,向上 2.在樣式層可以調換和重排順序 3.主軸和側軸方便配置 4.子元素的空間拉伸和填充 5.沿著容器對齊23 顯示效果 block改換成di...

微信小程式頁面布局

1.flex布局,是w3c在2009年提出的一種新的方案,可以簡便,完整,響應式的實現各種頁面布局。2.flex布局提供了元素在容器中的對齊,方向以及順序,甚至他們可以是動態的或者不確定的大小的。3.flex布局的主要特徵是能夠調整其子元素在不同的螢幕大小中能夠用最適合的方法填充合適的空間。二,fl...

微信小程式頁面跳轉

每乙個列表對應著都有乙個詳情頁面,那麼這個詳情頁面可以通過乙個標籤去跳轉,也就是用上述的標籤就可以數顯跳轉 那麼對應列表裡面的詳情頁我們還需要在這個鏈結上進行乙個操作。也就是在鏈結後面 新增乙個對應的id引數,然後js裡面去接受這個引數,就會根據資料來跳轉到對應的詳情頁去了。exports.gets...