网络科技

    今日:389| 主题:278980
收藏本版
互联网、科技极客的综合动态。

[科技] 玩转微信应用号,「小程序」开发实操指南第六弹

[复制链接]
依旧爱你 投递于 2016-9-30 09:10:21
298 7

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-1-网络科技-服务器,第三方,开发者,控制台,图片

   钛媒体注:钛媒体作者博卡君对于“应用号的最终形态”与“怎样将一个「服务号」改造成为「小程序」”的话题上,有着自己的独特的理解。他想要用第三方工具的实例,来演示开发过程。今天,他为我们带来《微信小程序分组开发与左滑功能实现》的内容。感兴趣的朋友,也不要错过此前钛媒体发布的第一弹、 第二弹 和 第三弹 、 第四弹 、第五弹中的精彩内容。第九章:微信小程序拍照收纳开发以及删除名片等
  还是先来看看我们今天的主题——拍照收纳。
  拍照收纳分为:上传图片/识别名片、手动填写名片信息两个路径,这里只说下拍照识别,手动填写和前面的编辑名片是同样的页面,大家可以翻翻之前的教程。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-2-网络科技-服务器,第三方,开发者,控制台,图片

  这个布局很快,wxml 没多少内容。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-3-网络科技-服务器,第三方,开发者,控制台,图片

  拍照收纳的原理是收纳名片功能,步骤是打开微信的拍照 API,同时支持选择本地图片 wx.chooseImage 接口。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-4-网络科技-服务器,第三方,开发者,控制台,图片

  取到图片路径需上传图片文件到后台服务器,这里参照文档打印三个回调。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-5-网络科技-服务器,第三方,开发者,控制台,图片

  但是我发现在开发者工具测试的时候,没有任何打印信息,后台同样也没有接到我上传过去的图片。

   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-6-网络科技-服务器,第三方,开发者,控制台,图片

  选择一张图片,点击打开后。控制台的 console 没有成功或者失败的回调。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-7-网络科技-服务器,第三方,开发者,控制台,图片

  由于尚处内测版本,暂时还不确定是开发者工具上的 bug 还是 API 接口问题,总之这里影响了小程序开发,我已经写邮件给微信做了反馈。
  如果图片上传成功,后台取到图片会去调一个识别信息操作,最后把识别到的信息传给我们前台进行渲染,最后把信息保存到名片夹里面,收纳名片流程才算走通。
  再补充下名片夹页面的名片删除吧:
  每个名片夹后面都带个删除功能,这个功能是通过左滑出现。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-8-网络科技-服务器,第三方,开发者,控制台,图片

  点击删除,出现是否确定删除弹框(使用自带的模态框组件)。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-9-网络科技-服务器,第三方,开发者,控制台,图片

  确定与取消事件。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-10-网络科技-服务器,第三方,开发者,控制台,图片

  由于这里名片分为,线上收纳与线下收纳。故而多了个 if 判断,走的删除 request 不是一个接口,其他都相差不多。这里最重要的是要获取到 cardId,才能知道被删除的是哪张名片。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-11-网络科技-服务器,第三方,开发者,控制台,图片

  名片的父元素绑定的全部事件,以及需要用到的一些自定义参数。Id 用在左滑上 data-card_id 用在页面跳转与删除上,data-card_type 用在判断线上与线下名片。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-12-网络科技-服务器,第三方,开发者,控制台,图片

  cardId 可以在 bindtouchstart 上取到,因为左滑事件是发生 bindtouchstart 事件上。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-13-网络科技-服务器,第三方,开发者,控制台,图片

  当然后面需要用到的值还是先定义个 var 存起来。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-14-网络科技-服务器,第三方,开发者,控制台,图片

  删除完之后还需重新刷新下首页。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-15-网络科技-服务器,第三方,开发者,控制台,图片

  并且提升下用户体验,告诉用户名片删除成功。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-16-网络科技-服务器,第三方,开发者,控制台,图片

   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-17-网络科技-服务器,第三方,开发者,控制台,图片

   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-18-网络科技-服务器,第三方,开发者,控制台,图片

  最后一提,当列表很多时,我们需要确定点击到的是那个信息。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-19-网络科技-服务器,第三方,开发者,控制台,图片

  上面的信息都是 block 循环出来的,bindtap 点击事件,然后就是 id=”{{pms.type}}”,重点就是这个 id 来判断被点击的对象。
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-20-网络科技-服务器,第三方,开发者,控制台,图片

  操作数据,我们一定要先熟悉好数据的结构,故而在开发前和后台一定要约定好数据结构,熟悉数据结构后,其实开发起来就如庖丁解牛,非常快速(大家开发了小程序后,有没有对 zepoto 与 jQuery 产生反感?哈哈!)
   

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-21-网络科技-服务器,第三方,开发者,控制台,图片

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

玩转微信应用号,「小程序」开发实操指南第六弹

玩转微信应用号,「小程序」开发实操指南第六弹-22-网络科技-服务器,第三方,开发者,控制台,图片

  钛媒体微信二维码



上一篇:Coming to America: LeEco to formally launch US presence in October
下一篇:电信诈骗、网店刷钻,那些被高价收购的废弃银行卡都去这儿了 ...
何禹娟 投递于 2016-9-30 10:19:56
有图,有真相!
回复 支持 反对

使用道具 举报

电商花木 投递于 2016-9-30 10:20:00
一觉醒来,天都黑了。
回复 支持 反对

使用道具 举报

屋檐刘 投递于 2016-9-30 10:21:03
一个人快活,两个人生活,三个人就是你死我活。
回复 支持 反对

使用道具 举报

hdg3707 投递于 2016-9-30 10:25:03
不要和地球人一般见识.
回复 支持 反对

使用道具 举报

tianyahj 投递于 2016-10-2 08:26:33
占坑编辑ing
回复 支持 反对

使用道具 举报

Carrolljed 投递于 2016-10-5 01:47:23
帮顶个帖,攒人品,说不定我就会升职加薪、当上总经理、出任CEO、迎娶白富美、走上人生巅峰,嘿嘿,想想还有点小激动。
回复 支持 反对

使用道具 举报

向露 投递于 2016-10-16 12:20:11
爱情的投入和产出从来不成比例,一厢情愿的牺牲到头来感动的往往是自己!
回复 支持 反对

使用道具 举报

我要投稿

推荐阅读


回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 | 粤公网安备 44010402000842号 )

© 2001-2017 Comsenz Inc.

返回顶部 返回列表