Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本，兩者基于相同的視覺規范，提供一致的 API 接口，助力開發者快速搭建小程序應用
兩大參考神獸：
文檔：https://youzan.github.io/vant-weapp/#/intro開源：https://github.com/youzan/vant-weapp
1：桌面新建一個vant文件夾
2：打開微信開發者工具，在這個文件里新建項目
3：從github上面下載源碼文件：開源：https://github.com/youzan/vant-weapp
4：打開文件，復制dist文件
5：將dist文件黏貼在項目目錄里面
6：打開Vant Weapp的使用文檔：文檔：https://youzan.github.io/vant-weapp/#/button
現在來在index界面來使用一個按鈕的樣式：
7：在 json 文件中配置button組件,修改路徑
{ \”usingComponents\”: { \”van-button\”: \”../../dist/button/index\”}}
8：wxml界面寫一點文檔里面的代碼
<van-button type=\”default\”>默認按鈕</van-button><van-button type=\”primary\”>主要按鈕</van-button><van-button type=\”warning\”>警告按鈕</van-button><van-button type=\”danger\”>危險按鈕</van-button>
9:引入成功：然后你就可以依靠文檔來進行復制黏貼了，因為自己寫css的日子真的又煩人又浪費時間吶。
最后，為啥推薦這個組件庫，因為實在是省力氣，拿這個步驟條時間戳來說，前兩天寫了好一會
現在只需要三步即可完成，30秒中不到全部搞定，當然了，不推薦新手使用這個復制黏貼的方法，畢竟代碼功夫還是需要一筆一畫來提升境界的。
wxml
<view><van-steps steps=\”{{ steps }}\” active=\”{{ active }}\”/></view>
json:
{\”usingComponents\”: { \”van-steps\”: \”../../dist/steps/index\”}}
js
Page({ data: { steps: [ { text: \’步驟一\’, desc: \’描述信息\’ }, { text: \’步驟二\’, desc: \’描述信息\’ }, { text: \’步驟三\’, desc: \’描述信息\’ }, { text: \’步驟四\’, desc: \’描述信息\’ } ] }});
ok，完成，沒錯，真的就是這么簡單。
原文作者：祈澈姑娘 技術博客：https://www.jianshu.com/u/05f416aefbe190后前端妹子，愛編程，愛運營，文藝與代碼齊飛，魅力與智慧共存的程序媛一枚。
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。