搜索
原计划是能把小程序的开发教程做完，给大家一套完整、系统的东西，不过由于最近小程序开发工具的拍照组件尚未完善，很多功能还不能顺利实现。我考虑了一下，觉得不如把拍照部分的一些代码展示出来，一来是给大家一个思路，二来也让大家看看目前开发工具存在的一些问题，咱们一起研究研究。第九章：微信小程序拍照收纳开发以及删除名片等还是先来看看我们今天的主题——拍照收纳。拍照收纳分为：上传图片／识别名片、手动填写名片信息两个路径，这里只说下拍照识别，手动填写和前面的编辑名片是同样的页面，大家可以翻翻之前的教程。这个布局很快，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产生反感？哈哈！）好了，关于拍照组件的相关内容就写到这里吧！虽然写的内容中包含小程序开发工具的问题，不过我还是推荐大家都尝试调用一下拍照相关功能，看看这些问题在你的机器上会不会出现。按照微信的官方文档，我尝试给那个邮箱发了邮件报告bug。没想到很快收到了官方回复，确认了这点。希望尽快得到更新版，很多学编程的朋友最关心的问题就是小程序的开发难度。我个人觉得，微信小程序的开发难度不算高，最主要的是要时时刻刻遵守微信给我们划定的一些框架和规范。如果你有前端开发基础，那上手会非常快，相比之下，原生app开发难度就大了很多。在用户体验方面，其实微信小程序开发和原生app在体验方面在日常应用中可以做到非常接近了。不同点就是，微信小程序开发学习周期比较快，开发周期较短，维护起来也快，而原生app的开发需要全部重新学习它的语言，学习周期很长，开发周期也很长，同时发布需要很长时间的审核期，在迭代方面速度比较慢。对于做前端的朋友，适应小程序最需要完成一个开发理念上的大转变，从操作DOM转变为操作数据，项目组件化、模板化，需要使用的组件直接调用。换言之，小程序绝对不是「Html5+javascrpt封装一下」那么简单，为了让用户体验更加接近原生app，腾讯专门开放了大量接口和组件，这些都是html本身所不具备的。我在一开始接触到这些东西的时候，也琢磨了很久才渐渐适应小程序的节奏。有朋友也问过，连夜吐血赶工了近两周才基本完成一个小程序，是不是微信小程序的开发工作量比较大，我觉得这要具体看你的项目重不重，轻量型的项目团队开发只需要一两周，但也可能在开发中碰到很多需要攻克的技术难点。此外，如果你的需求一直在变化，或者与不熟练的队友在开发，都是有可能影响进度。毕竟是为了第一时间同时完成开发和教程的进度，如果团队协作，应该不需要这么辛苦。最后谈一点，在这个项目中一直是以个人开发者的角色来做的，我个人觉得，如果你有数据支持，而且懂后台开发和mysql，那完全不妨一试。咨询更多微信小程序学习班信息，请点击以下微信公号文章链接了解(或扫以下二维码详细了解)：=MjM5ODgwNjE2Mw==&mid=2247483668&idx=1&sn=91187cf49bef9d5b29adb4a9cb4c1cd9&chksm=a6c456e891b3dffe9cef42f514bfc3c57aedd9df48da38937871e0c1ec1769076b53bf6bdf19&mpshare=1&scene=1&srcid=1017Zawfhl4wUrDI3ebDCp01#rd可扫以下公众号二维码详细了解：