Hbuilder開發app實戰-識歲01-actionsheet實例

前言

之前寫了HBuilder開發App入門-滴石，相信大家看完後應該可以入門了，

之後會做一些簡單的app，把nativejs一些常用的功能都過一遍，這樣以後做app就沒什麼難的了。

識歲

藉助與face++的接口，做了一個人臉識別app，準確性和微軟比確實差點，

主要用到了：

1.actionsheet的原生實現

2.選擇本地照片

3.使用攝像頭拍照

4.使用uploader上傳文件

5.調用face++接口進行人臉識別

6.七牛雲上傳的實現

actionsheet

實現

actionsheet是iphone上很常見的，效果見文章頂部圖片，

mui的actionsheet有兩種實現方式，一種還是html5進行模仿，一種是調用封裝好的nativeui進行實現，

和以前一樣，還是比較推薦原生的實現，一是效果逼真，二是缺點比較少。

代碼：

plus.nativeUI.actionSheet({
            title : title,
            cancel : '取消',
            buttons : btnArray
        }, function(e){
            if(func) func(e);
        });

可以看到，其實是調用nativeui組件的actionsheet方法，詳見：這裏，

如上，其實只需要傳入一個標題，和固定的取消按鈕，還有你需要傳入的按鈕數組即可，

有一個回調函數，通過判斷e.index來確定點擊了哪個按鈕，

稍作封裝：

// actionsheet
qiao.h.sheet = function(title, btns,func){
    if(title && btns && btns.length > 0){
        var btnArray = [];
        for(var i=0; i<btns.length; i++){
            btnArray.push({title:btns[i]});
        }
        
        plus.nativeUI.actionSheet({
            title : title,
            cancel : '取消',
            buttons : btnArray
        }, function(e){
            if(func) func(e);
        });
    }
};

本例中，

標題設置爲“選擇照片”，需要兩個按鈕，一個是“拍照”，一個是“相冊”，

代碼：

qiao.h.sheet('選擇照片', ['拍照','相冊'], function(e){
        var index = e.index;
        if(index == 1) choiceCamera();
        if(index == 2) choicePic();
    });

當e.index=1的時候，是點擊了第一個按鈕“拍照”，

當e.index=2的時候，點擊了第二個按鈕“相冊”，

當e.index=0的時候，點擊了取消，不做處理，

當點擊其他地方的時候，e.index=-1，同樣不做處理。

更多教程：

Hbuilder開發App實戰1-識歲：http://uikoo9.com/book/detail/5

更多學習筆記：http://uikoo9.com/book