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

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

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

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

今天继续更新,忙了一天,终于有时间开工写教程。不罗嗦了,今天我们来看看如何实现一些前端的功能和效果。

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

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


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




相关内容

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

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

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

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

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

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

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

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

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

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




第八章:微信小程序分组开发与左滑功能实现

先来看看今天的整体思路:

进入分组管理页面-->点击新建分组新建

进入到未分组页面基本操作

进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。

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

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


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

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


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

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


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

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


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

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


理清完基本流程我们开始开发。首先整个布局可以先看下,我再一步步讲。

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

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


静态布号局后,我们开始实现新增分组效果,

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

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


当然触发它出现的是

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

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


显示窗口

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

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


点击取消消失

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

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


当里面的输入框内容发生改变时 bindinput 事件,大家别使用 bindchange 事件,这里的 bindchange 事件只有当失去焦点时才会被触发。

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

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


当输入框事件发生时,确定按钮会变成可以点击状态,为空时,addTeam

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

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


样式数据绑定。

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

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


里面有表单就使用了 from。

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

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


创建分组请求交互。

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

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


创建分组完成,这里可能很多疑问,为什么不使用微信提供的模态框组件来实现,而是自己实现,其实我也很懒,非常想使用自带的模态框组件,但是发现在模态框里面提交表单好像有点麻烦,直接自定义了。

接下来创建好的分组支持左滑删除与重命名,今天重点谈下左滑删除的实现方式。

首先需要左滑的是被创建好的分组,未分组是写死的,故而不支持的。

左滑删除使用了两个事件 bindtouchstart 与 bindtouchmove,这里必须绑定它的 id,这个 id 都是不同的,我这使用的用户创建完成后在后台生成的一个 id 号,之后我再 block 出来使用在这里,这个 id 都是唯一的,不能是相同的 id。

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

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


样式布局,父元素是绝对定位,子元素删除是相对定位,鉴于动画效果,我这加了 css3 的动画效果,使滑动带点动画效果。

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

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


现在我们来看事件构成:

Bindtap 点击之后直接是跳转页面。

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

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


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

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


左滑从触摸事件开始,当然需使用的参数在外面最好先定义一下:

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

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


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

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


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

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


bindtouchStart 发生后,会执行 bindtouchmove 事件,在这里我们可以判断是否左右滑动:

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

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


  • Var dataId = e.currentTarget.id //获取到前面唯一的id; If(key){ //用户左滑距离很长时会发生多次左滑事件,这里定义一个开关发生第一次之后就关闭它;
  • Touch是获取触摸点的一些数据,touches 是一个触摸点的数组,每个触摸点包括以下属性:
  • pageX,pageY:距离文档左上角的距离,文档的左上角为原点 ,横向为 X 轴,纵向为 Y 轴;
  • clientX,clientY:距离页面可显示区域(屏幕除去导航条)左上角距离,横向为X轴,纵向为Y轴;
  • screenX,screenY:距离屏幕左上角的距离,屏幕左上角为原点,横向为X轴,纵向为Y轴;


这里使用 clientX,clientY 即可。 我们在 bindtouchstart 时记录到开始的点,在 bindtouchmove 记录到触摸结束的点,如果 X 轴滑动大于 Y 轴的,再如果结束点-开始点小于一个数值(这个数组可以自己设置,鉴于灵敏度,我这设置的很小),右滑也是同理。

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

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


判断到左滑与右滑事件后,我们就需要对当前组件绑定数据了,数据从那里来?可以看下我这数组一个来历,以及怎么被左滑事件里面获取到(我这数据是一个数组,需要在 wxml 里面 block 的)。

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

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


这时候取到需要的数组,循环出来后,我进行对比,如果数据的 id== 当前被事件操作的 id,那么我给改数组再添加一个 right 向右偏移 15%,否则其他都不偏移,右滑同理,直接全部设置为 0。

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

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


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

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


最后把数据到绑定到页面上来。

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

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


OK,左滑效果实现。

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

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


如果出现全部被滚动了,记得在外层加上,X 轴关闭即可。

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

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


这时候你点击左滑会出现点透效果,官方文档提供给我们一个 catch,不冒泡点击事件,即可完美解决。

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

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


点击删除事件弹出模态框供用户确定是否删除。

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

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


这里你点击取消时还要记得把左滑删除按钮去掉可能用户体验会好点。

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

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


一定记得在 data({ modalHidden: true }) 不然会出现一加载页面即出现了模态框。

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

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


点击未分组按钮进入到未分组名片列表页面。

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

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


这个布局完全是 copy 首页过来的,后面只是数据接口有变而已,大家有兴趣可以回过去看下前面的。

点击多选,会出现多选框和下面的一些操作按钮。都是些数据绑定,显示与隐藏类的实现比较简单。

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

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


多选我们直接给 checked 设置 Boole 开关。

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

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


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

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


选择好名片后点击设置分组会弹出新建好的分组列表供用户确定设置到那个分组里面(这里由于后台接口方面还在完善,不继续往下写了)。

用户已建分组点击进去的是点击顶部菜单按钮出现下拉菜单栏,这里直接使用微信提供的组件。

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

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


最后点击从名片夹中添加进入到以下页面:

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

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


整个布局基本还是和首页面差不多,这里不再多讲,

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

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


顶部菜单直接多选绑定数据即可。

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

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


牵扯到表单类的基本全都是 from 表单提交事件。 除小部分接口方面欠缺外,写到这里其实分组前端方面效果基本实现。


好了,由于目前小程序开发工具图片上传还有点问题,拍照收纳无法实现,所以博卡君的微信小程序开发教程也先暂告一段落,等开发工具更新稳定后,我还会再追加教程的内容,有机会的话把成品也给大家看看。下一弹:第六弹!全球首个微信小程序(应用号)开发教程!通宵吐血赶稿,每日更新!

感谢朋友们一直以来的支持和关心,大家可以拿这个教程作为参考,摸索出自己的小程序开发套路。我最近还会在论坛、微信公众号里收集一下大家的留言和问题,统一给大家一些回复。大家多多在咱们的 QQ 群内交流吧,群里每天都会有很多朋友交换代码、答疑解惑,对大家的开发和学习很有帮助。




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

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


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



相关内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

评分

参与人数 1金钱 +10 收起 理由
Anewczs + 10 推送上首页了~分享到朋友圈微博QQ空间吧~.

查看全部评分

本帖被以下淘专辑推荐:

游戏人生 发表于 2016-10-22 00:30:33 | 显示全部楼层
明显后面几篇的阅读量不如第一篇啊
3rdev 发表于 2016-10-24 11:00:00 | 显示全部楼层
游戏人生 发表于 2016-10-22 00:30
明显后面几篇的阅读量不如第一篇啊

大家还是没那么自觉的
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

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

分享扩散

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

合作伙伴

Swift小苹果

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