第六弹！全球首个微信小程序（应用号）开发教程！通宵吐血赶稿！

你们好！博卡君原计划是能在国庆假期前把小程序的开发教程作完，给你们一套完整、系统的东西，不过因为最近小程序开发工具的拍照组件还没有完善，不少功能还不能顺利实现。我考虑了一下，以为不如把拍照部分的一些代码展现出来，一来是给你们一个思路，二来也让你们看看目前开发工具存在的一些问题，我们一块儿研究研究。

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

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

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

这个布局很快，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。没想到很快收到了官方回复，确认了这点。但愿尽快获得更新版，一块儿期待吧😄

最后，仍是欢迎程序猿朋友们在我们的 QQ 群多交流，不少涉及具体状况的技术问题，我们就在群里聊聊吧！

微信小程序 QQ 交流群：

• 383863133

博卡君微信小程序开发教程回顾

• 博卡君全球首个微信小程序开发教程第一弹
• 博卡君全球首个微信小程序开发教程第二弹
• 博卡君全球首个微信小程序开发教程第三弹
• 博卡君全球首个微信小程序开发教程第四弹
• 博卡君全球首个微信小程序开发教程第五弹eng