跨界拍照app初步



用Meteor技术实现跨平台拍照APP


第一步来看html文件。


0.png


先修改了title标题。这些其它的可能都能看懂,但是这个会比较迷惑。这个大括号是什么意思。


1.png


其实就是一个标记,它的意思就是来加载一个叫hello的一个模板。


2.png


实际上在运行的时候,这个template会被插入到这个hello的位置上。然后我们把这个按钮的值改为“茄子”。


3.png


后面的我们不需要,就直接删除了。


4.png


但是我们下面要留一个位置,用于装照片在这。


5.png


这样html就修改完毕了,我们保存一下。
查看模拟器,就会发现,模拟器的内容也随之改动了。


6.png


我们下面就要修改点击这个按钮之后,需要干什么。这个实在JavaScript文件里面。


7.png


刚才我提到了,因为我自己比较喜欢用coffeescript,我也希望大家能喜欢使用coffeescript,所以我这里要把js改成coffeescript。
这里删除不需要的一部分代码。


8.png


然后这里的count,计数器也是用不着的。


9.png


然后我把它修改成coffeescript代码,coffeescript的特点就是要简单很多。


90.png


使用代码的量要远远小于JavaScript写的代码。比如说,同样的功能,我使用coffeescript把它重写一下,看看是什么样子的。


91.png


当然,还得修改文件名,不能再叫js了,这样会编译不通过的,我们必须把它改名为coffee。


92.png


这就可以了。
这就是我们改写成coffee的代码,这样不需要那么多的括号,function也不需要了,用这个箭头代替了。


93.png


关于coffeescript,如果大家有时间呢!我建议来看看这个网站,可以很快的学一下。


94.png


这个是很好的一个coffeescript的入门网站。左边是原来的coffeescript,右边是编译以后的JavaScript。


95.png


你看这个代码的量,coffeescript的一句话,JavaScript可以写上10+行。


96.png


而且,不光是为了减少代码量,更重要的是能降低你出错的可能性。coffeescript先不多讲?;故窍人礳lick button需要干什么。我们的click button实际上就要大家照相。我们按一下按钮,应该跳起来一个照相的功能。那么这个照相的功能,我们就使用我们刚装的那个plugin。它的功能我们把它拿过来放这儿来。


97.png


这个MeteorCamera就是刚才那个class,这个照相机的这个plugin。然后我们getPicture,参数没有,然后我们的回调函数是error和result。
如果是error,我们显示它错误;如果没有error的话,我们就把它写到一个数据库里面。


98.png


因为我们最后是需要和别人分享,所以我们是需要有一个共同的数据库的。这个数据库叫myColl,这个数据库我们还没有定义,待会儿再定义。这个功能是我们告诉你照了几张照片的。


99.png


如果你照了一张,我就允许你删一张;如果你没照,我就不允许你删。我们现在先把它去掉。


990.png


这个是一个额外的功能,我们先不需要它。把它尽量的简单化。
也就是说,我们现在来看这段代码。


991.png


我们照了相,这段代码运行的好,能够成功,能够得到照片,就是这个r,r是我们照相的这个picture被64 的方式变成了一个string,变成一个字符串了。得到了以后,如果没有错误,我们就把它写进这个myColl,就是数据库里边,增加一条记录。记录有两个字段,这个第一个字段叫time,是我们什么时候拍的这个照片;然后另外一个就是pic,这个字段,它的内容就是这个r。
好了,现在我们建立一个myColl的新文件,不然一会儿编译通过不了了。这个就取名为collection.coffee。


992.png


在这里面,就一行文字。


993.png


意思就是我建立了一个全局的@,@myColl的意思就是this.,本地指针。这个地方相当于是一个全局指针。全局的里边的一个myCollection。myCollection等于建立了一个新的Mongo.Collection 叫做pictures。
然后,我们来执行这个程序试一下?;氐轿颐堑某绦蚶锩?,试之前打开我们的调试器。


994.png


好处就是说,如果出了错,我们肯定能够看得见?;蛘咚媸笨梢越氲魇?。
我们点击一下茄子,这个浏览器马上就告诉我们,这个程序需要获得camera的权限了。


995.png


如果我们允许这个权限。


996.png


我们现在来允许它使用照相机。


997.png


然后,你们就可以通过电脑的摄像头看见我了。然后我们点击这个take photo就可以照相了。


998.png


然后呢!我们这个程序就执行完毕了,执行完毕以后,我们回来看代码。代码里面说,如果照相完毕的话,就把它添加到数据库中。


999.png



【本文由麦子学院独家原创,转载请注明出处并保留原文链接】

logo
? 2012-2016 葡京国际首页 www.ybxiongdi.com
蜀ICP备13014270号-4 Version 5.0.0 release20160127

秋招大聚惠,豪华礼包你领了吗?

客服热线 400-862-8862

回到顶部