请选择 进入手机版 | 继续访问电脑版

网络科技

    今日:402| 主题:266952
收藏本版 (1)
互联网、科技极客的综合动态。

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

[复制链接]
依旧爱你 发表于 2016-9-30 09:10:21
285 7

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

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

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

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

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

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

  这个布局很快,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。没想到很快收到了官方回复,确认了这点。希望尽快得到更新版,一起期待吧?
   更多商业新知,关注钛媒体微信号:钛媒体(ID:taimeiti)

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

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

  钛媒体微信二维码



上一篇: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
爱情的投入和产出从来不成比例,一厢情愿的牺牲到头来感动的往往是自己!
回复 支持 反对

使用道具 举报

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )

© 2001-2017 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表