微信小程序开发—项目实战之计算器开发
我参加CSDN博客之星评选啦,感谢大家前往投票支持!
投票地址:http://blog.csdn.net/vote/list.html?keyword=anda0109#search
就像学习一门开发语言首先会写出“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
微信小程序开发—项目实战之计算器开发相关推荐
- 微信小程序商城项目实战(完结篇:意见反馈)
微信小程序商城项目完结 意见反馈 代码实现 首先修改标题并且使用之前写好的tab组件 编写界面 编写样式 逻辑处理js 效果图 意见反馈 做假的意见反馈,主要练习一下微信小程序文件上传api以及样式界 ...
- 微信小程序完整项目实战(前端+后端)
基于微信小程序的在线商城点单系统 前言:闲来无事,想以后自己开一个小超市或者小吃店,能够支持线上下单,既方便客户也方便自己.系统采用C#语言作为后端实现与小程序的交互,给用来学习或者想自己开个小店的朋 ...
- springboot+微信小程序 入门级项目实战
学习b站up主码神之路的项目笔记 视频地址 https://www.bilibili.com/video/BV17y4y1L78u?spm_id_from=333.337.search-card.al ...
- 微信小程序商城项目实战(第一篇:项目搭建与首页)
商城项目第一篇 项目搭建 项目结构 编写整个项目中需要用到的功能 request.js 全局样式 组件(搜索框) 首页 代码编写 效果图 项目搭建 后端接口:https://www.showdoc.c ...
- 微信小程序商城项目实战(第七篇:生成订单支付页)
订单支付 分析 代码实现 效果图展示 分析 顶部改为"支付" 上方为地址,跳转至地址管理,可修改 下方为订单信息 最下方显示所需支付金额以及支付按钮,点击支付则支付成功跳转订单页 ...
- 微信小程序商城项目实战(第十篇:订单管理)
订单管理 订单页面 分析 代码实现 效果图展示 订单详情页 分析 详解 效果图 付完款的 未付款的 订单页面 分析 顶部改为"我的订单" 上方为导航栏:全部.待付款.待发货.退款/ ...
- 微信小程序商城项目实战(第十一篇:商品收藏+历史浏览管理)
商品收藏+历史浏览管理 商品收藏+历史浏览页面 分析 代码实现 效果图展示 商品收藏: 历史浏览: 商品收藏+历史浏览页面 共用一个页面 分析 顶部改为"商品收藏" 上方为导航栏: ...
- 微信小程序商城项目实战(第二篇:分类页)
实现分类页 修改json文件并且引入搜索框 {"usingComponents": {"search-input":"../../components ...
- 微信小程序商城项目实战(第五篇:购物车)
实现购物车 json里边设置一下页面标题"navigationBarTitleText": "购物车" 界面组成 上方由一个按钮跳转到收货地址管理, 中间为购物 ...
最新文章
- NYOJ 49 开心的小明
- Unity热更新方案探索与讨论
- LeetCode 第 201 场周赛(304/5614,前5.42%)
- webpack 保存文件后自动打包_继webpack后又一打包神器Parcel
- 【简单粗暴】如何给网页嵌入视频
- SOAP(Simple Object Access Protocol )简单对象访问协议
- EmacsLisp学习
- ramoops具体失败原因来解释驱动寄存器
- Java程序的开发步骤
- 基于微信小程序的毕业设计题目(27)php校园跑腿小程序(含开题报告、任务书、中期报告、答辩PPT、论文模板)
- 华为推送服务回执证书即将到期,尽快更新
- 什么是SG?+SG模板
- python制作圆形按钮_圆形按钮tkinter python
- 选课通知 | 北交大《数据分析方法及应用实战》秋季全校选修课简介!
- js对象深浅拷贝,来,试试看!
- 基于蚁群算法的图像边缘检测
- 高等数学入门教程 — 自然底数e
- 如何用photoshop切图并去掉图片上面的文字
- v2ray各种版本+一键搭建+bbr提速脚本
- 洛谷P3237 [HNOI2014]米特运输