1. 程式人生 > >微信小程式中使用vant UI元件所踩的坑

微信小程式中使用vant UI元件所踩的坑

"Vant Weapp 是有贊移動端元件庫 Vant 的小程式版本,兩者基於相同的視覺規範,提供一致的 API 介面,助力開發者快速搭建小程式應用。"

以上是在vant UI官網對vant UI的描述;

官網地址:https://youzan.github.io/vant-weapp/#/intro

在我註冊完成小程式後,我就準備通過微信開發者工具來進行開發,之前並沒有在微信小程式中引入第三方外掛的經驗,因此,我小心翼翼的按照官網的提示一步一步的進行,可是說真的,官網的使用步驟真的太粗略了,以至於我只能邊看邊摸索;

第一種方法      下載vant原始碼

1.直接通過 git 下載 Vant Weapp 原始碼,並將dist目錄拷貝到自己的專案中

git clone https://github.com/youzan/vant-weapp.git

我在我的專案根目錄下新建了一個資料夾  vant-weapp,然後我把下載下來的dist資料夾拷貝的vant-weapp資料夾下

2.在需要使用的page中的json檔案內引入元件

注意:引用路徑以自己專案的實際路徑為準

3.在index.wxml檔案中使用元件

我將首頁中獲取使用者授權的按鈕換成了vant UI樣式的按鈕

第一種方法結束;

 

第二種方法     通過npm安裝;

這種方法也是官方推薦的,可是這條路我卻沒有走通,在此我講我的方法和遇到的問題列舉出來,希望有能人志士可以為我指路;

1.新建小程式專案,我新建的專案名稱為vantTest;

2.在小程式專案的更目錄執行以下命令,來安裝vant weapp

npm i vant-weapp -S --production

3.在微信開發者工具中->詳情->專案設定中選中"使用npm模組"

4.在微信開發者工具->工具->構建npm

此時,控制檯報錯了,並且頁面無法顯示;

錯誤資訊如下:

thirdScriptError 
 sdk uncaught third Error 
 module "miniprogram_npm/vant-weapp/common/utils" is not defined 
 Error: module "miniprogram_npm/vant-weapp/common/utils" is not defined
    at require (http://127.0.0.1:44143/appservice/__dev__/WAService.js:1:718604)
    at http://127.0.0.1:44143/appservice/__dev__/WAService.js:1:718354
    at http://127.0.0.1:44143/appservice/miniprogram_npm/vant-weapp/badge-group/index.js:5:14
    at require (http://127.0.0.1:44143/appservice/__dev__/WAService.js:1:718745)
    at <anonymous>:25:7
    at HTMLScriptElement.scriptLoaded (http://127.0.0.1:44143/appservice/appservice?t=1543388690933:3727:23)

此錯誤暫未解決,希望大神提供幫助;