微信小程式day04基礎加強

来源:https://www.cnblogs.com/heymar/archive/2022/08/09/16567074.html
-Advertisement-
Play Games

一.自定義組件 1.1 組件的創建與引用 首先創建組件 然後我們組件的引用分為局部和全局引用 局部引用就是在當前頁面能使用,在當前頁面的json文件裡面配置 全局引用同樣的道理,==註意跟page等是同級的== 組件與頁面的不同: 雖然都有相應的四個文件 1.2 組件樣式 首先,預設情況下 ==組件 ...


一.自定義組件

1.1 組件的創建與引用

首先創建組件

image-20220802165616452

然後我們組件的引用分為局部和全局引用

局部引用就是在當前頁面能使用,在當前頁面的json文件裡面配置

image-20220802170311755

全局引用同樣的道理,註意跟page等是同級的

組件與頁面的不同:

雖然都有相應的四個文件

image-20220802171004305

1.2 組件樣式

首先,預設情況下 組件的樣式就是隔離的==,組件之間不會相互影響,小程式也不會影響到組件,組件也影響不到小程式

註意:

image-20220802172226719

雖然預設情況下是隔離的,但是也可以一些設置讓其不隔離

image-20220802173255464

styleIsolation的屬性:

image-20220802174016651

1.3 數據、方法和屬性

數據就是組件js裡面的data節點裡面的數據

方法就是組件js文件裡面methods方法,區別於其他頁面js的函數是直接寫在裡面的,組件的函數都需要寫在methods裡面

主要註意一點,如果不是事件的處理函數,不是由事件來觸發,一般這樣的函數前面都為一個_下劃線

image-20220803133834395

屬性:properties

是組件用來接收外部傳進來的一些數據

image-20220803134034130

兩者區別是上一種不用傳值也有預設值

data和properties區別:

都是可讀可寫的,data傾向於存儲私有數據,properties傾向於存儲外部傳進來的數據

properties也是通過setData來修改

image-20220803134722700

1.4 數據監聽器

類似於watch 這裡面是 observers

要監聽多個欄位,直接寫在一起通過,分割

image-20220803134902555

image-20220803140242741

image-20220803140258777

同樣還支持監聽對象裡面單個或多個屬性的變化

image-20220803140532306

如果是要監聽對象裡面所有的屬性,通過兩個通配符 **

image-20220803142713368

而且對應的新值也是整個對象

1.5 純數據欄位

不用於界面渲染的data欄位就是純數據欄位

對於這類數據用純數據來定義更性能會更快

image-20220803144119940

1.6 生命周期

組件的生命周期函數一共六個:

image-20220803144422081

第一個還沒有放入到頁面節點樹中,類似於beforeCreate

第二是放入了頁面節點樹,但是還沒有渲染出來類似於beforeMount

最重要的一共三個:

image-20220803144839900

要定義組件的生命周期,需要用到 lifetimes對象裡面來寫生命周期函數

image-20220803145215835

還有一個就是組件所在頁面的生命周期

就是當組件的行為需要依賴頁面的變化的時候,但是組件能訪問到頁面的生命周期也不多就三個

image-20220803145651143

同樣的也需要寫到一個對象裡面, pageLifetimes

image-20220803150154213

1.7 組件插槽

  • 單個插槽

    首先在組件裡面通過slot來占位,然後頁面使用組件這裡直接寫你自己的組件,註意是直接寫,因為是單個插槽也不需要指定什麼

    image-20220803152701455

    image-20220803152707558

  • 多個插槽

    如果要啟用多個插槽,就需要配置一下,現在組件js配置options裡面為multipleSlots為true

    image-20220803153208202

    然後定義slot的時候需要指定name

    image-20220803153247872

    使用的時候用 slot來指明name

    image-20220803153339168

1.8 父子組件通信

有三種方式:

image-20220803154341077

  • 屬性綁定: 僅能設置json相容數據也就是僅能傳一些簡單數據,不能傳方法等

    註意頁面也可以當做父組件

    在頁面的data定義自己的數據

    image-20220803172100118

    直接通過屬性綁定給到子組件

    image-20220803172158328

    子組件通過properties來接受

    image-20220803172223917

  • 事件綁定

    子組件給父組件傳數據的時候

    首先父組件要在js定義這個自定義函數

    image-20220803174658471

    然後給到子組件,給的時候就通過bind語法加你的事件名,這裡最好用第二種形式,可以跟原生事件做一個區別

    image-20220803175534412

    子組件這邊通過 this.triggerEvent裡面是事件名,和你要帶的參數(對象形式)

    image-20220803175124089

    最後父組件這邊通過 e.detail獲取參數

    image-20220803175319957

  • 獲取組件實例

    也是父給子傳,類似於ref,需要給子組件設置 class或者id,通過 this.selectComponent來獲取到子組件從而可以去修改他的一些data、properties或者調用它的一些方法

    image-20220803180632338

