玩轉(zhuǎn) DIY 可視化打造 UniApp 小程序

從想法到原型到源碼，一步到位生成源碼工具

s

內(nèi)容提要

本書是一本介紹使用 DIY 可視化軟件制作 UniApp 小程序的圖書，通

過基礎(chǔ)操作和實(shí)戰(zhàn)案例的講解，幫助讀者深入了解如何制作 Uniapp

小程序。

本書分為三篇：

第 1 篇基礎(chǔ)操作，讀者通過這一部分內(nèi)容的學(xué)習(xí)，就能夠掌握軟件的

使用方法。

第 2 篇 UniApp 基礎(chǔ)知識(shí)，帶大家掌握 Vue 前端技術(shù)，為實(shí)際案例作

技術(shù)準(zhǔn)備。

第 3 篇實(shí)戰(zhàn)案例，讀者可以在這一部分的內(nèi)容中，學(xué)習(xí)掌握工具的開

發(fā)技巧，以及獲得各種實(shí)戰(zhàn)案例的參考。

本書不但適合零基礎(chǔ)的讀者由淺至深地學(xué)習(xí)，而且適合具備一定基礎(chǔ)

的讀者作為實(shí)戰(zhàn)項(xiàng)目的參考，也可以作為學(xué)校相關(guān)課程配套教材，或

互聯(lián)網(wǎng)公司、高新科技企業(yè)等新內(nèi)訓(xùn)的教程。

目錄

第一章 初始 DIY 可視化...................................................................................................................5

1.1. DIY 可視化...........................................................................................................................5

1.2. uni-app 介紹........................................................................................................................5

1.3. 小結(jié).................................................................................................................................... 6

第二章 創(chuàng)建與發(fā)布.......................................................................................................................... 7

2.1. 設(shè)計(jì)器介紹........................................................................................................................ 7

2.2. 創(chuàng)建應(yīng)用.......................................................................................................................... 11

2.3. 創(chuàng)建頁面.......................................................................................................................... 11

2.4. 全局設(shè)置.......................................................................................................................... 15

2.5. 查看代碼.......................................................................................................................... 16

2.6. 導(dǎo)出應(yīng)用.......................................................................................................................... 16

2.7. 生成應(yīng)用.......................................................................................................................... 17

第三章 使用組件............................................................................................................................ 27

3.1. 添加組件至設(shè)計(jì)器.......................................................................................................... 27

3.2. 修改組件圖層名稱.......................................................................................................... 27

3.3. 修改組件字段標(biāo)識(shí).......................................................................................................... 28

3.4. 修改組件柵格大小.......................................................................................................... 28

3.5. 修改圖層布局.................................................................................................................. 29

3.6. 修改組件個(gè)數(shù).................................................................................................................. 30

3.7. 修改組件樣式.................................................................................................................. 31

第四章 組件入門............................................................................................................................ 39

4.1. 基礎(chǔ)組件.......................................................................................................................... 39

4.2. 容器組件.......................................................................................................................... 53

4.3. 表單組件.......................................................................................................................... 65

4.4. 圖表組件.......................................................................................................................... 69

第五章 UniApp 進(jìn)階....................................................................................................................... 70

5.1. 配置項(xiàng).............................................................................................................................. 70

5.2. 生命周期.......................................................................................................................... 70

5.3. 頁面路由.......................................................................................................................... 70

5.4. JS 語法............................................................................................................................... 70

5.5. CSS 語法.............................................................................................................................70

5.6. vue 語法............................................................................................................................ 70

第六章 高級進(jìn)階............................................................................................................................ 70

6.1. UNIAPP ...............................................................................................................................70

6.2. API 請求.............................................................................................................................70

6.3. 事件交互.......................................................................................................................... 70

6.4. 屬性綁定.......................................................................................................................... 70

6.5. 事件綁定.......................................................................................................................... 70

第七章 頁面案例............................................................................................................................ 71

7.1. 用戶登錄頁...................................................................................................................... 71

7.2. 會(huì)員中心首頁.................................................................................................................. 71

7.3. 充值中心首頁.................................................................................................................. 71

