小程序ColorUI框架初步使用教程及個人項目實戰(zhàn)

最近在寫自己的一個微信小程序項目《阿濤技術(shù)博客》,目前還在寫前端小程序部分,之前我有用過小Weiui,Linui等微信小程序UI框架,在一次網(wǎng)上搜索的時候,看到了ColorUI框架后,當(dāng)時就覺得眼前一亮,于是就順便掃了一下ColorUI框架的示例小程序,第一感覺不是顏色炫麗,制作精美,常用微信小程序元素及常用組件,在這里面都能找到.

下邊開始介紹它的使用方法，我們先從github上下載的它的文件：

GitHub地址：https://github.com/weilanwl/ColorUI/

一、將ColorUI框架導(dǎo)入微信小程序開發(fā)者工具

下載完成后,解開壓縮包,我們會得到Colorui-UniApp,demo,template這三個文件夾,然后用于微信小程序開發(fā)的,就選template這個文件夾

ColorUI框架

template是一個空白的小程序模板，ColorUI框架作者已經(jīng)將ColorUI的使用環(huán)境搭建好了，我們可以直接在上邊開始我們自己的項目。

二、下面再來介紹下ColorUI框架的初步使用.

調(diào)用icon組件:

20

調(diào)用文章卡片,未使用框架前,用flex布局,大家看下代碼

[Excel]Excel2017實用技巧之Vlookup的應(yīng)用Excel31995個月前

使用flex布局制作的文章卡片

然后使用ColorUI框架后的就是這樣.

調(diào)用Colorui框架代碼

根據(jù)我自己小程序項目的需求,我把文章卡片上的兩段文字加粗,當(dāng)做文章標(biāo)題使用,改造很方便,兼容性很強(qiáng).

根據(jù)個人項目需求,我改造之后的樣子

三、實戰(zhàn)個人微信小程序項目

阿濤技術(shù)博客小程序

該小程序使用了微信小程序自定義導(dǎo)航

"navigationStyle": "custom"

微信小程序自定義導(dǎo)航常用的“膠囊按鈕”不用自己去網(wǎng)上到處找代碼，用ColorUI框架三行代碼就解決.

小程序自定導(dǎo)航

然后頂部和底部導(dǎo)航,還有輪播圖片都是直接到colorUI框架的demo中直接復(fù)制粘貼,就能完成微信小程序UI頁面.

《新程序員》：云原生和全面數(shù)字化實踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的里面使用轮播_小程序ColorUI框架初步使用教程及个人项目实战的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。