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