微信小程序學習筆記

一、文件和目錄結構介紹

小程序包括：主體文件、頁面文件
主體文件：
在這里插入圖片描述

app.js：小程序入口文件
app.json：小程序的全局配置文件
app.wxss：小程序的全局樣式

頁面文件：是每個頁面所需的文件，小程序頁面文件都存放在pages目錄下，一個頁面一個文件夾

頁面文件：
在這里插入圖片描述

.js：頁面邏輯（必須存在）
.wxml：頁面結構（必須存在）
.wxss：頁面樣式
.json：小頁面配置

二、配置文件介紹

1、JSON

JSON是一種輕量級的數據格式，常用于前后端數據的交互，但是小程序中，JSON扮演配置項的角色，用于配置項目或者頁面屬性和行為

app.json：小程序全局配置文件，用于配置小程序的一些全局屬性和頁面路由
頁面.json：小程序頁面配置文件，也稱局部配置文件，用于配置當前頁面的窗口樣式、頁面標題等
project.config.json：小程序項目的配置文件，用于保存項目的一些配置信息和開發者的個人設置
sitemap.json：配置小程序及其頁面是否允許被微信索引，提高小程序在搜索引擎搜索到的概率

2、pages

pages用來指定小程序由哪些頁面組成，用于讓小程序知道由哪些頁面組成以及頁面定義在哪個目錄，每一項都對應一個頁面的路徑信息

在這里插入圖片描述
主義事項：

頁面路由不需要寫文件后綴，框架會自動去尋找對應位置的四個文件進行處理
小程序中新增/減少頁面，都需要對pages數組進行修改
未指定entryPagePath（直接指示小程序首頁）時，數組的第一項代表小程序的初始頁面（首頁）

3、window

用于設置小程序的狀態欄、導航條、標題、窗口背景色
在這里插入圖片描述
配置項查詢鏈接：

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

在這里插入圖片描述

4、tabBar

定義小程序頂部底部tab欄，用以實現頁面之間的快速切換，可以通過tabbar配置項指定tab欄的表現，以及tab切換時顯示的對應頁面
在這里插入圖片描述
tabbar配置項：

selectedColor：選中時文字的顏色
color：文字的默認顏色
backgroundColor：當前tab欄的背景色
borderStyle：tab欄上方border是否需要，可選項"white"和"black"
position：tab欄的位置，可選項"top"（tab欄在頂部，此時icon不會顯示）
list：tab欄的內容

tabbar配置list的要求：
在這里插入圖片描述

5、頁面配置

小程序的頁面配置也稱局部配置，每一個小程序頁面也可以使用自己的.json文件對本頁面的窗口表現進行配置。
頁面配置文件的屬性和全局配置文件中的window屬性幾乎一致，只不過這里不需要額外指定window字段，因此如果出現相同的配置項，頁面中的配置項會覆蓋全局配置文件中相同的配置項。

6、項目配置文件-config.json和配置sass

（1）項目配置文件

在創建項目的時候，每個項目的根目錄生成兩個config.json文件，用于保存開發者在工具上做的個性化配置，例如和編譯有關的配置。當重新安裝微信開發者工具或換電腦工作時，只要載入同一個項目的代碼包，開發者工具就會自動恢復到當時開發項目時的個性化配置。

project.config.json：項目配置文件，常用來進行配置公共的配置（與最終編譯結果有關的設置必須設置到這里）
project.private.config.json：項目私有的配置，常用來配置個人的配置

（2）配置sass

與編譯結果有關，所以在project.config.json中進行配置
在這里插入圖片描述

7、配置文件-sitemap.json

配置小程序及其頁面是否允許被微信索引，提高小程序在微信內部被用戶搜索到的概率。
微信現已開放小程序內搜索，開發者可以通過sitemap.json配置來設置小程序頁面是否允許微信索引。當開發者允許微信索引時，微信會通過爬蟲的形式，為小程序的頁面內容建立索引。當用戶的搜索詞條觸發改索引時，小程序的頁面將可能展示在搜索結果中。
注：

沒有sitemap.json則默認所有頁面都能被索引
{“action”:“allow”,“page”:“*”}是優先級最低的默認規則，未顯式指明"disallow"的都默認被索引

二、小程序的樣式和組件

1、組件

在小程序中不能使用HTML標簽，也就沒有DOM和BOM，CSS也僅僅支持部分選擇器。

小程序提供了WXML進行頁面結構編寫，同時提供了WXSS進行頁面的樣式編寫

WXML提供了view、text、image、navigator等標簽來構建頁面結構，只不過在小程序中將標簽稱為組件
WXSS對CSS擴充和修改，新增了尺寸單位rpx，提供了全局的樣式和局部樣式，另外需要注意的是WXSS僅支持部分CSS選擇器

2、尺寸單位rpx

為了解決屏幕適配的問題，微信小程序推出了rpx單位
rpx：時下程序新增的自適應單位，他可以根據不同設備的屏幕寬度進行自適應縮放
在這里插入圖片描述

開發建議：

