一個(gè)App完成入門篇（七）- 完成發(fā)現(xiàn)頁面

Yu_Huang 發(fā)布于2019-08-02 15:54 / 578人閱讀

摘要：本節(jié)教程主要要教會(huì)大家使用二維碼掃描和用組件加在頁面。分析一下我們將要實(shí)現(xiàn)的發(fā)現(xiàn)頁面，點(diǎn)擊掃描按鈕調(diào)用的掃描功能，進(jìn)行二維碼掃描，而在頁面正中放一個(gè)組件，加載本地的文件，在該文件中自定義頁面樣式，并在中畫出的按鈕中響應(yīng)的各組件功能。

第七章是入門篇的倒數(shù)第二篇文章了，明天整個(gè)APP將進(jìn)入收官。

本節(jié)教程主要要教會(huì)大家使用二維碼掃描和用do_WebView組件加在html頁面。

導(dǎo)入項(xiàng)目
do_WebView組件
掃描功能
自定義事件
將要學(xué)習(xí)的demo效果圖如下所示

導(dǎo)入完整項(xiàng)目

本節(jié)示例demo請參考下載地址，可以導(dǎo)入到設(shè)計(jì)器中學(xué)習(xí)。

這節(jié)教程中將要用到的組件有do_BarcodeView請大家前幾節(jié)教程所教授的方法，提前添加這兩個(gè)組件，并打成相應(yīng)調(diào)試包用于調(diào)試。

do_WebView組件
do_WebView是一個(gè)很強(qiáng)大的組件，既可以訪問網(wǎng)頁，也可以加在本地html，更可以在html頁面中嵌套DeviceOne組件，能完美結(jié)合h5頁面和DeviceOne原生組件。

分析一下我們將要實(shí)現(xiàn)的發(fā)現(xiàn)頁面，點(diǎn)擊“掃描”按鈕調(diào)用do_BarcodeView的掃描功能，進(jìn)行二維碼掃描，而在頁面正中放一個(gè)do_WebView組件，加載本地的html文件，在該文件中自定義頁面樣式，并在html中畫出的button按鈕中響應(yīng)DeviceOne的各組件功能。

更詳細(xì)的文檔請見WebView的使用

3.掃描功能
新建一個(gè)scanBarcode.ui頁面，里面就放一個(gè)do_BarcodeView組件，在點(diǎn)擊“點(diǎn)擊掃描”按鈕后打開該頁，并調(diào)用do_BarcodeView的scan功能掃描二維碼，在掃描成功的回調(diào)中調(diào)用closePage關(guān)閉該頁，這里僅供演示用，正常掃描的結(jié)果會(huì)在回調(diào)函數(shù)的data中返回，用戶可以拿到這個(gè)data做任意操作。

4.自定義事件
DeviceOne提供事件和消息機(jī)制，開發(fā)者可以很方便的使用。這里有一個(gè)簡單的示例：

通過on來訂閱do_ALayout_opt的touch事件，在合適的地方用fire來觸發(fā)該事件，需要注意的是，事件的觸發(fā)需在訂閱之后。

更詳細(xì)的文檔請見事件和消息機(jī)制的介紹