7.4. 辦公系統(tǒng)首頁.................................................................................................................. 71

7.5. 基金理財(cái)首頁.................................................................................................................. 71

第八章 項(xiàng)目演練-商城小程序 APP ..............................................................................................71

8.1. 首頁框架搭建.................................................................................................................. 71

8.2. 商品列表及詳情.............................................................................................................. 71

8.3. 會(huì)員登錄.......................................................................................................................... 71

8.4. 購物車.............................................................................................................................. 71

8.5. 用戶訂單.......................................................................................................................... 71

8.6. 個(gè)人中心.......................................................................................................................... 71

8.7. 發(fā)布上線.......................................................................................................................... 71

第一章 初始 DIY 可視化

1.1.DIY 可視化

DIYGW 可視化工具是一個(gè)傻瓜式、拖拽式、模塊化開發(fā)軟件工具；

一個(gè)從想法到原型到源碼，一步到位低代碼生成源碼工具。

所見即所得，拖拽設(shè)計(jì)，無編程基礎(chǔ)的人都能輕松掌握。只需一

次設(shè)計(jì)，就能擁有微信小程序、支付寶小程序、頭條小程序、QQ 小

程序、百度小程序、FinClip 小程序、H5、WebApp、UNIAPP 等源碼。

豐富的組件模塊，宮格列表、圖文菜單、卡片、列表、輪播圖、導(dǎo)航

欄、按鈕、標(biāo)簽、表單、單選、復(fù)選、下拉選擇、多層選擇、級聯(lián)選

擇、開關(guān)、時(shí)間軸、模態(tài)框、步驟條、頭像、進(jìn)度條、動(dòng)態(tài)通知欄、

進(jìn)度條、星級評分等。

豐富的前后臺(tái)通信模塊，按鈕點(diǎn)擊事件、自定義方法調(diào)用、API

在線調(diào)試、數(shù)據(jù)動(dòng)態(tài)綁定、For 循環(huán)數(shù)據(jù)綁定、IF 判斷綁定等

無論有無編程基礎(chǔ)，都能在 DIYGW.COM 中找到自己的樂趣。

官方在線設(shè)計(jì)網(wǎng)站：https://www.diygw.com

1.2.uni-app 介紹

uni-app 是一個(gè)使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編

寫一套代碼，可發(fā)布到 iOS、Android、Web（響應(yīng)式）、以及各種小

程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用

等多個(gè)平臺(tái)。

DCloud 公司擁有 900 萬開發(fā)者、數(shù)百萬應(yīng)用、12 億手機(jī)端月活用

戶、數(shù)千款 uni-app 插件、70+微信/qq 群，騰訊課堂官方為 uni-app

錄制培訓(xùn)課程，開發(fā)者可以放心選擇。

uni-app 在手，做啥都不愁。即使不跨端，uni-app 也是更好的小

程序開發(fā)框架、更好的 App 跨平臺(tái)框架、更方便的 H5 開發(fā)框架。不

管領(lǐng)導(dǎo)安排什么樣的項(xiàng)目，你都可以快速交付，不需要轉(zhuǎn)換開發(fā)思維、

不需要更改開發(fā)習(xí)慣。

1.3.小結(jié)

不管你是產(chǎn)品經(jīng)理、需求原型設(shè)計(jì)師、UI 設(shè)計(jì)師、美工、前端頁

面工程師、前端開發(fā)人員、計(jì)算機(jī)老師還是學(xué)生，DIY 官網(wǎng)可視化設(shè)

計(jì)器都可以幫助你輕松創(chuàng)建專業(yè)的、獨(dú)一無二的應(yīng)用。

高效的設(shè)計(jì)快速生成源碼，讓你都能輕松做出私有化部署的應(yīng)用

APP。

幫助業(yè)務(wù)專家和開發(fā)人員就應(yīng)用需求和界面進(jìn)行協(xié)作做出更靈活

的更高效的客戶體驗(yàn)應(yīng)用程序，加快上市速度并加快應(yīng)用交付速度，

同時(shí)共同構(gòu)建滿足業(yè)務(wù)對功能和可用性的所有需求的應(yīng)用，降低了成

