第六弹!全球首个微信小程序(应用号)开发教程!通宵...

分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友 微信微信
查看查看168 回复回复2 收藏收藏 分享淘帖 转播转播 分享分享 微信
查看: 168|回复: 2
收起左侧

第六弹!全球首个微信小程序(应用号)开发教程!通宵...

[复制链接]
瑶池 发表于 2016-10-20 23:59:08 | 显示全部楼层 |阅读模式
快来登录
获取最新的苹果动态资讯
收藏热门的iOS等技术干货
拷贝下载Swift Demo源代码
本帖最后由 瑶池 于 2016-10-21 06:37 编辑

完结篇来了!

大家好!原计划是能在国庆假期前把小程序的开发教程做完,给大家一套完整、系统的东西,不过由于最近小程序开发工具的拍照组件尚未完善,很多功能还不能顺利实现。我考虑了一下,觉得不如把拍照部分的一些代码展示出来,一来是给大家一个思路,二来也让大家看看目前开发工具存在的一些问题,咱们一起研究研究。

觉得有价值的话就转发吧,不辜负我整理的累……

欢迎大家加入 微信应用号QQ群 群号:321518204


同时,欢迎订阅我在敏捷大拇指Swifthumb.com)上的淘帖专辑《微信应用号小程序H5




相关内容

微信:这次我们邀请你来做一个“小程序”,就是应用号了

微信正式推出应用号“小程序”,你关心的问题都在这里

微信小程序设计规范抢先看!

第一弹!全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!

第二弹!手把手教你开发微信应用号第二弹

第三弹!手把手教你开发微信应用号第三弹

第四弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

第五弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

番外篇!全球首个微信应用号开发教程!小程序DEMO视频奉上




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

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

拍照收纳分为:上传图片/识别名片、手动填写名片信息两个路径,这里只说下拍照识别,手动填写和前面的编辑名片是同样的页面,大家可以翻翻之前的教程。

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 1

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 1


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 2

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 2


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 3

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 3


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 4

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 4


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 5

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 5


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 6

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 6


由于尚处内测版本,暂时还不确定是开发者工具上的 bug 还是 API 接口问题,总之这里影响了小程序开发,我已经写邮件给微信做了反馈。

如果图片上传成功,后台取到图片会去调一个识别信息操作,最后把识别到的信息传给我们前台进行渲染,最后把信息保存到名片夹里面,收纳名片流程才算走通。

再补充下名片夹页面的名片删除吧:

每个名片夹后面都带个删除功能,这个功能是通过左滑出现。

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 7

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 7


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 8

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 8


确定与取消事件。

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 9

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 9


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 10

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 10


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 11

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 11


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 12

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 12


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 13

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 13


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 14

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 14


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 15

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 15


第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 16

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 16


第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 17

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 17


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 18

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 18


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 19

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 19


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

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 20

第六弹!全球首个微信小程序(应用号)开发教程!通宵... - 敏捷大拇指 - 第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿! 20


好了,关于拍照组件的相关内容就写到这里吧!这一章内容就算是博卡君教程的完结篇了。

虽然写的内容中包含小程序开发工具的问题,不过我还是推荐大家都尝试调用一下拍照相关功能,看看这些问题在你的机器上会不会出现。按照微信的官方文档,我尝试给 weixin_developer@qq.com 那个邮箱发了邮件报告 bug。没想到很快收到了官方回复,确认了这点。希望尽快得到更新版,一起期待吧。

奉上Demo:番外篇!全球首个微信应用号开发教程!小程序DEMO视频奉上

最后,还是欢迎程序猿朋友们在咱们的 QQ 群多交流,很多涉及具体情况的技术问题,咱们就在群里聊聊吧!



觉得有价值的话就转发吧,不辜负小女子我整理的累……

欢迎大家加入 微信应用号QQ群 群号:321518204


同时,欢迎订阅我在敏捷大拇指Swifthumb.com)上的淘帖专辑《微信应用号小程序H5




相关内容

微信:这次我们邀请你来做一个“小程序”,就是应用号了

微信正式推出应用号“小程序”,你关心的问题都在这里

微信小程序设计规范抢先看!

第一弹!全球首个微信应用号开发教程!通宵吐血赶稿,每日更新!

第二弹!手把手教你开发微信应用号第二弹

第三弹!手把手教你开发微信应用号第三弹

第四弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

第五弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

番外篇!全球首个微信应用号开发教程!小程序DEMO视频奉上

都看到这里了,就把这篇资料推荐给您的好朋友吧,让他们也感受一下。

回帖是一种美德,也是对楼主发帖的尊重和支持。

*声明:敏捷大拇指是全球最大的Swift开发者社区、苹果粉丝家园、智能移动门户,所载内容仅限于传递更多最新信息,并不意味赞同其观点或证实其描述;内容仅供参考,并非绝对正确的建议。本站不对上述信息的真实性、合法性、完整性做出保证;转载请注明来源并加上本站链接,敏捷大拇指将保留所有法律权益。如有疑问或建议,邮件至marketing@swifthumb.com

*联系:微信公众平台:“swifthumb” / 腾讯微博:@swifthumb / 新浪微博:@swifthumb / 官方QQ一群:343549891(满) / 官方QQ二群:245285613 ,需要报上用户名才会被同意进群,请先注册敏捷大拇指

嗯,不错!期待更多好内容,支持一把:
支持敏捷大拇指,用支付宝支付10.24元 支持敏捷大拇指,用微信支付10.24元

评分

参与人数 1金钱 +10 贡献 +10 专家分 +10 收起 理由
Anewczs + 10 + 10 + 10 32个赞!专家给力!

查看全部评分

本帖被以下淘专辑推荐:

女汉子 发表于 2016-10-21 00:11:55 | 显示全部楼层
妹妹你这几篇都要调整好格式和图片啊,不能偷懒
3rdev 发表于 2016-10-24 11:00:30 | 显示全部楼层
女汉子 发表于 2016-10-21 00:11
妹妹你这几篇都要调整好格式和图片啊,不能偷懒

妹子已经调整好了
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

做任务,领红包。
我要发帖

分享扩散

都看到这里了,就把这资料推荐给您的好朋友吧,让他们也感受一下。
您的每一位朋友访问此永久链接后,您都将获得相应的金钱积分奖励
热门推荐

合作伙伴

Swift小苹果

  • 北京治世天下科技有限公司
  • ©2014-2016 敏捷大拇指
  • 京ICP备14029482号
  • Powered by Discuz! X3.1 Licensed
  • swifthumb Wechat Code
  •   
快速回复 返回顶部 返回列表