微信小程序引入Vant框架的全過程記錄

更新時間：2021年06月08日 12:05:19 作者：性感的小肥貓

Vant Weapp 是移動端 Vue 組件庫 Vant 的小程序版本,兩者基于相同的視覺規(guī)范,提供一致的 API 接口,助力開發(fā)者快速搭建小程序應(yīng)用,這篇文章主要給大家介紹了關(guān)于微信小程序引入Vant框架的相關(guān)資料,需要的朋友可以參考下

前言

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

實現(xiàn)步驟

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

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

3. 在命令窗口中鍵入npm install進(jìn)行構(gòu)建，成功之后會在根目錄下生成 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. 在頁面中使用，直接引入組件即可。

··· 小插曲 ···

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

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

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