小程序ColorUI框架初步使用教程及個人項目實戰

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

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

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

一、將ColorUI框架導入微信小程序開發者工具

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

ColorUI框架

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

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

調用icon組件:

20

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

[Excel]Excel2017實用技巧之Vlookup的應用Excel31995個月前

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

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

調用Colorui框架代碼

根據我自己小程序項目的需求,我把文章卡片上的兩段文字加粗,當做文章標題使用,改造很方便,兼容性很強.

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

三、實戰個人微信小程序項目

阿濤技術博客小程序

該小程序使用了微信小程序自定義導航

"navigationStyle": "custom"

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

小程序自定導航

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。