首页 > 移动平台 > 详细

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

时间:2015-08-17 23:46:41      阅读:622      评论:0      收藏:0      [点我收藏+]

技术分享

前言

之前写了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

版权声明:本文为博主原创文章,未经博主允许不得转载。

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

原文:http://blog.csdn.net/uikoo9/article/details/47733079

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!