本文就给大家介绍一下如何使用微信小程序开发计算器APP，具有一定的参考价值，有需要的朋友可以参考一下，希望对正在学习微信小程序开发的朋友有所帮助！

摘要：微信小程序开发并不难，在掌握之前并不知道它有多强大，看上去很先进，其实比我们传统的编写方式要简单，封装性很强，按照他们的规则和规范，编写体验还是很不错的。

下面我来介绍一下这个简单的计算器以及开发过程中的一些坑。首先网上有很多网页开发者工具和文档，就不赘述了。没必要破解。微信官方已经修改了验证机制，没有验证机制你还是能用的，但是有些功能受限了。开发微信小程序并不难，看似高端，其实比我们传统的写法要简单，封装性很强，按照他们的规则和规范，写法体验还是很不错的。

不过由于权限不足，目前微信小程序都是在开发者工具的模拟器中运行，微信上的实际情况如何尚不得而知。

xxx.wxml文件和xxx.wxss文件

wxml是微信自己开发的一种标记语言，你可以直接把它看成是一个HTML文件，因为我们的界面构建都是写在这个文件中的，但是里面没有任何HTML标签，只有wxml标签，而且wxml标签的数量也非常少。

wxss是微信自己开发的一个样式文件格式，相当于我们的CSS文件，写法是一样的，只是文件后缀变了而已，我们在微信小程序中还是按照以前的方式写CSS。

通过添加wxml和wxss，我们就可以构建我们想要的UI。

xxx.js 和 xxx.json 文件

xxx.js文件就是你写JS的地方，每个xxx.js对应一个同名的xxx.wxml文件，xxx.js文件里必须有一个Page对象，哪怕这个页面没有任何业务逻辑。进入Page，微信网页开发者工具会自动生成一系列空方法让你去实现，当然你也可以不去实现，只是帮你搭建骨架而已。

xxx.josn文件是配置文件，一般用于全局配置，比如根目录下的app.josn定义了小程序由哪些页面组成，小程序导航栏的样式等，看名字就能知道这些属性代表什么意思。

属性配置页面，第一个是启动页面，所有的页面都要在这里配置，如果你创建了一个页面，却忘了在这里添加，那你会很郁闷，因为页面跳转的时候方法不会执行，这浪费了我不少时间，一直挠头，琢磨。

整个框架

看一下下面的项目结构图，一个页面就是一个文件夹，一个页面通常有js、wxml、wxss，wxml和js文件是必须的，不能有样式。

calc（计算器页面）、（历史记录）、（小程序首页、启动页）、logs（日志信息）、（js工具类），logs和是内置的，可以有也可以没有。

源码分析

这个简易计算器的界面布局还是沿用老系统的，采用的是CSS布局，好像这也是微信官方推荐的（官方文档里就是用的这个）。

计算器的按钮全部用标签制作，并添加wxss样式。当然你也可以直接使用组件。

这里从名字就可以看出来是用来绑定事件的，跟我们在HTML中使用的是一样的，双花括号id={{id9}}里面的值来自于js文件中data属性中定义的同名属性。

CSS没什么好说的，唯一要注意的是微信提供了一个尺寸单位rpx，可以根据屏幕宽度进行适配，在计算器页面也有用到：

主要涉及部件

视图，文本，大部分页面都是这两个哥们儿。

()，“简单计算器”页面的按钮

Icon（图标），计算机的历史记录悄悄地使用图标自带的其中一个图标。

标记模式调整页面（）

主要涉及API

wx.，导航，跳转，在当前页面打开新页面

，本地存储，使用它来保存计算历史，并且还用Sync结束异步方法

效果图：

防范措施

每次创建新页面时，一定要记得添加到app.josn的属性中，否则跳转到新页面后，不会执行新页面的方法。

微信小程序里没有等待对象，写 JS 之前先想好替代方案。比如这个计算器就被坑了，本来可以用 eval 函数方便计算表达式，结果发现不能用，走了好远的弯路。

微信小程序里面的JS并不是真正的JS，wxss也不是真正的CSS，所以在编写的时候还是需要小心一些。

微信小程序总体来说不难，官方文档也写的很好，仔细看官方文档就行。