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

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

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

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

这个布局很快,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 条评论
登录 后参与评论

相关文章

来自专栏H2Cloud

RedRabbit——基于BrokerPattern服务器框架

RedRabbit 经典网游服务器架构 ? 该图省略了专门用途的dbserver、guildserver等用于专门功能的server,该架构的优点有: l Lo...

2876
来自专栏码洞

深入理解 RPC 交互流程

文节我们讲解 RPC 的消息交互流程,目的是搞清楚一个简单的 RPC 方法调用背后究竟发生了怎样复杂曲折的故事,以看透 RPC 的本质。

402
来自专栏静默虚空的博客

细说Java主流日志工具库

概述 在项目开发中,为了跟踪代码的运行情况,常常要使用日志来记录信息。 在Java世界,有很多的日志工具库来实现日志功能,避免了我们重复造轮子。 我们先来逐一了...

2548
来自专栏熊二哥

快速入门系列--MVC--01概述

虽然使用MVC已经不少年,相关技术的学习进行了多次,但是很多技术思路的理解其实都不够深入。其实就在MVC框架中有很多设计模式和设计思路的体现,例如Depende...

1756
来自专栏沈唁志

PHP新手必须认识的一些建议

1182
来自专栏我的小碗汤

6个最好的Go语言Web框架

原文:Top 6 web frameworks for Go as of 2017

551
来自专栏魏艾斯博客www.vpsss.net

搬瓦工升级降级套餐的方法及升降级后数据 IP 是否保留

1433
来自专栏后端技术探索

nginx 502错误原因和解决办法总结

一、NGINX 502错误排查 NGINX 502 Bad Gateway错误是FastCGI有问题,造成NGINX 502错误的可能性比较多。将网上找到的一些...

612
来自专栏Golang语言社区

Go 的浏览器集成测试

最近从 Ruby 转到 Go. 新项目 QOR 需要浏览器集成测试,一番搜索后发现了 agouti, 试用一下发现基本算是 Go 版本的 Capybara,正好...

4136
来自专栏java 成神之路

Spring mvc 启动配置文件加载两遍问题

3666

扫描关注云+社区