之前我们讲了微信小程序开发教程的前八章，现在我们将更新最终章：微信小程序照片存储开发及名片删除等（第十二章：微信小程序开发教程、第三十四章：微信小程序项目结构与配置&微信小程序首页开发、第五章：微信小程序名片文件夹详情页开发、第六章：「我的」页面开发、第七章：微信小程序名片编辑页开发、第八章：微信小程序群组开发及左滑功能实现。）

第九章：微信小程序开发，实现照片存储，名片删除等功能

我们先来看看我们今天的主题——照片存储。

照片采集分为上传图片/识别名片和手动填写名片信息两个路径，这里只说照片识别，手动填写和之前的名片编辑是同一个页面，可以看看之前的教程。

这个布局很快，并且 wxml 没有太多内容。

照片存储的原理就是名片存储功能，步骤是开放微信的照片API，支持选择本地图片wx.接口。

获取图片路径需要将图片文件上传到后端服务器，下面是文档中打印的三个回调。

但是我发现用开发者工具测试的时候，没有任何打印信息，并且后台也没有收到我上传的图片。

选择图像并单击打开后，控制台中没有成功或失败的回调。

由于还在测试版本，不确定是开发者工具的bug还是API接口的问题，总之影响小程序的开发，已经写邮件给微信反馈了。

如果图片上传成功的话，后台就会取回图片并且调用一个识别信息的操作，最后把识别出来的信息传递给我们的前端去渲染，最后把这些信息保存在名片文件夹中，名片存储过程就完成了。

我们在名片文件夹页面添加名片的删除功能：

每个名片文件夹都有删除功能，向左滑动即可出现。

点击删除，将会出现一个弹窗要求您确认删除（使用内置模态框组件）。

确认和取消事件。

由于这里的名片是分在线存储和离线存储的，所以多了一个if判断。删除不是一个单独的接口，其余的都类似。这里最主要的就是获取，这样才能知道删除的是哪张名片。

名片父元素绑定的所有事件，以及需要用到的一些自定义参数。id用于左滑，data-用于页面跳转和删除，data-用于判断名片在线与离线。

在顶部就可以获取到，因为左滑事件发生在顶部。

当然，后面要用到的值应该定义为var并存储起来。