小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

分享

Axure實(shí)戰(zhàn)21:使用Axure和API接口創(chuàng)建一個(gè)QRCode二維碼生成器

 撓癢癢 2023-05-05 發(fā)布于四川

在本章中,你將學(xué)會(huì)使用Axure和API接口創(chuàng)建一個(gè)二維碼生成器。

項(xiàng)目背景

二維碼,用某種特定的幾何圖形按一定規(guī)律在二維平面上排布,通過(guò)分布的黑白相間的圖形記錄數(shù)據(jù)符號(hào)信息。

現(xiàn)今二維碼無(wú)時(shí)無(wú)刻在改變著我們的生活,健康狀態(tài)、公交出行、身份驗(yàn)證……那么小小一個(gè)二維碼,卻蘊(yùn)含著豐富的信息。

二維碼如此地重要,那么本章,我們就來(lái)學(xué)習(xí)Axure和第三方API接口來(lái)創(chuàng)建一個(gè)二維碼生成器。

項(xiàng)目搭建

首先,創(chuàng)建一個(gè)新項(xiàng)目,命名為QRCode。

1.png

基礎(chǔ)準(zhǔn)備

由于我們是調(diào)用第三方提供的API接口,這里以草料二維碼API為例。

https://cli.im/api/qrcode/code?text=二維碼內(nèi)容
復(fù)制代碼

當(dāng)然還有其他第三方的二維碼生成的API,例如:

https://api./qrcode/create/?url=網(wǎng)站地址
復(fù)制代碼

我們可以直接使用API接口,結(jié)合我們Axure繪制的前端頁(yè)面,來(lái)實(shí)現(xiàn)二維碼生成器的效果。

頁(yè)面樣式

我們首先給頁(yè)面填充一個(gè)背景顏色#F0F2F5。

拖入一個(gè)“文本框”組件,命名為“input”。

設(shè)置位置為(40,40),設(shè)置尺寸為600*40,設(shè)置字號(hào)為14,設(shè)置線段顏色為#CCCCCC,設(shè)置圓角半徑為5,左側(cè)邊距為10。

在“交互”工具欄中,設(shè)置“鼠標(biāo)懸停的樣式”,勾選線段顏色為#1890FF,提示文本為“請(qǐng)輸入網(wǎng)址/內(nèi)容”,隱藏提示為“獲得焦點(diǎn)”。

2.png

這就是我們輸入內(nèi)容區(qū)域。

拖入一個(gè)“主要按鈕”組件,命名為“commit”。

設(shè)置位置為距離“input”輸入框左側(cè)10的位置,設(shè)置尺寸為100*40,設(shè)置字號(hào)為14,設(shè)置填充顏色為#1890FF。

3.png

拖入一個(gè)“內(nèi)聯(lián)框架”組件,命名為“QR”。

設(shè)置位置為距離“input”輸入框下40的位置,左右都和上面的內(nèi)容對(duì)齊。勾選“隱藏邊框”,設(shè)置滾動(dòng)模式為“從不滾動(dòng)”。

4.png

以上,我們就完成了頁(yè)面樣式的準(zhǔn)備。

交互動(dòng)作

接下來(lái),我們來(lái)實(shí)現(xiàn)下交互邏輯。

當(dāng)我們input輸入框有內(nèi)容的時(shí)候,點(diǎn)擊“生成二維碼”按鈕,在QR展示區(qū)域就會(huì)拼裝API接口展示二維碼。

選中“生成二維碼”按鈕,在“樣式”工具欄中新建交互,選擇“點(diǎn)擊時(shí)”,選擇“框架中打開(kāi)鏈接”,目標(biāo)為“QR”內(nèi)聯(lián)框架,選擇“鏈接到URL或文件路徑”,點(diǎn)擊fx打開(kāi)編輯值彈窗。

在編輯值彈窗中,將API鏈接寫(xiě)上去,“二維碼內(nèi)容”部分使用局部變量替代,局部變量LVAR1來(lái)源于“input”輸入框的文本。

5.png

項(xiàng)目預(yù)覽

完成后,我們?cè)跒g覽器中預(yù)覽下效果。

6.png

草料二維碼API也提供了一些樣式供我們拼裝,我們也可以直接使用API分享的樣式。具體方法如下:

https://cli.im/api/qrcode/code?text=二維碼內(nèi)容&mhid=sELPDFnok80gPHovKdI
復(fù)制代碼

后半部分可以使用API提供的樣式代碼。

7.png

哈哈哈,效果不錯(cuò)!

為了讓這個(gè)項(xiàng)目能夠公開(kāi)訪問(wèn),我們可以生成html文件,然后發(fā)布到gitHub或者gitee中,這樣就可以將網(wǎng)站分享給朋友們了。

項(xiàng)目地址

QRCode二維碼生成器:ricardowesley./qrcode

快來(lái)動(dòng)手試試吧!

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,所有內(nèi)容均由用戶發(fā)布,不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息,謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花(0

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多