小程序第一课:简易计算器

写在前面

以前也接触了小程序,但是只是看看文档浅尝辄止,也没找项目练手学习。但是无论学一门什么技术,不动手实践是不行的,站在岸上学不会游泳。(现在才发现小学学的名言真是哲理啊)最近在网上找了些案例跟着做,一步一步成长起来吧!

小程序第一节:简易计算器(主要参考Dunizb的文章教程,他的github链接,人家16年就比18年的我强了不知道多少倍,沮丧~)


1.创建项目目录

项目目录

因为以前看过小程序开发文档,所以还是知道新建页面要到app.json里面的pages里面写入新建页面的wxml路径。

计算器主要有登陆页面,计算页面,历史页面。因为逻辑较少,不需要写思维导图了,一切从简。

2.登陆页


登陆界面


登陆页面代码

后面还是不贴代码了,跟网上的教程大同小异,需要改的地方自己认真看代码,也能发现。

页面逻辑:1.检测是否获得用户信息,无则显示获得头像昵称按钮,有则显示头像和昵称。

                   2.进入计算界面按钮,按钮上显示小程序名称,下面的github跳转是不会成功的,因为小程序不支持海外和个人的跳转,所以就不写了。

js逻辑:1.data中定义变量,事件处理函数中主要为一个getUserInfo函数获得用户信息,onload函数中处理获得的用户信息,两个事件分别处理点击用户头像和计算界面按钮的跳转事件wx.navigateTo,如果想转发,要设置转发事件的处理函数onShareAppMessage:function(){}.

wxss就不赘述了,跟css差不多。

3.计算界面


计算界面

页面逻辑:整个页面分为上部显示区域和下部按键区域,微信挺支持使用flex布局,又去熟悉了下flex布局。给每个按键分别绑定id和点击事件clickBtn(history例外),点击时传入id值。

js逻辑:data中声明定义给按键们绑定的id变量,以及接下来用到的变量。比如:当前屏幕显示字符screenData,能够运算的数字和运算符输入存储数组arr[],日志logs[]等。

            事件处理函数中主要是clickBtn,当点击按键时,触发clickBtn函数。

clickBtn逻辑:1.获得点击对象的id,通过id来判断点击对象的身份,数字还是运算符以及其他。

                        2.获得当前屏幕上的字符,根据当前点击对象的身份,按照不同的逻辑处理此时的this.data.screenData(后面用sd代替)

                        1)清空:this.setData({"screenData":0});this.data.arr.length=0;

                        2)后退:sd==“0”,return;

                                       否则,sd.substring(0,sd.length-1);this.data.arr.pop();

                        3)其他

                        (1)+、-、*、/、.:lastIsOperaSymbo=true或者sd==0,return;(可以把运算符                                  和点包含在一个对象里)

                        (2)其他情况:声明data,sd==0时,data=id;否则data=sd+id(字符串拼接)

                                this.setData({"screenData":data}),更新屏幕显示字符,this.data.arr.push(id)

                                如果为运算符,lastIsOperaSymbo=true,否则为false;

                           4)=

                                遍历数组this.data.arr:

                                1)如果arr[i]不是加减乘除,num=num+arr[i];

                                 2)否则: lastOperator=arr[i];

                                               optarr.push(num);

                                                optarr.push(arr[i]);num='';

                                   遍历完arr后,记得optarr.push(num),因为按照设定的规则,最后一定是数字

                                  var   result=Number(optarr[0]);从1开始遍历optarr数组,先判断                                                           isNaN(optarr[i])为真,然后判断是加减乘除哪位,与arr[i+1]执行相应计算

                                点击“=”时,存入历史记录:

                                    this.data.logs.push(sd+"="+result);

                                    wx.setStorageSync("Calclogs",this.data.logs);

                                    this.data.arr.length=0;

                                    this.data.arr.push(result);

                               设置屏幕显示:this.setData({"sd",result+""});

 history处理函数:跳转到history界面

4.历史记录界面:


历史记录界面

界面逻辑:遍历logs,显示每个item

js逻辑:data中声明logs=[];

            onload函数中通过wx.getStorageSync("Calclogs")获得本地存储的历史记录,

            再通过setData更新data中的logs数组。



写在后面:终于迈出了总结学习的第一步,坚持下去,加油!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容