1.9 behaviors

behaviors就是mixin,組件中屬性、數據、方法、生命周期函數等有共同的都可以通過behaviors來共用

每個組件可以引用多個behavior,behavior也可以引用其他behavior

創建:一般在根目錄創建一個behavior文件夾,裡面放一個js來專門存放behavior

image-20220803181021863

導入並使用:

image-20220803181142738

此時你的組件已經有這些屬性、數據等了,直接用即可

image-20220803181303826

behavior可以存放的屬性有哪些:

image-20220803181405516

當behavior與組件裡面的一些屬性、數據等同名時

有一些規則,還是比較多的,可以通過微信官方文檔來看具體

image-20220803181743796

二.使用npm包

雖然能使用npm包,但並不是所有包都能使用

image-20220804110421664

依賴node(如:fs)、依賴瀏覽器內置對象(如:jQuery)、依賴c++

2.1 Vant Weapp

是有贊前端團隊專門用於小程式的一套ui結構

首先安裝,參考官網文檔https://vant-contrib.gitee.io/vant-weapp/#/quickstart

在自己終端視窗打開,首先要先初始化

image-20220804112401107

直接npm開始安裝

image-20220804112502020

接下來的兩步查看官方文檔配置

image-20220804112906786

image-20220804112919574

然後構建npm就完成安裝了

使用

需要在app.json的usingComponents註冊

image-20220804114500724

2.2 使用css變數定製vant主題樣式

首先css變數怎麼用,類似於less變數,可以起到一個方便修改的作用

帶有首碼--的屬性名,比如--example--name,表示的是帶有值的自定義屬性,其可以通過 var 函數在全文檔範圍內復用的。

image-20220804115548875

怎麼來定製vant主題

首先是需要在app.wxss裡面修改page的樣式

在小程式裡面page就相當於html是整個頁面的根節點

那麼怎麼來修改呢:

可以在官網文檔找到

image-20220804120436071

在這裡面找到你要修改的那個組件的什麼樣式

image-20220804120553176

將前面改成--

image-20220804120645414

2.3 API promise化

小程式官方提供的很多api是基於回調來執行的,就比如發請求的request裡面就有成功失敗完成等回調,像這樣回調一多了就容易產生一個問題,就是造成回調地獄的問題,代碼的可讀性、維護性差

要將官方api promise化需要用到一個包 miniprogram-api-promise

image-20220804134741111

需要知道的是,我們微信小程式是不能直接識別這些npm包的,之所以能夠使用完全是因為構建了npm包,所以這個時候一般下了一個包之後還需要構建一次npm

image-20220804134848452

image-20220804134859850

然後是使用需要在app.js裡面頂級先註冊調用

將wx上的方法都promise化給到了空對象wxp

中間一定要有個wx.p過渡,後面用也是用這個

image-20220804140332486

怎麼來用:

比如發起一個請求

image-20220804140356558

image-20220804140401698

所以現在就可以用async,await了

image-20220804140447539

三.全局數據共用

類似於vuex實現各個組件間數據共用

需要兩個包來實現:

image-20220804143922837

  • 下載

    image-20220804145219579

  • 創建store

    創建一個store文件夾專門來做倉庫,裡面導入observable,向外導出他,他就像new store一樣,裡面就可以放一些需要存放的數據

    state

    image-20220804155828071

    計算屬性

    直接在下麵定義一個函數即可,依賴的數據產生變化,他也會跟著變

    image-20220804161041823

    action

    要修改store裡面的數據也是需要action來修改的,需要先引入

    image-20220804162402385

    然後直接在裡面寫action的函數,註意方法需要用action包起來

    image-20220804162452133

    而且他會接受參數,也就是外部action傳進來的參數

    image-20220804162558061

    怎麼來在page頁面中來使用mobx中的數據或者actions

    image-20220808180750424

    先引入上面這個方法和我們的store數據源

    首先在我們onLoad鉤子中用到這個方法來創建,第一個參數為this也就是這個頁面的實例,第二個參數一個對象有我們的數據源,有我們的data、getters、還有actions裡面的函數

    創建之後就有了這個實例對象,就可以在onUnload鉤子清理這些數據

    綁定好之後,直接在頁面中使用即可

    image-20220808181735109

    image-20220808182153117

    image-20220808182313813

    註意我要修改numA的值,需要action接受參數,同時這邊只能傳進store裡面去改

    image-20220808182356257

    在組件中使用:

    image-20220808183655542

    主要註意他有三種引入數據的方法,引入action前面是你自定義的名字,後面才是actions裡面定義的函數名

四.分包

就是將一個完整的小程式劃分為不同的子包,用戶在使用時按需載入

