Hbuilder开发app实战-识岁01-actionsheet实例

Posted 2020-09-20 jzdwajue

前言

之前写了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方法，详见：这里，

如上。事实上仅仅须要传入一个标题，和固定的取消button。还有你须要传入的button数组就可以。

有一个回调函数，通过推断e.index来确定点击了哪个button，

稍作封装：

// 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);
        });
    }
};

本例中。

标题设置为“选择照片”，须要两个button，一个是“拍照”，一个是“相冊”，

代码：

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

当e.index=1的时候，是点击了第一个button“拍照”。

当e.index=2的时候。点击了第二个button“相冊”。

当e.index=0的时候。点击了取消，不做处理，

当点击其它地方的时候。e.index=-1，相同不做处理。

很多其它教程：

Hbuilder开发App实战1-识岁：http://uikoo9.com/book/detail/5

很多其它学习笔记：http://uikoo9.com/book