在本章中,你將學(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。 基礎(chǔ)準(zhǔn)備由于我們是調(diào)用第三方提供的API接口,這里以草料二維碼API為例。
當(dāng)然還有其他第三方的二維碼生成的API,例如:
我們可以直接使用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)”。 這就是我們輸入內(nèi)容區(qū)域。 拖入一個(gè)“主要按鈕”組件,命名為“commit”。 設(shè)置位置為距離“input”輸入框左側(cè)10的位置,設(shè)置尺寸為100*40,設(shè)置字號(hào)為14,設(shè)置填充顏色為#1890FF。 拖入一個(gè)“內(nèi)聯(lián)框架”組件,命名為“QR”。 設(shè)置位置為距離“input”輸入框下40的位置,左右都和上面的內(nèi)容對(duì)齊。勾選“隱藏邊框”,設(shè)置滾動(dòng)模式為“從不滾動(dòng)”。 以上,我們就完成了頁(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”輸入框的文本。 項(xiàng)目預(yù)覽完成后,我們?cè)跒g覽器中預(yù)覽下效果。 草料二維碼API也提供了一些樣式供我們拼裝,我們也可以直接使用API分享的樣式。具體方法如下:
后半部分可以使用API提供的樣式代碼。 哈哈哈,效果不錯(cuò)! 為了讓這個(gè)項(xiàng)目能夠公開(kāi)訪問(wèn),我們可以生成html文件,然后發(fā)布到gitHub或者gitee中,這樣就可以將網(wǎng)站分享給朋友們了。 項(xiàng)目地址QRCode二維碼生成器:ricardowesley./qrcode 快來(lái)動(dòng)手試試吧!
|
|