如果不分包的話那就是所有頁面以及資源融合在一起

image-20220808185101412

分包後一般分為一個主包多個分包

image-20220808185135980

註意:主包裡面的公共資源所有人包可訪問,但是分包裡面的私有資源只有自己能訪問,tabBar頁面需要放在主包中

整個小程式分包大小不能超過16MB,單個分包不能超過2MB

4.1 使用分包

首先瞭解一下分包的樹結構

image-20220808190306476

就是和pages同級再來分包的文件夾,裡面又放一些pages

但是還沒完還要在app.json配置 subpackages

image-20220808190354014

查看分包體積

image-20220808190941506

4.2 獨立分包

獨立分包本質上也是分包,只是普通分包要進入必須依賴主包進入,而獨立分包則不依賴主包,可以通過其他渠道直接進入小程式

image-20220808191514103

創建時候獨立分包和普通分包的區別就是,json文件有無 independent

image-20220808192046018

註意獨立分包和普通分包以及主包之間是相互隔離的,無法相互引用彼此資源,包括主分包公共資源

4.3 分包預下載

進入某個小程式時,由框架預下載可能需要的分包,從而提升進入分包的啟動速度

預下載是進入一些指定的頁面時觸發

image-20220808192658387

包名除了root還可以通過name指定

分包預下載限制:

分包預下載限額2MB

image-20220808193204335

五.案例自定義tabBar

tabBar數字和我們的store數字保持同步

image-20220808193323809

首先官方文檔是有自定義tabBar教程的

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

首先需要開啟自定義模式 custom改為true

image-20220808194407517

image-20220808194413263

註意原先定義的tabBar最好不刪除

一個是保證低版本可以看到tabBar,一個是可以用來區分哪些是tabBar

image-20220808194644493

創建文件夾

image-20220808194752763

先實現一個基本的tabBar結構,這裡我們用vant組件實現

先引用

image-20220808195624631

將數據改成我們自己的數據,註意怎麼換成我們自己的icon圖標

image-20220808195809676

image-20220808195905678

然後說一下怎麼來修改我們組件的一個樣式

之前已經說過了,但那是直接在app.wxss裡面改,而現在是在組件裡面的wxss裡面改,就需要一個新的配置項

image-20220808200922117

這樣才能修改成功

image-20220808201048790

但是我們的info應該是人手一個

image-20220808201602187

image-20220808201628321

這個時候就要考慮怎麼講mobx的值給到我們的tabBar裡面來了,這裡的自定義tabBar實際上是組件,所以要用組建的引用方法

image-20220808201843496

image-20220808201917043

然後就是怎麼將自定義的tabBar info值和我們的數據連動起來,這裡要用到監聽器

image-20220808202138734

到目前為止還差最後一步,切換效果

通過 wx.switchTap這個api來實現跳轉

image-20220808203308203

但是這個時候icon又出現了問題,這個時候應該去store定義一個active作為索引值

image-20220808203426999

image-20220808203530292

修改選中項文本顏色

參考vant組件api


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2.ETCD安裝 etcd 安裝可以通過源碼構建也可以使用官方構建的二進位文件進行安裝。我們以二進位文件為例,系統為CentOS 7.9,操作步驟如下所示: 2.1 Linux ETCD_VER=v3.5.4 # choose either URL GOOGLE_URL=https://storag ...
  • 1、redis 大數據時代三V:海量Volume、多樣Variety、實時Velocity 大數據時代三高:高併發、高可用(無限套娃+彼此監控)、高性能 - Redis(Remote Dictionary Server ),即遠程字典服務,是一個開源的使用ANSI C語言編寫、支持網路、可基於記憶體亦 ...
  • 攜程酒店訂單系統的存儲設計從1999年收錄第一單以來,已經完成了從單一SQLServer資料庫到多IDC容災、完成分庫分表等多個階段,在見證了大量業務奇跡的同時,也開始逐漸暴露出老驥伏櫪的心有餘而力不足之態。基於更高穩定性與高效成本控制而設計的訂單存儲系統,已經是攜程在疫情後恢復業務的必然訴求。 目... ...
  • 7月28日,以“數智進化,現在即未來”為主題的袋鼠雲2022產品發佈會於線上正式開幕。發佈會上,袋鼠雲宣佈將集團進行全新升級:從“數字化基礎設施供應商”,升級為“全鏈路數字化技術與服務提供商”,併發布了全新的四大產品體系:數據智能分析與洞察平臺“數雁EasyDigit”、低代碼數字孿生平臺EasyV ...
  • 前言: 今天有個業務需求,需要將用戶的密碼統一進行設置,現在只有用戶的昵稱(nickname), 用戶的username跟password欄位為空。遂就用到了中文轉拼音~ 1、先將nickname轉拼音並賦值給username欄位 2、使用username欄位配合加密函數,對該用戶的密碼進行賦值 - ...
  • 好消息!國際權威行業研究與咨詢機構Forrester發佈全球Translytical數據平臺廠商選型報告《The Translytical Data Platforms Landscape, Q3 2022》,騰訊雲資料庫成功入選。 Forrester是全球最具影響力的獨立第三方研究咨詢公司之一,提 ...
  • 有讀者可能會一臉懵逼? 啥是索引潛水? 你給起的名字的嗎?有沒有索引蛙泳? 這個名字還真不是我起的,今天要講的知識點就叫索引潛水(Index dive)。 先要從一件怪事說起: ...
  • 定義: 刪除數據表就是將資料庫中已經存在的表從資料庫中刪除。註意,在刪除表的同時,表的定義和表中所有的數據均會被刪除。因此,在進行刪除操作前,最好對錶中的數據做一個備份,以免造成無法輓回的後果。本節將詳細講解資料庫表的刪除方法。 1 刪除一個或多個沒有被其他表關聯的數據表 如果一個數據表沒有和其它表 ...
