1.生命週期

1.onLoad()：頁面載入時觸發，一個頁面只加載一次。
2.onShow()：頁面顯示切換的時候觸發
3.onReady():頁面初次渲染完成時觸發。一個頁面只會呼叫一次，代表頁面已經準備妥當，可以和檢視層進行互動
4.onHide():頁面解除安裝時觸發

2.小程式的框架：

小程式框架有兩個層，一是檢視層，一是邏輯層。

框架的檢視層：
1.由 WXML 與 WXSS 編寫，由元件來進行展示。
2.將邏輯層的資料反應成檢視，同時將檢視層的事件傳送給邏輯層。
3.WXML(WeiXin Markup language) 用於描述頁面的結構。
4.WXS(WeiXin Script) 是小程式的一套指令碼語言，結合 WXML，可以構建出頁面的結構。

5.WXSS(WeiXin Style Sheet) 用於描述頁面的樣式。
6.元件(Component)是檢視的基本組成單元。

邏輯層：
1、小程式開發框架的邏輯層由 JavaScript 編寫。 2、邏輯層將資料進行處理後傳送給檢視層，同時接受檢視層的事件反饋。
3、由於框架並非執行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
4、開發者寫的所有程式碼最終將會打包成一份 JavaScript，並在小程式啟動的時候執行，直到小程式銷燬。類似
ServiceWorker，所以邏輯層也稱之為 App Service。

1.APP()：表示的是註冊程式，必須在app.js中註冊，且不能註冊多個。接收的是object引數，其指定小程式的生命週期函式等。

2.Page()：表示的是註冊一個頁面，接收的是object引數，其指定頁面的初始資料、生命週期函式、事件處理函式。
3.setData的使用：setData函用於將資料從邏輯層傳送到檢視層（非同步），同時改變對應的this.data的值（同步）因此，直接修改this.data但是不呼叫this.setData（）不改變頁面的狀態，造成資料不一致。this.setData()會觸發檢視的更新。

3、什麼是自定義元件？
小程式中常常會有一些通用的互動模組，比如“下拉選擇列表”、“搜尋框”、“日期選擇器”等。這些介面互動模組可能會在多個頁面中用到，邏輯也相對獨立。然而，用傳統的小程式開發方法來實現這樣的模組是非常繁瑣的。面對這個情況，小程式基礎庫提供了讓開發者自己建立介面元件的特性，稱之為“自定義元件”。通過這個特性，開發者就能夠將這樣的互動模組抽象成介面元件，使介面程式碼組織變得非常靈活。

3.2、使用場景

（1） 多個頁面用到同樣的東西
（2） 頁面功能很多,很複雜,使用元件來拆分邏輯

3.3、自定義元件組成

（1）json檔案 用於於放置一些最基本的元件配置

（2）wxml 檔案 元件模版

（3）wxss 檔案 元件的樣式（無法直接使用全域性樣式，需要通過@import匯入）

（4）js 檔案 元件的 JS 程式碼，承載元件的主要邏輯

4、使用元件
（1）新建自定義元件檔案

在根目錄新建components資料夾，然後右鍵新建自定義元件目錄，最後右鍵新建Component

（2）元件json檔案配置

（3）元件wxml編寫

（4）匯入自定義元件
（4.1）在父元件json檔案的usingComponents中匯入元件

（4.2）在父元件wxml檔案中以元件名作為標籤使用元件

效果

二、父子元件通訊

1、父傳子
（1）在父元件中的子元件標籤新增屬性，給子元件傳遞資料

（2）子元件在js中通過properties接收，可以指定接收資料型別

2、子傳父
（1）在父元件的子元件標籤自定義事件，傳給子元件

（2）子元件用this.triggerEvent(‘父元件自定義事件',‘要傳遞的引數')，觸發父元件傳過來的自定義事件

三、在微信小程式中使用less/sass

微信小程式中的樣式檔案wxss等同於css，並不支援less或sass語法。所以需要把整個專案拖到(visual Studio Code)中
1.安裝

2.下載安裝了Easy Sass 後，首先需要修改一下vscode的配置檔案setting.json，增加的配置如下：

3建立一個sass可以進行編譯了

一定要在visual Studio Code中編譯，不可以在小程式中進行編譯

使用vant Weapp元件庫 下載npm init -y下載npm i通過 npm 安裝npm i @vant/weapp -S --production修改 app.json將 app.json 中的 “style”: “v2” 去除修改 project.config.json，放入setting中：

在app.js區域性引入

到此這篇關於小程式元件傳值和引入sass的方法(使用vant Weapp元件庫)的文章就介紹到這了,更多相關小程式元件傳值和引入sass內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！