小程序第一课:简易计算器
写在前面
以前也接触了小程序,但是只是看看文档浅尝辄止,也没找项目练手学习。但是无论学一门什么技术,不动手实践是不行的,站在岸上学不会游泳。(现在才发现小学学的名言真是哲理啊)最近在网上找了些案例跟着做,一步一步成长起来吧!
小程序第一节:简易计算器(主要参考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数组。
写在后面:终于迈出了总结学习的第一步,坚持下去,加油!