開發微信小程序時設計師可以用iphone6作為視覺稿的標準，iphone6的設計稿一般是750px
如果iphone6作為視覺稿的標準量取多少px，直接寫多少rpx即可，開發起來更方便，也能夠適配屏幕的寬度

3、全局樣式和局部樣式

全局樣式：指在app.wxss中定義的樣式規則，作用域每一個頁面，例如：設置字號、背景色、寬高等全局樣式
局部樣式：指在page.wxss中定義的樣式規則，只作用在對應的頁面，并會覆蓋app.wxss中相同的選擇器

4、劃分頁面結構

小程序常用的組件：

view組件
swiper和swiper-item組件
image組件
text組件
navigator組件
scroll-view組件
字體圖標

在這里插入圖片描述
設置整體頁面背景色（設置高優先級）

5、輪播圖區域繪制

在小程序中，提供了swiper和swiper-item組件實現輪播圖

swiper：滑塊視圖容器，其中只能放置swiper-item組件
swiper-item：只可放置在swiper組件中，寬高自動設置為100%，代表swiper中的每一項

在小程序中，如果需要渲染圖片，需要使用image組件，常用的屬性有4個：

src屬性：圖片資源地址
mode：圖片裁剪、縮放的模式
show-menu-by-longpress：長按圖片顯示菜單
lazy-load：圖片懶加載（滑動到一定區域才會加載圖片）

注意事項：

image默認具有寬度和高度，寬度是320px高度是240px
image組件不給src屬性設置圖片地址，也占據寬和高

在這里插入圖片描述

6、繪制公司信息區域

在小程序中，如果需要渲染文本，需要使用text組件，常用的屬性有2個：

user-select：文本是否可選，用于長按選擇文本
space：顯示連續空格
- ensp：顯示空格時會按照中文字符空格一半大小顯示
- emsp：顯示空格時會按照中文字符空格大小顯示空格
- nbsp：按照字符大小進行展示

注意事項：
3. 除了文本節點以外的其他節點都無法長按選中
4. text組件內只支持text嵌套

在這里插入圖片描述

7、商品導航區域

結合view、image、text的綜合案例
在這里插入圖片描述

8、點擊商品導航跳轉到商品列表

在小程序中，如果需要進行跳轉，需要使用navigator組件，常用的屬性有2個：

url：當前小程序內的跳轉鏈接
open-type：跳轉方式
- navigate：保留當前頁面，跳轉到應用內的某個頁面。但是不能跳到tabbar頁面
- redirect：關閉當前頁面，沒有返回上一頁的箭頭，跳轉到應用內的某個頁面。但不能跳轉到tabbar頁面
- switchTab：跳轉到tabBar頁面，并關閉其他所有非tabBar頁面
- reLaunch：關閉所有頁面，打開到應用內的某個頁面
- navigateBack：關閉當前頁面，返回上一頁面或前幾個頁面（搭配delta屬性，默認是1，如果想返回幾級，就寫幾）

注意事項：

路徑后可以帶參數。參數與路徑之間使用?分隔，參數鍵與參數值用=相連，不同參數用&分隔。
例如：list/?id=10&name=hua，在onLoad(options)生命周期函數中獲取傳遞的參數
open-type="switchTab"時不支持傳參

9、推薦商品區域-滾動效果

在小程序中，如果想實現內容滾動，需要使用scroll-view組件
scroll-view：可滾動視圖區域，適用于需要滾動展示內容的場景，用于在小程序中實現類似于網頁中的滾動條效果，用戶可以直接通過手指滑動或者點擊滾動條來滾動內容。2個屬性：

scroll-x：允許橫向滾動
scroll-y：允許縱向滾動

水平方向的滾動：
在這里插入圖片描述

垂直方向的滾動：
在這里插入圖片描述

10、推薦商品區域

WXML：

<view class="good-hot"><scroll-view class="scroll-x" scroll-x><view><view class="good-item"><image src="../../assets/floor/1.png" mode=""/><text>鮮花玫瑰</text><text>66</text></view></view><view><view class="good-item"><image src="../../assets/floor/2.png" mode=""/><text>鮮花玫瑰</text><text>77</text></view></view><view><view class="good-item"><image src="../../assets/floor/3.png" mode=""/><text>鮮花玫瑰</text><text>88</text></view></view><view><view class="good-item"><image src="../../assets/floor/4.png" mode=""/><text>鮮花玫瑰</text><text>99</text></view></view><view><view class="good-item"><image src="../../assets/floor/5.png" mode=""/><text>鮮花玫瑰</text><text>100</text></view></view></scroll-view>
</view>

SCSS：

.good-hot{font-size:24rpx;background-color: #fff;padding:16rpx;border-radius: 10rpx;.scroll-x{width: 100%;white-space: nowrap; // 不允許元素換行view{margin-right:16rpx;display:inline-block;width:320rpx;height:440rpx;&:last-child{margin-right:0rpx;}.good-item{display:flex;flex-direction: column;justify-content: space-between;image{width: 100%;height: 320rpx;}text{&:nth-of-type(1){font-weight: bold;}}}}}
}