1.生命周期

1.onLoad()：頁面加載時(shí)觸發(fā)，一個(gè)頁面只加載一次。
2.onShow()：頁面顯示切換的時(shí)候觸發(fā)
3.onReady():頁面初次渲染完成時(shí)觸發(fā)。一個(gè)頁面只會調(diào)用一次，代表頁面已經(jīng)準(zhǔn)備妥當(dāng)，可以和視圖層進(jìn)行交互
4.onHide():頁面卸載時(shí)觸發(fā)

2.小程序的框架：

小程序框架有兩個(gè)層，一是視圖層，一是邏輯層。

框架的視圖層：
1.由 WXML 與 WXSS 編寫，由組件來進(jìn)行展示。
2.將邏輯層的數(shù)據(jù)反應(yīng)成視圖，同時(shí)將視圖層的事件發(fā)送給邏輯層。
3.WXML(WeiXin Markup language) 用于描述頁面的結(jié)構(gòu)。
4.WXS(WeiXin Script) 是小程序的一套腳本語言，結(jié)合 WXML，可以構(gòu)建出頁面的結(jié)構(gòu)。
5.WXSS(WeiXin Style Sheet) 用于描述頁面的樣式。
6.組件(Component)是視圖的基本組成單元。

邏輯層：
1、小程序開發(fā)框架的邏輯層由 JavaScript 編寫。 2、邏輯層將數(shù)據(jù)進(jìn)行處理后發(fā)送給視圖層，同時(shí)接受視圖層的事件反饋。
3、由于框架并非運(yùn)行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
4、開發(fā)者寫的所有代碼最終將會打包成一份 JavaScript，并在小程序啟動的時(shí)候運(yùn)行，直到小程序銷毀。類似
ServiceWorker，所以邏輯層也稱之為 App Service。

1.APP()：表示的是注冊程序，必須在app.js中注冊，且不能注冊多個(gè)。接收的是object參數(shù)，其指定小程序的生命周期函數(shù)等。
2.Page()：表示的是注冊一個(gè)頁面，接收的是object參數(shù)，其指定頁面的初始數(shù)據(jù)、生命周期函數(shù)、事件處理函數(shù)。
3.setData的使用：setData函用于將數(shù)據(jù)從邏輯層發(fā)送到視圖層（異步），同時(shí)改變對應(yīng)的this.data的值（同步）因此，直接修改this.data但是不調(diào)用this.setData（）不改變頁面的狀態(tài)，造成數(shù)據(jù)不一致。this.setData()會觸發(fā)視圖的更新。

3、什么是自定義組件？
小程序中常常會有一些通用的交互模塊，比如“下拉選擇列表”、“搜索框”、“日期選擇器”等。這些界面交互模塊可能會在多個(gè)頁面中用到，邏輯也相對獨(dú)立。然而，用傳統(tǒng)的小程序開發(fā)方法來實(shí)現(xiàn)這樣的模塊是非常繁瑣的。面對這個(gè)情況，小程序基礎(chǔ)庫提供了讓開發(fā)者自己創(chuàng)建界面組件的特性，稱之為“自定義組件”。通過這個(gè)特性，開發(fā)者就能夠?qū)⑦@樣的交互模塊抽象成界面組件，使界面代碼組織變得非常靈活。

3.2、使用場景

（1） 多個(gè)頁面用到同樣的東西
（2） 頁面功能很多,很復(fù)雜,使用組件來拆分邏輯

3.3、自定義組件組成

（1）json文件 用于于放置一些最基本的組件配置

（2）wxml 文件 組件模版

（3）wxss 文件 組件的樣式（無法直接使用全局樣式，需要通過@import導(dǎo)入）

（4）js 文件 組件的 JS 代碼，承載組件的主要邏輯

4、使用組件
（1）新建自定義組件文件

在根目錄新建components文件夾，然后右鍵新建自定義組件目錄，最后右鍵新建Component

（2）組件json文件配置

（3）組件wxml編寫

（4）導(dǎo)入自定義組件
（4.1）在父組件json文件的usingComponents中導(dǎo)入組件

（4.2）在父組件wxml文件中以組件名作為標(biāo)簽使用組件

效果

二、父子組件通信

1、父傳子
（1）在父組件中的子組件標(biāo)簽添加屬性，給子組件傳遞數(shù)據(jù)

（2）子組件在js中通過properties接收，可以指定接收數(shù)據(jù)類型

2、子傳父
（1）在父組件的子組件標(biāo)簽自定義事件，傳給子組件

（2）子組件用this.triggerEvent(‘父組件自定義事件', ‘要傳遞的參數(shù)')，觸發(fā)父組件傳過來的自定義事件

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

微信小程序中的樣式文件wxss等同于css，并不支持less或sass語法。所以需要把整個(gè)項(xiàng)目拖到(visual Studio Code)中
1.安裝

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

3創(chuàng)建一個(gè)sass可以進(jìn)行編譯了

一定要在visual Studio Code中編譯，不可以在小程序中進(jìn)行編譯

使用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局部引入

到此這篇關(guān)于小程序組件傳值和引入sass的方法(使用vant Weapp組件庫)的文章就介紹到這了,更多相關(guān)小程序組件傳值和引入sass內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論