小程序-比較數字大小

這裏通過比較數字大小的案例,來學習小程序的一些基礎知識。

包括頁面組件,頁面樣式,頁面邏輯的編寫,

瞭解配置文件中常見配置的含義,利用事件,數據綁定,條件渲染,表達等方式實現小程序的頁面交互。

效果圖如下:

 首先創建項目。

1.頁面組件

小程序中使用WXML(WeiXin Markup Language)來實現頁面的結構。

例如<view>標籤用於定義視圖容器,與HTML中的<div>標籤作用類似。

常見的組件

 

 

 官方組件文檔

input組件的type屬性

 

 <page>標籤時最外層的標籤,它是一個根節點,用戶編寫的所有結構代碼都在根節點的下面。

2.頁面樣式

WXSS(WeiXin Style Sheets)是一套樣式語言,用於描述WXML的組件樣式。

WXSS具有CSS大部分特性,並在CSS基礎上做了一些擴充和修改。

2.1 選擇器

WXSS的選擇器

 

 

 

 2.2 尺寸單位

微信小程序在WXSS中加入了新的尺寸單位rpx(responsive pixel, 響應式像素)。

移動端網頁像素單位的換算難點在於它有物理像素和邏輯像素兩種單位,

物理像素是指屏幕上實際有多少個像素,而邏輯像素是指CSS中使用的像素單位。

爲了換算方便,rpx單位規定了任何手機屏幕的寬度都爲750rpx(邏輯像素),由小程序內部負責將邏輯像素轉換爲當前手機中的物理像素。

2.3 樣式導入

在WXSS中可以使用@import語句導入外聯樣式表,在@import後面寫上需要導入的外聯樣式表的路徑即可,用“;”表示語句結束。

示例:在index.wxss文件中導入test.wxss文件,如下

@import "test.wxss";

2.4 全局樣式

如果多個頁面中有些重複的相同的樣式,可以在項目根目錄下創建全局樣式文件app.wxss,

將公共的樣式寫在全局樣式文件中。

注意:當公共樣式文件(app.wxss)和頁面樣式文件(pages/index/index.wxss)發生樣式衝突時,頁面樣式的優先級高,會覆蓋公共樣式。

3 配置文件

小程序的每一個頁面均可以使用json文件對頁面的效果進行配置。

頁面的配置分爲頁面級和應用級,在本項目中,pages/index/index.json時頁面級配置文件,

而app.json是應用級配置文件。

3.1 頁面級配置文件

在頁面級配置文件中可以更改頁面的導航欄樣式,控制頁面是否允許上下滾動。

常用的頁面級配置

 

 若將enablePullDownRefresh設爲true,頁面可以下拉刷新,當下拉刷新操作執行時,就可以觸發下拉刷新事件 onPullDownRefresh,在pages/index/index.js文件中可以找到該事件的處理函數。

onReachBottomDistance主要用於開發自動加載更多的功能,就是當頁面中內容非常長的時候,爲了加快加載速度,並不是一次性加載所有的數據,

而是先加載一部分數據將頁面填滿,直到出現滾動條,頁面可以向上滾動。

當用戶上拉時,如果快要到達底部,就立即加載後面的數據。因此,onReachBottomDistance的指越大,加載的時機越提前。

如果達到給定的值,就會觸發上拉觸底事件onReachBottom,在pages/index/index.js文件中可以找到該事件的處理函數。

3.2 應用級配置文件

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章