一個App完成入門篇（七）- 完成發現頁面

標籤：

第七章是入門篇的倒數第二篇文章了，明天整個APP將進入收官。

 

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

• 匯入項目
• do_WebView組件
• 掃描功能
• 自訂事件

將要學習的demo如下所示

1. 匯入完整項目

本節樣本demo請參考，可以匯入到設計器中學習。

這節教程中將要用到的組件有do_BarcodeView請大家前幾節教程所教授的方法，提前添加這兩個組件，並打成相應調試包用於調試。

2. do_WebView組件
do_WebView是一個很強大的組件，既可以訪問網頁，也可以加在本地html，更可以在html頁面中嵌套DeviceOne組件，能完美結合h5頁面和DeviceOne原生組件。

分析一下我們將要實現的發現頁面，點擊“掃描”按鈕調用do_BarcodeView的掃描功能，進行二維碼掃描，而在頁面正中放一個do_WebView組件，載入本地的html檔案，在該檔案中自訂頁面樣式，並在html中畫出的button按鈕中響應DeviceOne的各組件功能。

更詳細的文檔請見WebView的使用

3.掃描功能
建立一個scanBarcode.ui頁面，裡面就放一個do_BarcodeView組件，在點擊“點擊掃描”按鈕後開啟該頁，並調用do_BarcodeView的scan功能掃描二維碼，在掃描成功的回調中調用closePage關閉該頁，這裡僅供示範用，正常掃描的結果會在回呼函數的data中返回，使用者可以拿到這個data做任意操作。

4.自訂事件
DeviceOne提供事件和訊息機制，開發人員可以很方便的使用。這裡有一個簡單的樣本：

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

更詳細的文檔請見事件和訊息機制的介紹

 

一個App完成入門篇（七）- 完成發現頁面