微信小程序开发—项目实战之计算器开发
2017-05-14 17:16
671 查看
From:http://blog.csdn.net/anda0109/article/details/53366804
就像学习一门开发语言首先会写出“Hello World”一样,学习开发一个应用首先得写出一个“计算器”,这也是开发者的入门必经之路。想当年我学习C/C++也是从一个计算器入门而后一往无前的。小程序的第一个应用,我也选择了开发计算器,入门神器嘛。首先,它的界面相对简单,适合入门;其次,无人不知,无人不用,对功能需求最为了解。
别看一个小小的计算器小程序,涉及的知识点其实也不少:
首先你得了解小程序的框架,否则无从下手嘛
页面布局,对css还是要有一定的功底的,否则你的计算器注定奇丑无比
事件消息、参数传递,这些知识得会啊
JavaScript得熟练应用,要写运算逻辑呢
还有,你的逻辑得严密,连续运算优先级的处理等等,否则你的计算器根本没法用吧
……
这看起来似乎有些难吧,别被吓到,我也是和你们一样,刚刚入手小程序开发的,为什么是刚刚,是因为小程序出来也才不久嘛。
下面是我用小程序做的一个奇丑无比版计算器,界面简陋,功能单一,仅作入门参考抛砖之用:
对于这样一个简陋的计算器,其开发需要经历以下步骤:
整体框架
标题栏,两个tab指向两个页面。这里主要是掌握全局配置app.json中tabBar的用法。
页面布局
显示屏,19个按钮的排列。这里主要就是CSS的知识了,当然可以用到WXSS的rpx尺寸单位来处理不同屏幕大小的适配问题。
事件消息
点击按钮,得在逻辑层中获取到对应的消息。组件的bindtap属性绑定一个消息响应函数,同时传递一个事件参数,那么我们可以将每个组件的id作为区分不同按钮的标识。
Js逻辑处理
处理运算结果,并更新视图,让结果在屏幕上显示。Js的基本语法,字符串处理,逻辑运算等。
本地缓存
计算历史记录存入缓存,打开日志页面时读取缓存。这里主要用到小程序的API:wx.setStorage和wx.getStorage,这个是异步函数。当然对于数据量较小的,可以使用同步函数wx.setStorageSync和wx.getStorageSync。
本来打算贴上代码,感觉意义不大,开发重在理解框架和思路。因此我将我的学习经验已经录制成视频分享给大家,以希望和大家一同学习、共同进步。
其中在课程目录的第一节下载课件,可以下载到该计算器的代码。但是我不建议一开始就下载代码,先完整看一遍视频教程,理解开发框架和思路。然后再自己动手敲一遍代码,但是敲代码的过程中肯定会遇到问题,这时可以边敲边看第二遍视频,随时暂停。视频看完,也能够完全掌握了,其实这种方法适合任何的网络视频教程。当然,这些都是针对新手,高手请飘过~
最后附上我的视频教程地址:http://edu.csdn.net/course/detail/3370
相关文章推荐
- [置顶] 微信小程序开发—项目实战之计算器开发
- 微信小程序开发—项目实战之聊天机器人
- 微信小程序入门与实战 常用组件 API 开发技巧 项目实战
- 微信小程序开发—项目实战之聊天机器人
- 微信小程序开发博客项目-篇幅《一》
- Swift开发笔记1.《Swift开发指南》计算器实战项目的相关心得
- Web前端项目实战——使用RequireJS开发简易绘图程序
- 微信小程序(应用号)开发新闻客户端的实战课程
- (转)微信小程序开发项目——笑话大全
- 微信小程序开发博客项目-篇幅《一》
- 微信小程序开发之入门篇(熟悉项目结构)
- iOS项目开发实战——使用ShareSDK进行QQ和微信分享
- Android项目实战之(1)-- 开发一个"快速冲浪"的程序
- 【腾讯Bugly干货分享】微信小程序开发思考总结——腾讯“信用卡还款”项目实践
- 微信小程序开发项目——笑话大全
- 微信小程序开发记账应用实战服务端之用户注册与登录基于ThinkPHP5描述
- 微信小程序(应用号)开发新闻客户端的实战课程
- 微信小程序开发记账应用实战服务端之用户注册与登录-基于Yii2描述
- 微信小程序开发实战视频教程发布