搞定小程序界面的必殺技(三部曲)

(“技術哥”小編溫馨提示:本文適合沒有使用過小程序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”,關注“技術哥”,獲得更多幹貨。


分享到:


相關文章: