前言

有時(shí)候會(huì)覺得微信小程序原生的ui差了那么一點(diǎn)點(diǎn)感覺，那么能不能引入三方框架呢？本文以引入Vant來進(jìn)行舉例，共包含8個(gè)步驟。不管是不是云開發(fā)項(xiàng)目都一樣使用。

實(shí)現(xiàn)步驟

1. 打開微信小程序的開發(fā)工具，進(jìn)入項(xiàng)目。在項(xiàng)目的根目錄文件上點(diǎn)擊右鍵。選擇在終端中打開。(注意是根目錄)

2. 在命令窗口中鍵入npm init。然后所有配置都按默認(rèn)配置進(jìn)行，只需點(diǎn)擊回車鍵即可。

3. 在命令窗口中鍵入npm install進(jìn)行構(gòu)建，成功之后會(huì)在根目錄下生成 package.json 和 package-lock.json 文件

4. 接下來繼續(xù)安裝 Vant框架 ，步驟可根據(jù)官網(wǎng)進(jìn)行操作vant-contrib.gitee.io/vant-weapp/…

　4.1 npm i @vant/weapp -S --production

　4.2 npm i vant-weapp -S --production

　4.3 修改 app.json

　4.4 修改 project.config.json

5. 回到微信開發(fā)者工具，在“工具”一欄中找到“構(gòu)建npm”。等待構(gòu)建成功即可。

6. 最后我們要使用 npm 模塊, 在"詳情"中找到使用 "npm 模塊" 勾選即可

7. 使用Vant組件, 在app.json或index.json中引入組件，詳細(xì)介紹見 Vant官網(wǎng)快速上手

8. 在頁面中使用，直接引入組件即可。

··· 小插曲 ···

　　由于我這個(gè)是測(cè)試號(hào)AppId建的項(xiàng)目，是沒有使用云開發(fā)的。導(dǎo)致到后面步驟操作完之后就報(bào)錯(cuò)了！報(bào)錯(cuò)信息如下圖（1）；這時(shí)候我才發(fā)現(xiàn)這項(xiàng)目目錄跟我另外一個(gè)云開發(fā)的項(xiàng)目的文件目錄不一樣，導(dǎo)致文件找不到，具體啥原因我也不曉得。但是我在云開發(fā)項(xiàng)目上是成功的了，如下圖（2）；步驟是和以上寫的步驟一模一樣。

由此得出結(jié)論，大家盡量使用正式的AppId(即小程序公共平臺(tái)中注冊(cè)成功后的AppId)。避免越到后面麻煩越大。

　　原本想著用云開發(fā)項(xiàng)目再操作一遍，把最后成功的效果放上來，而不是記錄一篇有問題的筆記。但是想了想這樣也還不錯(cuò)，警醒自己下次不要再犯這個(gè)錯(cuò)誤。所以最終還是以這篇博客呈現(xiàn)給大家。希望也可以起到一個(gè)提醒大家的作用，注意細(xì)節(jié)，不要粗心大意。

··· 神奇的一幕 ···

　　第二天我打開微信開發(fā)者工具發(fā)現(xiàn)，測(cè)試號(hào)AppId的項(xiàng)目又可以了，控制臺(tái)報(bào)錯(cuò)信息也沒有了。這個(gè)就很尷尬了呀！不太了解是咋回事（如果有大佬知道，請(qǐng)直接拿答案丟我吧!不敢說話...）。直接上圖，如下圖（3）；

圖（1）： 報(bào)錯(cuò)信息

圖（2）：含云開發(fā)項(xiàng)目成功使用Vant組件

圖（3）：測(cè)試號(hào)AppId成功使用Vant框架

總結(jié)

到此這篇關(guān)于微信小程序引入Vant框架的文章就介紹到這了,更多相關(guān)微信小程序引入Vant框架內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論