本，最大程度地減少了昂貴的資源。

第二章 創(chuàng)建與發(fā)布

2.1.設(shè)計(jì)器介紹

設(shè)計(jì)器能力類似于 sketch，figma 的設(shè)計(jì)工具，但 DIY 可視化的優(yōu)

勢是可一鍵將設(shè)計(jì)原型直接變成源碼。

2.1.1. 快捷功能區(qū)

軟件的頂部把一些常用功能的功能放在頂部、及右邊操作按鈕區(qū)，

鼠標(biāo)移動(dòng)至對應(yīng)的圖標(biāo)會(huì)有相關(guān)功能提示，主要頂部工具欄：可撤銷、

重置、在線預(yù)覽、真機(jī)預(yù)覽、導(dǎo)出源碼、保存、清空當(dāng)前頁代碼；右

邊工具欄：上下移動(dòng)組件、復(fù)制組件、保存組件庫、鎖定圖層、API

及自定義方法、組件圖層面板。

頂部：工具欄，可撤銷、重置、在線預(yù)覽、真機(jī)預(yù)覽、導(dǎo)出源碼、

保存、清空當(dāng)前頁代碼；應(yīng)用級設(shè)置:全局變量、攔截器、第三方字

體圖標(biāo)。

2.1.2. 頁面管理

頁面管理位于軟件的左上角位置，它的作用是管理整個(gè)應(yīng)用的所

有頁面，也能夠進(jìn)行頁面的添加、刪除、命名、拖拉頁面排序等操作。

當(dāng)我們單擊頁面名稱的時(shí)候，這個(gè)頁面會(huì)在主編輯區(qū)打開，新建

頁面默認(rèn)只有標(biāo)題，設(shè)計(jì)內(nèi)容區(qū)是空白的，頁面的內(nèi)容是我們自己來

設(shè)計(jì)的。

2.1.3. 組件屬性與樣式

組件的屬性并不是每個(gè)組件一樣，它們基礎(chǔ)屬性相同，也有自身

屬性、通過屬性設(shè)置來達(dá)到組件不同的效果、組件事件設(shè)置集成在屬

性設(shè)置里。

組件樣式全部相同，按組件的整體性來設(shè)置，不同的組件樣式可

以直接通過復(fù)制樣式的方式支持拷貝至另一組件。

2.1.4. 應(yīng)用快捷鍵

系統(tǒng)常用的快捷鍵如下：

快速復(fù)制：CTRL+C

跨頁面復(fù)制：ALT+C

跨頁面粘貼：CTRL+V

上移一層：↑

下移一層：↓

置頂：CTRL+ ↑

置底：CTRL+ ↓

重做：CTRL + Y

撤回：CTRL + Z

組件刪除：CTRL+D 或 DEL

復(fù)制樣式：CTRL + F

粘貼樣式：CTRL + SHIFT + F

清除樣式：CTRL + SHIFT + L

保存：CTRL + S

點(diǎn)擊組件右鍵，也會(huì)提示相應(yīng)的快捷鍵

2.2.創(chuàng)建應(yīng)用

會(huì)員中心、點(diǎn)擊新建新版 UNIAPP、微信、支付寶、頭條、百度等

小程序、H5 應(yīng)用，創(chuàng)建完成后，點(diǎn)擊編輯應(yīng)用，進(jìn)入設(shè)計(jì)器

2.3.創(chuàng)建頁面

用戶在左側(cè)設(shè)計(jì)器，頁面管理找到新增頁面圖標(biāo)，點(diǎn)擊后彈出輸

入頁面標(biāo)識(shí)、頁面標(biāo)題即可創(chuàng)建新的頁面。

其中頁面標(biāo)識(shí)相當(dāng)我們生成代碼的路徑，比如:index/user/edit,表

示 index/user 是目錄級，最后的 edit 是頁面標(biāo)識(shí)，最好的一個(gè)標(biāo)識(shí)將

會(huì)生成一個(gè).vue 后綴名的文件。頁面路徑及頁面名稱系統(tǒng)會(huì)在導(dǎo)出源

