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

2018-10-25  本文已影响0人  Jinxhao18

写在前面

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

小程序第一节:简易计算器(主要参考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数组。


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

上一篇下一篇

猜你喜欢

热点阅读