這篇文章主要給大家介紹了關於微信小程序使用Vant Weapp組件庫的相關資料,文中通過示例代碼介紹的非常詳細,對大家學習或者使用微信小程序具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧
地址:https://youzan.github.io/vant/#/zh-CN/intro
一.引入Vant組件庫
1.首先運行 npm init
就會生成 package.json
2.運行
npm i vant-weapp -S --production
3.安裝成功後 點擊 工具 => 構建npm
之後點擊 詳情 => 使用構建npm 渲染
二.使用組件庫
首先在json文件中引入組件
"van-button": "vant-weapp/button"
之後可以在官網找到想要用的組件使用
報錯碼
VM292:1 thirdScriptError sdk uncaught third Error module "miniprogram_npm/vant-weapp/mixins/transition" is not defined Error: module "miniprogram_npm/vant-weapp/mixins/transition" is not defined at require (http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26700) at http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26448 at http://127.0.0.1:56368/appservice/miniprogram_npm/vant-weapp/popup/index.js:5:19 at require (http://127.0.0.1:56368/appservice/__dev__/WAService.js:22:26841) at <anonymous>:395:7 at HTMLScriptElement.scriptLoaded (http://127.0.0.1:56368/appservice/appservice?t=1557802464868:4544:21) at HTMLScriptElement.script.onload (http://127.0.0.1:56368/appservice/appservice?t=1557802464868:4556:20)
解決方法:
你只需要把miniprogram_npm/vant-weapp裏的組件文件夾都刪除,
之後再https://github.com/youzan/vant-weapp下載一份vant, 將dist文件夾(vant-weapp-dev\vant-weapp-dev\dist)中的文件複製到項目的miniprogram_npm/vant-weapp
即下載一份vant,之後替換掉項目中的文件
之後保存解決
總結
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對神馬文庫的支持。