碼里自動(dòng)生成在 pages.json 配置文件里。

2.3.1. 首頁設(shè)置

首頁面對應(yīng)所有頁面的第一個(gè)頁面，如果在設(shè)計(jì)的過程中，即可

拖動(dòng)頁面進(jìn)行頁面排序。

2.3.2. 頁面屬性設(shè)置

屬性管理里，可以進(jìn)行設(shè)置頁面導(dǎo)航背景、導(dǎo)航字體顏色，頁面

背景圖片顏色、整體頁面字體大小、頁面字體顏色等。

2.3.3. 基本組件設(shè)計(jì)頁面

點(diǎn)擊左側(cè)基本組件，里面包含了常用的基礎(chǔ)組件、容器組件、表

單組件、圖表組件，只需要手動(dòng)選中的組件進(jìn)設(shè)計(jì)區(qū)，然后在屬性里

修改組件對應(yīng)的屬性設(shè)計(jì)你想要的效果。

比如我拖動(dòng)一個(gè)文本內(nèi)容組件，選擇組件按住鼠標(biāo)左鍵拖進(jìn)設(shè)計(jì)

區(qū)，右邊屬性可以對組件屬性、組件樣式進(jìn)行針對性設(shè)置，所見即所

得的設(shè)置。

2.3.4. 組件模板設(shè)計(jì)頁面

系統(tǒng)內(nèi)置了一系列常用組件模板，覺得哪個(gè)模板適合自己，只需

要在上面點(diǎn)擊一下，整個(gè)組件模板將在設(shè)計(jì)區(qū)增加此模板，可以拖動(dòng)

整個(gè)組件模板進(jìn)行順序調(diào)整，同樣可以通過右邊屬性可以對組件屬性、

組件樣式進(jìn)行針對性設(shè)置。

2.3.5. 頁面模板設(shè)計(jì)頁面

頁面模板設(shè)計(jì)頁面相當(dāng)頁面級模板復(fù)用，系統(tǒng)內(nèi)置了一系列常用

頁面模板，覺得哪個(gè)模板適合自己，只需要在上面點(diǎn)擊一下，整個(gè)頁

面將替換成該頁面模板。

2.4.全局設(shè)置

全局設(shè)置主要是對應(yīng)用級底部菜單的設(shè)置，設(shè)置底部菜單默認(rèn)圖

標(biāo)、選中圖標(biāo)、菜單標(biāo)題、頁面鏈接地址、默認(rèn)標(biāo)題顏色及選中標(biāo)題

顏色。如果用戶設(shè)置后，代碼最終會(huì)生成 pages.json 下的 tabBar 相關(guān)

屬性。不設(shè)置不生成相關(guān)底部菜單配置。

2.5.查看代碼

點(diǎn)擊工具欄區(qū)，查看源碼，即可查看當(dāng)前頁的代碼，用戶可以快

速復(fù)制當(dāng)前頁的代碼進(jìn)已有的項(xiàng)目進(jìn)行替換或新建頁面進(jìn)行開發(fā)。

2.6.導(dǎo)出應(yīng)用

點(diǎn)擊工具欄區(qū)，導(dǎo)出源碼，輸入應(yīng)用標(biāo)識(shí)，此處我們選擇導(dǎo)出

uniapp 源碼，設(shè)置完成后，點(diǎn)擊確定，然后即可下載源碼。下載的代

碼會(huì)有壓縮包的形式下載下來。

2.7.生成應(yīng)用

2.7.1. 環(huán)境搭建

下載 HBUilder

HBuilderX 下載地址：https://www.dcloud.io/hbuilderx.html

HBuilderX 是通用的前端開發(fā)工具，但為 uni-app 做了特別強(qiáng)化。

下載后默認(rèn)不包含 uni-app 插件，在運(yùn)行或發(fā)行 uni-app 時(shí)，會(huì)提

示安裝 uni-app 插件，插件下載完成后方可使用。

2.7.2. 項(xiàng)目搭建

解壓導(dǎo)出應(yīng)用壓縮包文件，打開 hbuilder 前端開發(fā)工具，點(diǎn)擊文

