微信小程序开发教程第九章:微信小程序拍照收纳开发以及删除名片等

第九章:微信小程序拍照收纳开发以及删除名片等

还是先来看看我们今天的主题——拍照收纳。

拍照收纳分为:上传图片/识别名片、手动填写名片信息两个路径,这里只说下拍照识别,手动填写和前面的编辑名片是同样的页面,大家可以翻翻之前的教程。

这个布局很快,wxml 没多少内容。

拍照收纳的原理是收纳名片功能,步骤是打开微信的拍照 API,同时支持选择本地图片 wx.chooseImage 接口。

取到图片路径需上传图片文件到后台服务器,这里参照文档打印三个回调。

但是我发现在开发者工具测试的时候,没有任何打印信息,后台同样也没有接到我上传过去的图片。

选择一张图片,点击打开后。控制台的 console 没有成功或者失败的回调。

由于尚处内测版本,暂时还不确定是开发者工具上的 bug 还是 API 接口问题,总之这里影响了小程序开发,我已经写邮件给微信做了反馈。

如果图片上传成功,后台取到图片会去调一个识别信息操作,最后把识别到的信息传给我们前台进行渲染,最后把信息保存到名片夹里面,收纳名片流程才算走通。

再补充下名片夹页面的名片删除吧:

每个名片夹后面都带个删除功能,这个功能是通过左滑出现。

点击删除,出现是否确定删除弹框(使用自带的模态框组件)。

确定与取消事件。

由于这里名片分为,线上收纳与线下收纳。故而多了个 if 判断,走的删除 request 不是一个接口,其他都相差不多。这里最重要的是要获取到 cardId,才能知道被删除的是哪张名片。

名片的父元素绑定的全部事件,以及需要用到的一些自定义参数。Id 用在左滑上data-card_id 用在页面跳转与删除上,data-card_type 用在判断线上与线下名片。

cardId 可以在 bindtouchstart 上取到,因为左滑事件是发生 bindtouchstart 事件上。

当然后面需要用到的值还是先定义个 var 存起来。

删除完之后还需重新刷新下首页。

并且提升下用户体验,告诉用户名片删除成功。

最后一提,当列表很多时,我们需要确定点击到的是那个信息。

上面的信息都是 block 循环出来的,bindtap 点击事件,然后就是 id=”{{pms.type}}”,重点就是这个 id 来判断被点击的对象。

操作数据,我们一定要先熟悉好数据的结构,故而在开发前和后台一定要约定好数据结构,熟悉数据结构后,其实开发起来就如庖丁解牛,非常快速(大家开发了小程序后,有没有对 zepoto 与 jQuery 产生反感?哈哈!)

好了,关于拍照组件的相关内容就写到这里吧!这一章内容就算是博卡君教程的完结篇了。虽然写的内容中包含小程序开发工具的问题,不过我还是推荐大家都尝试调用一下拍照相关功能,看看这些问题在你的机器上会不会出现。按照微信的官方文档,我尝试给 weixin_developer@qq.com 那个邮箱发了邮件报告 bug。没想到很快收到了官方回复,确认了这点。希望尽快得到更新版,一起期待吧?

原文https://my.oschina.net/wwnick/blog/753597

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏量子位

刷paper利器!不想打开PDF,这个插件自动帮你转到介绍页

你们刷paper的时候,是愿意直接打开PDF,还是想先打开介绍页看看摘要呢? 量子位更喜欢介绍页,一是因为这个页面经常包含更多有用的信息,比如开源代码地址、投了...

2634
来自专栏CDA数据分析师

教你一招 | 用Python写一个简单的微博爬虫

我是个微博重度用户,工作学习之余喜欢刷刷timeline看看有什么新鲜事发生,也因此认识了不少高质量的原创大V,有分享技术资料的,比如好东西传送门;有时不时给你...

17410
来自专栏木头编程 - moTzxx

ThinkPHP5 整合微信扫码支付

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011415782/article/de...

1623
来自专栏青枫的专栏

消除windows下的PyCharm中满屏的波浪线

1、PyCharm使用了较为 严格的PEP8 的检查规则,如果代码命名不规范,甚至多出的空格都会被 波浪线 标识出来,导致整个编辑器里 铺满了波浪线,右边的滚动...

721
来自专栏前端侠2.0

css3的transform造成z-index无效, 附我的牛逼解法

我想锁表头及锁定列。昨天新找的方法是用css3的transform,这个应该在IE9以上都可以的。

983
来自专栏FreeBuf

利用Wireshark任意获取QQ好友IP实施精准定位

虽然网上已经有了很多获取IP的qq插件,但是其原理大致都是相同的,但是插件的安全性而言就不敢恭维了,下面介绍如何利用wireshark获取好友ip。 一、打开w...

5693
来自专栏Youngxj

emlog新浪图床上传插件

1373
来自专栏程序员的SOD蜜

电脑静音工作,又听不到12306的来票音乐,纠结啊 !但春节前工作多任务重,不能安心工作,就动手做个“无声购票弹窗”工具吧!

当你在办公室里面工作,周围有老板、领导,但又着急买春节的火车票怎么办? 开着电脑声音,出票火车鸣笛声没听到,QQ聊天工具等不和谐的声音放出来了怎么办? 为了不让...

2666
来自专栏用户2442861的专栏

必不可少的Firefox插件

Adblock Plus 去广告,包括youku的开头广告 All-in-One Sidebar 最大的好处就是省去书签栏 NoSquint :用firefo...

381
来自专栏黄Java的地盘

提高代码质量——使用Jest和Sinon给已有的代码添加单元测试

在日常的功能开发中,我们的代码测试都依赖于自己或者QA进行测试。这些操作不仅费时费力,而且还依赖开发者自身的驱动。在开发一些第三方依赖的库时,我们也没有办法给第...

430

扫码关注云+社区