快捷導(dǎo)航

小程序組件傳值和引入sass的方法(使用vant Weapp組件庫(kù))

更新時(shí)間：2020年11月24日 14:29:57 作者：鵝鵝鵝gg

這篇文章主要介紹了小程序組件傳值和引入sass使用vant Weapp組件庫(kù),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

2.小程序的框架：

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

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

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

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

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

3.2、使用場(chǎng)景

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

3.3、自定義組件組成

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

（2）wxml 文件組件模版

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

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

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

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

在這里插入圖片描述

（2）組件json文件配置

這里是引用

（3）組件wxml編寫(xiě)

這里是引用

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

在這里插入圖片描述

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

在這里插入圖片描述

效果

在這里插入圖片描述

二、父子組件通信

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

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

在這里插入圖片描述

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

微信小程序中的樣式文件wxss等同于css，并不支持less或sass語(yǔ)法。所以需要把整個(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組件庫(kù) 下載npm init -y下載npm i通過(guò) npm 安裝npm i @vant/weapp -S --production修改 app.json將 app.json 中的 “style”: “v2” 去除修改 project.config.json，放入setting中：

在這里插入圖片描述