件--導(dǎo)入--從本地目錄導(dǎo)入--選擇解壓出來的目錄--然后點(diǎn)擊選擇目錄。

2.7.3. H5 運(yùn)行及發(fā)行

2.7.3.1. 本地應(yīng)用及調(diào)試

在 HBuilder 中，有頂部菜單、toolbar 運(yùn)行按鈕、快捷鍵三種運(yùn)行

入口。

1．頂部菜單運(yùn)行

2．toolbar 工具欄上的運(yùn)行按鈕

3．快捷鍵應(yīng)行

運(yùn)行快捷鍵是【Ctrl+r】

2.7.3.2. 內(nèi)置瀏覽器應(yīng)行

打開 uni-app 項(xiàng)目的頁面，點(diǎn) HBuilderX 右上角的預(yù)覽按鈕，可以

在內(nèi)置瀏覽器里打開 Web 運(yùn)行結(jié)果，也可以點(diǎn)右鍵打開控制臺(tái)調(diào)試。

修改保存工程源碼時(shí)，右邊的瀏覽器內(nèi)容可以自動(dòng)刷新。

當(dāng)然我們也可以回到 DIY 可視化進(jìn)行對應(yīng)的頁面設(shè)計(jì)，設(shè)計(jì)完成

后，點(diǎn)擊查看源碼，然后把源碼復(fù)制過來替換即可。

2.7.3.3. 發(fā)行

? 發(fā)行準(zhǔn)備

點(diǎn)擊 mainfest.json 里基礎(chǔ)配置，生成 uni-app 應(yīng)用標(biāo)識(shí)。獲取標(biāo)識(shí)

前，需要先綁定 dcloud 用戶賬號(hào)。

? H5 發(fā)行

點(diǎn)擊菜單欄--發(fā)行--網(wǎng)站 PC Web 或手機(jī) H5（適用于 uni-app）。

點(diǎn)擊發(fā)行，如果發(fā)行準(zhǔn)備沒配置，發(fā)行時(shí)調(diào)試窗口會(huì)提示，發(fā)行成功

后將在根目錄生成 unpackage\\dist\\build\\h5 文件夾，此文件對應(yīng)的即

為發(fā)行版本。如果你已有自己的網(wǎng)站，只需要把此目錄下的所有文件

拷貝進(jìn)自己的服務(wù)器里，再通過自己域名來訪問即可。

2.7.4. 微信小程序運(yùn)行及發(fā)行

2.7.4.1. 下載微信開發(fā)者工具

微信開發(fā)者工具下載地址：

https://developers.weixin.qq.com/miniprogram/dev/devtools/downl

oad.html

下載完成后，安裝微信小程序開發(fā)者工具。

2.7.4.2. 微信小程序調(diào)試

點(diǎn)擊運(yùn)行圖標(biāo)--微信開發(fā)者工具，HBuilder 會(huì)自動(dòng)跟開發(fā)者工具建

立關(guān)系，自動(dòng)創(chuàng)建應(yīng)用并用微信開發(fā)者工具打開。如果未登錄過微信

開發(fā)者工具，會(huì)提示微信登錄，請使用微信掃一掃登錄，登錄后，重

新發(fā)行一次。如成功，微信小程序會(huì)自動(dòng)打開首頁面。

2.7.4.3. 發(fā)行

點(diǎn)擊菜單欄--發(fā)行--小程序微信（僅適用于 uni-app），將會(huì)彈出一個(gè)

窗口，窗口里輸入小程序 Appid。以 wx 開頭，如果你還沒有自己微

信小程序，請前往微信公眾平臺(tái) https://mp.weixin.qq.com/申請自己

的微信小程序來獲取 appid。

點(diǎn)擊后 Hbuilder 會(huì)重新對程序進(jìn)行編譯，編譯完成后使用微信開發(fā)者

工具來上傳代碼至公眾平臺(tái)。

第三章 使用組件

3.1.添加組件至設(shè)計(jì)器

在左側(cè)基本組件庫選擇要使用的組件，按住左鍵不放，拖動(dòng)到設(shè)計(jì)器

