前言

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

實現(xiàn)步驟

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

2. 在命令窗口中鍵入npm init。然后所有配置都按默認配置進行，只需點擊回車鍵即可。

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

4. 接下來繼續(xù)安裝 Vant框架 ，步驟可根據(jù)官網(wǎng)進行操作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中引入組件，詳細介紹見 Vant官網(wǎng)快速上手

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

··· 小插曲 ···

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

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

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

··· 神奇的一幕 ···

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

圖（1）： 報錯信息

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

圖（3）：測試號AppId成功使用Vant框架

總結(jié)

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

最新評論