一周排行
    -Advertisement-
    Play Games
  • Github / Gitee QQ群(1群) : 813100564 / QQ群(2群) : 579033769 視頻教學 介紹 MiniWord .NET Word模板引擎,藉由Word模板和數據簡單、快速生成文件。 Getting Started 安裝 nuget link : https:// ...
  • Array.Sort Array類中相當實用的我認為是Sort方法,相比起冗長的冒泡排序,它的出現讓排序更加的簡化 結果如下: 還可以聲明一個靜態方法用來專門調用指定數組排序,從名為 array 的一維數組中 a 索引處開始,到 b 元素 從小到大排序。 註意: a + b 不能大於 array 的 ...
  • 前言 在上一篇文章CLR類型系統概述里提到,當運行時掛起時, 垃圾回收會執行堆棧遍歷器(stack walker)去拿到堆棧上值類型的大小和堆棧根。這裡我們來翻譯BotR里一篇專門介紹Stackwalking的文章,希望能加深理解。 順便說一句,StackWalker在中文里似乎還沒有統一的翻譯,J ...
  • 使用過 nginx 的小伙伴應該都知道,這個中間件是可以設置跨域的,作為今天的主角,同樣的 反向代理中間件的 YARP 毫無意外也支持了跨域請求設置。 有些小伙伴可能會問了,怎樣才算是跨域呢? 在 HTML 中,一些標簽,例如 img、a 等,還有我們非常熟悉的 Ajax,都是可以指向非本站的資源的 ...
  • 什麼是Git Git 是一個開源的分散式版本控制系統,用於敏捷高效地處理任何或小或大的項目。 Git 是 Linus Torvalds 為了幫助管理 Linux 內核開發而開發的一個開放源碼的版本控制軟體。 Git 與常用的版本控制工具 CVS, Subversion 等不同,它採用了分散式版本庫的 ...
  • 首先CR3是什麼,CR3是一個寄存器,該寄存器內保存有頁目錄表物理地址(PDBR地址),其實CR3內部存放的就是頁目錄表的記憶體基地址,運用CR3切換可實現對特定進程記憶體地址的強制讀寫操作,此類讀寫屬於有痕讀寫,多數驅動保護都會將這個地址改為無效,此時CR3讀寫就失效了,當然如果能找到CR3的正確地址... ...
  • 說明 onlyoffice為一款開源的office線上編輯組件,提供word/excel/ppt編輯保存操作 以下操作均基於centos8系統,officeonly鏡像版本7.1.2.23 鏡像下載地址:https://yunpan.360.cn/surl_y87CKKcPdY4 (提取碼:1f92 ...
  • 二叉樹查找指定的節點 前序查找的思路 1.先判斷當前節點的no是否等於要查找的 2.如果是相等,則返回當前節點 3.如果不等,則判斷當前節點的左子節點是否為空,如果不為空,則遞歸前序查找 4.如果左遞歸前序查找,找到節點,則返回,否繼續判斷,當前的節點的右子節點是否為空,如果不為空,則繼續向右遞歸前 ...
  • ##Invalid bound statement (not found)出現原因和解決方法 ###前言: 想必各位小伙伴在碼路上經常會碰到奇奇怪怪的事情,比如出現Invalid bound statement (not found),那今天我就來分析以下出現此問題的原因。 其實出現這個問題實質就是 ...
  • ###一、背景知識 爬蟲的本質就是一個socket客戶端與服務端的通信過程,如果我們有多個url待爬取,只用一個線程且採用串列的方式執行,那隻能等待爬取一個結束後才能繼續下一個,效率會非常低。 需要強調的是:對於單線程下串列N個任務,並不完全等同於低效,如果這N個任務都是純計算的任務,那麼該線程對c ...