適合的位置上松開。

3.2.修改組件圖層名稱

修改組件圖層名稱，方便快速定位組件位置。找到圖層面板按鈕，點(diǎn)

擊顯示圖層面板，圖層面板將會(huì)顯示當(dāng)前所有的組件。

3.3.修改組件字段標(biāo)識(shí)

字體標(biāo)識(shí)是用來區(qū)分組件的標(biāo)識(shí)，盡量保持維一性，在不改變的組件

標(biāo)識(shí)的情況下，每拖動(dòng)一次相同組件，組件標(biāo)識(shí)會(huì)自動(dòng)增加 1，組件

標(biāo)識(shí)在實(shí)際使用中會(huì)根據(jù)組件特性來起效。

比如有兩個(gè)字段用戶名及密碼，那么組件字段標(biāo)識(shí) username、

password。

3.4.修改組件柵格大小

通過基礎(chǔ)的 24 分欄，迅速簡便地創(chuàng)建布局。快速拖動(dòng)?xùn)鸥翊笮?，?/p>

變布局，方便快速頁面排版。

基礎(chǔ)排版都可以直接采用柵格大小來布局，復(fù)雜的布局將會(huì)借助容器

組件里 FLEX 組件來達(dá)到復(fù)雜的布局。

3.5.修改圖層布局

? 設(shè)計(jì)區(qū)拖動(dòng)

在設(shè)計(jì)區(qū)找到想要變更位置組件，按住鼠標(biāo)左鍵，即可快速變換位置。

? 圖層區(qū)拖動(dòng)

重點(diǎn)推薦圖層區(qū)拖動(dòng)，特別在復(fù)雜的布局下，通過移動(dòng)組件圖層的順

序來達(dá)到變更布局，達(dá)到比較精細(xì)化拖動(dòng)效果。

3.6.修改組件個(gè)數(shù)

宮格組件、圖文菜單、圖片輪播、組件輪播、選項(xiàng)卡、折疊面板等組

件默認(rèn)數(shù)組，支持增加、修改、刪除、改變順序。

以宮格組件為例，組件默認(rèn)個(gè)數(shù)為 6，移動(dòng)組件對應(yīng)內(nèi)容區(qū)，點(diǎn)擊對

應(yīng)功能按鈕圖標(biāo)動(dòng)態(tài)改變組件。

3.7.修改組件樣式

3.7.1. 基礎(chǔ)設(shè)置

設(shè)置字體顏色、大小、是否粗體、是否斜體、文本劃線等。

3.7.2. 背景設(shè)置

背景內(nèi)置了背景顏色庫、也支持自定義背景圖片、漸變背景等，其中

背景圖片設(shè)置背景圖片位置、圖片顯示方式、背景重復(fù)。

默認(rèn)第一個(gè)背景顏色有為系統(tǒng)內(nèi)置背景庫。系統(tǒng)已經(jīng)內(nèi)置了常用一些

背景庫，可以直接使用。

如果對內(nèi)置的背景庫不滿意，用戶根據(jù)根據(jù)的要求來設(shè)計(jì)背景。

? 背景圖片

在線自定義背景圖片或直接輸入圖片地址。下圖使用自定義背景圖片

及填充方式，其中填充方式在實(shí)際效果中因?yàn)閳D片不同會(huì)起到不同效

果。

? 漸變背景

在線自定義漸變背景或直接輸入漸變樣式

? 背景顏色

自定義背景顏色，支持透明背景顏色

3.7.3. 外邊距設(shè)置

通過使用單獨(dú)的外邊距屬性，可以對上、右、下、左的外邊距進(jìn)行設(shè)

置。即: margin-top、margin-right、 margin-bottom、 margin-left。

設(shè)置外邊距開關(guān)：只有開關(guān)啟用，才起效。

? 負(fù)值設(shè)置

外邊距支持負(fù)值設(shè)置，在一些特殊場景里，使用負(fù)值來設(shè)計(jì)能達(dá)到更

好的效果。

? 組件交叉顯示

? 上方組件圓角效果顯示

3.7.4. 內(nèi)邊距設(shè)置

