(“技術哥”小編溫馨提示:本文適合沒有使用過小程序weui的小程序開發初學者。)
"技術哥"今天將給大家帶來 : “如何使用騰訊自己出品的基礎樣式庫"WEUI"來實現我們小程序的基本佈局。”
一、搭建小程序開發環境(之前教程講過)
在右下角小程序那裡選擇小程序開發文檔
接著我們進入小程序開發
(只要跟著左側目錄欄中的"起步"一步一步來,最終我們就可以實現一個"Hello World"。)
備註:看小程序開發者文檔比看任何書都管用(一般人"技術哥"不告訴他)
二、引入weui
首先新建一個項目來到主頁面
接下來跟著“技術哥”的步驟下載weui文件包:
1.打開谷歌瀏覽器搜索weui
2.點擊框內的鏈接
3.根據提示的步驟1和步驟2來點擊即可下載
4.壓縮包下載好後將其解壓
5.在我們新建的小程序項目中新建一個文件夾(“技術哥”給它起了個名字叫做”style“),選中它點擊右鍵選擇硬盤打開。
6.點開剛剛下載的weui文件,進入dist中的style,然後將其目錄下的weui.wxss拖入我們新建的style中,小程序style/weui.wxss編輯器界面顯示是這樣的
7.點擊app.wxss在第一行加入@import"pages/style/weui.wxss"操作完成後weui即引入成功
三、基礎控件
1.首先打開手機並在微信主頁面的小程序那裡搜索 “WeUi”
2.接著我們在微信小程序開發者工具中新建一個文件夾dist,右鍵硬盤打開dist並將我們解壓過weui文件dist/example導入文件夾中。
3. 最後我們就可以在手機上看好樣式然後從小程序開發者工具dist/example/../..中找到相應的代碼“搬磚”即可。wxss與wxml代碼對照填入,並可以參考開發者文檔。
今天的weui界面引入就給大家講解到這裡,跟著“技術哥”的引導一步步做,即可入門“小程序基本佈局之weui”,關注“技術哥”,獲得更多幹貨。
閱讀更多 Tdata技術哥 的文章