豬眼睛發紅  養殖項目可行性報告  養殖50大騙局揭秘  養20頭牛國家補貼多少 
 
當前位置:首頁 > 養豬技術 > 綜合養豬 > 正文

五分鐘上手Vant,快速搭建小程序界面樣式

   轉載 發布時間:2019-06-17 12:47:37   來源:IT實戰聯盟   舉報
【導讀】Vant Weapp 是有贊移動端組件庫 Vant 的小程序版本,兩者基于相同的視覺規范,提供一致的 API 接口,助力開發者快速搭建小程序應用兩大參考神獸:文檔:https://youzan.github.io/vant-weapp/#/intro開源:https://github.com/yo...


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界面寫一點文檔里面的代碼

默認按鈕
主要按鈕
警告按鈕
危險按鈕

9:引入成功:然后你就可以依靠文檔來進行復制黏貼了,因為自己寫css的日子真的又煩人又浪費時間吶。

最后,為啥推薦這個組件庫,因為實在是省力氣,拿這個步驟條時間戳來說,前兩天寫了好一會

現在只需要三步即可完成,30秒中不到全部搞定,當然了,不推薦新手使用這個復制黏貼的方法,畢竟代碼功夫還是需要一筆一畫來提升境界的。

wxml



steps="{{ steps }}"
active="{{ active }}"
/>

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后前端妹子,愛編程,愛運營,文藝與代碼齊飛,魅力與智慧共存的程序媛一枚。

免責申明:本欄目所發資料信息部分來自網絡,僅供大家學習、交流。我們尊重原創作者和單位,支持正版。若本文侵犯了您的權益,請直接點擊提交聯系我們,立刻刪除!
 
相關推薦
 
圖文熱點
 

 

欄目推薦

開發一個微信小程序多少錢

同城小程序具有哪些優勢?

五分鐘上手Vant,快速搭建小程序界面樣式

權力的游戲雖然完結了,但愛爾蘭留學卻越來越火

帶著爸爸去留學:兩個娃問題不斷,到底是沒家教還是可理解

《帶著爸爸去留學》孫紅雷“喊爸三連”笑點頻出

 
 
幸运飞艇在线精准计划