通過使用單獨(dú)的內(nèi)邊距屬性，可以對上、右、下、左的內(nèi)邊距進(jìn)行設(shè)

置。即: padding-top、padding-right、 padding-bottom、 padding-left。

設(shè)置內(nèi)邊距開關(guān)：只有開關(guān)啟用，才起效。

內(nèi)邊距設(shè)置右內(nèi)邊距在默認(rèn)情況下，比如文本組件內(nèi)邊距內(nèi)容又比較

少的情況下效果不明顯，是因?yàn)槟J(rèn)文本組件占比是 100%，需要把

組件柵格大小至 0，效果比較好。比如下圖實(shí)際應(yīng)用效果。

3.7.5. 圓角設(shè)置

通過使用單獨(dú)的圓角屬性，可以對上左、上右、下左、下右的四個(gè)圓

角進(jìn)行 設(shè)置。即: border-top-left-radius、 border-top-right-radius、

border-bottom-left-radius、border-bottom-right-radius。

設(shè)置圓角開關(guān)：只有開關(guān)啟用，才起效。

在線實(shí)現(xiàn)設(shè)置不同大小，實(shí)時(shí)預(yù)覽達(dá)到自己想要最佳圓角效果。

? 大小相同圓角

? 下右圓角為 0

? 不同大小圓角

3.7.6. 邊框設(shè)置

圍繞元素內(nèi)容和內(nèi)邊距的一條或多條線,對于這些線條,可以直接自定

義它們的樣式,寬度顏色等。支持全邊框、左邊框、右邊框、上邊框、

下 邊 框 。 即 : border 、 border-left 、 border-right 、 border-top 、

border-bottom。

? 特殊邊框設(shè)置

支持不同位置不同顏色、邊框樣式、顏色，只需要鼠標(biāo)多在邊框設(shè)置

區(qū)上新增圖標(biāo)上，點(diǎn)擊新增，即可設(shè)置。

3.7.7. 陰影設(shè)置

可設(shè)置中陰影的水平偏移、垂直偏移、模糊距離、陰影顏色、支持內(nèi)

外陰影。支持多個(gè)陰影效果疊加在一起。

? 多陰影疊加效果

移動(dòng)至陰影設(shè)置上方，點(diǎn)擊新增陰影，增加陰影，通過下方的屬性設(shè)

置，多個(gè)陰影效果疊加在一起。

第四章 組件入門

4.1.基礎(chǔ)組件

4.1.1. 文本組件

? 基本文本組件

改變文本內(nèi)容：輸入 DIYGW 可視化設(shè)計(jì)器

選擇字體顏色、文體大小等。

? 富文本內(nèi)容組件

比如用戶使用富文本編輯器編輯文本后，組件代碼會(huì)自動(dòng)自動(dòng)識(shí)

別為富文本內(nèi)容組件。

? 模板內(nèi)容

基本文本內(nèi)容在此處有個(gè)比較特殊的用法，不管用戶輸文本內(nèi)容

是什么格式的數(shù)據(jù)，只要選擇模板輸出，生成源碼會(huì)自動(dòng)把此模板代

碼輸出。

4.1.2. 字體圖標(biāo)

系統(tǒng)提供了默認(rèn)的常用的字體圖標(biāo)庫，拖動(dòng)字體圖標(biāo)庫進(jìn)設(shè)計(jì)區(qū)。

? 更換圖標(biāo)

屬性設(shè)置圖標(biāo)、點(diǎn)擊圖標(biāo)可以選擇圖標(biāo)進(jìn)行更換。

? 設(shè)置圖標(biāo)大小

方便在不同的界面布局下圖標(biāo)字體適配界面。

? 更換圖標(biāo)顏色

設(shè)置字體圖標(biāo)顏色，只需要組件樣式里，設(shè)置字體顏色即可更換顏色。

? 字體圖標(biāo)徽標(biāo)

支持快捷設(shè)置徽標(biāo)文本，背景樣式、相對位置

4.1.3. 頭像圖標(biāo)

? 圖標(biāo)類型

