E企盈营销工具技术服务商 热线:4006-838-530

微信小程序,易打卡

E企盈直播平台营销卖货系统

《易打卡》—— 精准定位,一键打卡,记录便捷导出,排名实时更新,戒掉迟到,换你高效人生!这款小程序是在微信内测开始时期就一边学习一边开发,开发过程中也是随着微信小程序的功能以及API迭代而不断更新调整产品的形态与功能。http://www.see-source.com/weixinwidget/detail.html?wid=170此次的开发总结,将会把我在整个开发过程中遇到的问题以及解决方法和开发技巧跟大家分享,希望能够帮助想要从事开发小程序的小伙伴。扫一扫右上方二维码(或搜索小程序:易打卡),即可体验小程序。最近一个月的数据分析如图:一、准备阶段1.1 微信小程序接入在微信公众平台官网首页(mp.weixin.qq.com)点击右上角的“立即注册”按钮。1.2 获取小程序AppID菜单 – 设置 – 开发设置1.3 绑定开发者通过用户身份管理可以绑定开发者,开发者总共可绑定20个,体验者可以绑定40个。tips:这比最初期10个开发者和20个体验者数量都有所提高。菜单 – 用户身份 – 开发者1.4 MINA 框架知识储备这里分享一下我的学习整理,帮助大家对框架有个整体的认识。1.4.1 微信小程序 MINA框架小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,可以让开发者可以方便的聚焦于数据与逻辑上。1.4.2 微信小程序 组件框架为开发者提供了一系列基础组件,开发者可以通过组合这些基础组件进行快速开发。什么是组件:组件是视图层的基本组成单元。组件自带一些功能与微信风格的样式。一个组件通常包括开始标签和结束标签,属性用来修饰这个组件,内容在两个标签之内。tagname property=”value”  Content goes here …/tagename注意:所有组件与属性都是小写,以连字符-连接1.4.3 微信小程序 API框架提供丰富的微信原生API,可以方便的调起微信提供的能力,如获取用户信息,本地存储,支付功能等。说明:wx.on 开头的 API 是监听某个事件发生的API接口,接受一个 CALLBACK 函数作为参数。当该事件触发时,会调用 CALLBACK 函数。如未特殊约定,其他 API 接口都接受一个OBJECT作为参数。OBJECT中可以指定success, fail, complete来接收接口调用结果。1.5 下载并安装开发工具为了帮助开发者简单和高效地开发微信小程序,微信推出了全新的 开发者工具 ,集成了开发调试、代码编辑及程序发布等功能。二、产品阶段2.1 产品调研小程序方向研究:小程序短期内并不会取代APP,低频、非刚需场景的长尾服务提供者最适合来做微信小程序;小程序定位分析:适合做小程序的产品方向为个人信息管理、金融服务、便捷生活、电子商务、游戏、新闻;小程序总结建议:建议从汽车资讯、美食、日历、个人信息管理、生活服务几个方向优先考虑;通过脑暴选择了试手项目:易打卡2.2 产品需求分析产品核心需求:快速打卡 —— 快速查看需要需要打卡的任务,并完成打卡任务任务管理 —— 管理所有任务,并可以新建任务个人中心 —— 用于帐号的设置、扫一扫、关于等页面2.3 产品原型第一版原型图三、设计阶段3.1 LOGO第一版     第二版3.2 视觉交互规范3.3 优化细节快速打卡优化过程基于页面上下的比重考虑,将页卡的信息部分下移。左右滑动提示箭头去掉,因为大多数人见到页卡数字,自然会知道页面可以滑动,去掉之后让页面更简洁。距离信息的提示提出来,增加定位的一些icon的提示图标。中心的较大的打卡增加用户吸引力,在打卡的时候增加绿色外环的动态效果,增强用户交互。tab中的细节优化部分在与旋转翻转效果,而且icon的线条粗细调整为3px。四、开发阶段4.1 前端源码文件结构如下:小程序配置:功能点分析:页面滑动组件的使用Swiper打卡签到动效使用CSS3列表渲染,数据绑定,模版,事件,引用以及内部页面的跳转navigator的的使用,这里以任务管理为例子说明Swiper滑动组件Swiper的页面结构及属性设置CSS3 transform: rotate(deg)打卡动效的页面结构页面WXSS样式:页面sign.js:任务管理页面截图:navigator新建打卡任务使用技能,学会navigator的使用即可,其中事件绑定使用bindtap(官方没有明确说明,这里为了绑定上报数据还是这么写了),跳转的url配置为页面路径,hover-class用于自定义页面hover效果样式Block、wx:for、wx:if新建打卡任务使用技能,学会navigator的使用即可,其中事件绑定使用bindtap(官方没有明确说明,这里为了绑定上报数据还是这么写了),跳转的url配置为页面路径,hover-class用于自定义页面hover效果样式页面结构:事件绑定 bindtap页面结构:页面task.js:4.2 后端后台服务器架构:后端API接口:后端 API 列表

AD:【E企盈直播系统开发公司】E企盈系统专业开发:万商直播系统开发,直播系统,直播平台系统源码,小程序直播,商城版小程序,分销小程序,小程序定制,微分销,微商,微信分销,微信分销商城,微信分销系统,微信分销管理,微信分销平台,微商代理系统,E企盈是专业的直播小,E企盈是专业的直播小程序,公众号分销系统,营销系统,社群私域流量卖货系统技术开发商,热线:4006-838-530

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序,易打卡
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