专栏名称: OSC开源社区
OSChina 开源中国 官方微信账号
目录
相关文章推荐
程序猿  ·  大厂新年第一裁，微软全部门危！内部员工：客户 ... ·  6 天前  
程序猿  ·  冲上热搜！三天“崩”两次！官方紧急回应→ ·  1 周前  
程序员小灰  ·  我的项目，彻底爆了！ ·  1 周前  
程序员小灰  ·  这场七分钟的线上离婚庭审，让我彻底破防了 ·  6 天前  
OSC开源社区  ·  KaiwuDB ... ·  6 天前  
51好读  ›  专栏  ›  OSC开源社区

第六弹！微信小程序拍照收纳开发及删除名片等

OSC开源社区  · 公众号  · 程序员  · 2016-10-01 08:59

正文

#长按上图识别二维码，参与OSC源创会年终盛典#


完结篇来了

大家好！博卡君原计划是能在国庆假期前把小程序的开发教程做完，给大家一套完整、系统的东西，不过由于最近小程序开发工具的拍照组件尚未完善，很多功能还不能顺利实现。我考虑了一下，觉得不如把拍照部分的一些代码展示出来，一来是给大家一个思路，二来也让大家看看目前开发工具存在的一些问题，咱们一起研究研究。

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


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

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



这个布局很快，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 产生反感？哈哈！）



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


END


推荐阅读

点击标题直接进入阅读

《第五弹！微信小程序分组开发与左滑功能实现》

如何实现一些前端的功能和效果：微信小程序分组开发与左滑功能实现。

《31 款轻量高效的开源 JavaScript 插件和库》

文章介绍了大量轻量级的开源avascript插件和库，总有一款适合你。使用它可以将你的网站变得更加友好。

《参与成都、重庆源创会，听大咖分享时下最新技术干货!》

开源中国源创会就将来到成都、重庆，与各位OSCer来一个约会，更为大家奉上精彩的主题演讲，各位还不来赴约吗？

点击“阅读原文”查看更多精彩内容

推荐文章
程序猿  ·  大厂新年第一裁，微软全部门危！内部员工：客户宁愿跳槽也不想与我们 IT 部门打交道
6 天前
程序猿  ·  冲上热搜！三天“崩”两次！官方紧急回应→
1 周前
程序员小灰  ·  我的项目，彻底爆了！
1 周前
程序员小灰  ·  这场七分钟的线上离婚庭审，让我彻底破防了
6 天前
OSC开源社区  ·  KaiwuDB 2024：发布2.0版本、benchANT时序榜排名第一
6 天前
人民日报  ·  【提醒】这个牌子的湿巾快别给孩子用了！一万多包正在召回
8 年前
总裁俱乐部  ·  人贵知恩，贵在感恩！（好文）
8 年前
中国历史解密  ·  特种兵退役后会做啥？大国的腹黑你不懂
7 年前
硬哥说  ·  颜值不是一切 路由器还是要回归正常使用属性
7 年前
行业研究报告  ·  300年后的人类，看完直接目瞪口呆！
7 年前
Sov5搜索   ·   小百科   ·   移动版
51好读 - 好文章就要读起来!