頭像圖標(biāo)支持圖片頭像、字體圖標(biāo)頭像、文字圖標(biāo)頭像。

? 對齊方式設(shè)置

多個(gè)圖標(biāo)一起時(shí)，支持不同的布局顯示

? 頭像組疊加

頭像疊加支持從左向右疊加及從右向左疊加

4.1.4. 圖片組件

圖片組件是小程序制作過程中使用非常頻繁的組件

圖片組件默認(rèn)為自適應(yīng)顯示，也可以關(guān)閉自適應(yīng)，控制圖片所顯示的

寬度及高度。圖片支持不同模式設(shè)置，同樣的一張圖片，在不同的模

式下顯示出不同效果。

? 圖片地址

點(diǎn)擊圖片地址進(jìn)入圖片管理器，上傳自己的圖片，選擇圖片源，即可

替換圖片。

? 圖片模式

圖片模式，參照下方模式進(jìn)行設(shè)置

scaleToFill 縮放模式，不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image

元素

aspectFit

縮放模式，保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。也就是

說，可以完整地將圖片顯示出來。

aspectFill

縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。也

就是說，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截

取。

widthFix 縮放模式，寬度不變，高度自動(dòng)變化，保持原圖寬高比不變

heightFix 縮放模式，高度不變，寬度自動(dòng)變化，保持原圖寬高比不變

top 裁剪模式，不縮放圖片，只顯示圖片的頂部區(qū)域

bottom 裁剪模式，不縮放圖片，只顯示圖片的底部區(qū)域

center 裁剪模式，不縮放圖片，只顯示圖片的中間區(qū)域

left 裁剪模式，不縮放圖片，只顯示圖片的左邊區(qū)域

right 裁剪模式，不縮放圖片，只顯示圖片的右邊區(qū)域

top left 裁剪模式，不縮放圖片，只顯示圖片的左上邊區(qū)域

top right 裁剪模式，不縮放圖片，只顯示圖片的右上邊區(qū)域

bottom left 裁剪模式，不縮放圖片，只顯示圖片的左下邊區(qū)域

bottom right 裁剪模式，不縮放圖片，只顯示圖片的右下邊區(qū)域

4.1.5. 宮格組件

宮格組件一般用于同時(shí)展示多個(gè)同類項(xiàng)目的場景，可以給宮格的項(xiàng)目

設(shè)置徽標(biāo)，也可以擴(kuò)展為左右滑動(dòng)形式。

? 宮格類型

宮格組件包括了一宮格、二宮格、三宮格的、四宮格、五宮格、水平

自由宮格。水平自由宮格用于宮格個(gè)數(shù)比較多，通過水平滑動(dòng)顯示其

他隱藏宮格按鈕。

? 卡片類型

整體宮格或子宮格

? 徽標(biāo)類型

徽標(biāo)類型主要用于明顯提示作用，主要設(shè)置徽標(biāo)文本、圖標(biāo)、圓點(diǎn)，

自定義徽標(biāo)背景顏色。

4.1.6. 圖文菜單

圖文菜單主要新聞列表、后臺(tái)功能按鈕操作。通過在線提供的屬性達(dá)

到不同的效果。

主要屬性

? 圖片位置

圖片位置包括了上邊、下邊、左邊、右邊。

? 菜單占比

默認(rèn) 100%、50%、33.33%、25%、自由占比。不同占比及圖片位置顯

示將會(huì)顯示不同布局。

小圖文效果

啟用小圖文開關(guān)，圖文將會(huì)顯示成一行顯示。

4.1.7. 圖片輪播

基本屬性包括自動(dòng)播放、輪播高度、延遲切換時(shí)間等

主要屬性

? 滾動(dòng)方向

默認(rèn)水平方向，支持垂直方向

? 指示按鈕類型

默認(rèn)圓點(diǎn)，支持方形、圓角方法

? 指示按鈕位置

默認(rèn)下中，支持左上、右上、上中間、左下、右下

4.1.8. 通知欄

用于滾動(dòng)通告場景，支持水平滾動(dòng)新聞及垂直切換新聞。允許設(shè)置背

景顏色、字體顏色、圖標(biāo)。