分析简单计算器 让你开始开发微信小程序

描述：这篇文章是用一个非常老的开发者版本(0.9时期)写的，但是demo今天仍然可用，所以文章仍然可读；但仅供参考；写在前面，但重点放在后面。这是教程，不是教程。

你可以先看看演示的操作动画，看看是什么，GitHub地址(https://github.com/dunizb/wxapp-sCalc)

自从微信小程序内测以来，我的网络信息几乎都被它屏蔽了，有那么一瞬间，我不知道发生了什么。特别是那天晚上有人熬夜，吐血出教程。天啊，我那么努力，觉得不马上学习，以后会被这个行业的其他人踩死。恐慌了几天，等到了国庆节终于可以跟风熬夜学习了。

好吧，来吧，这样新手只能写计算器。嗯，是的，我想不出什么好主意。这里简单介绍一下这个简单的计算器，以及开发过程中的一些坑洼。

首先，网上有很多Web开发工具和文档，我就不重复了。没有必要破解它们。微信官方修改了验证机制，不用APPID也能播放，但部分功能受限。

其次，微信小程序的开发其实并不难。在我掌握它之前，我并不知道它，它看起来很高。事实上，与我们传统的写作方法相比，它更简单，封装性更高。按照他们的规则和规范，写作体验还是很不错的。

但是因为没有权限，目前的微信小程序都是在开发者工具的模拟器中运行，不知道微信上真实情况如何。

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微信Web开发者工具会自动生成一些列空的方法供你实现。当然，你不能实现它们，只是建立你的骨架。

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

属性配置页面，第一个是启动页面。所有页面都必须在此配置。如果你建了一个页面，却忘了在这里添加，那么你会很郁闷，因为页面跳转的时候不会执行onLoad方法，我会不断好奇，因为这浪费了很多时间。

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

oads/allimg/180408/11315234E-5.png" />

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

源码分析

这个简易计算器界面布局依然延续祖制，采用CSS Flexbox布局，貌似微信官方也是这么推荐的（官方文档中就是使用Flexbox）。

计算器的按键，都是用<text>标签来做的，加上wxss样式即可，当然也可以直接用button组件。

wxml:

<view class="btnGroup">    <view class="item blue" bindtap="clickBtn" id="{{id9}}">9</view>    <view class="item blue" bindtap="clickBtn" id="{{id8}}">8</view>    <view class="item blue" bindtap="clickBtn" id="{{id7}}">7</view>    <view class="item orange" bindtap="clickBtn" id="{{idj}}">－</view></view>

这里bindtap，看名字就知道是用来绑定事件的，跟我们在HTML中使用onclick一个道理。id={{id9}}双大括号中的值来自js文件中data属性定义的同名属性

wxss:

.btnGroup {    display: flex;    flex-direction: row;    flex: 1;    width: 100%;    background-color: #fff;}.item {    width:25%;    display: flex;    align-items: center;    flex-direction: column;    justify-content: center;    margin-top: 1px;    margin-right: 1px;}.item:active {    background-color: #ff0000;}

css就没什么好说的了，唯一需要注意的是微信提供了一个尺寸单位rpx，responsive pixel ，可以根据屏幕宽度进行自适应，官网文档有详细解析。我在计算器的history页面也有使用：

主要涉及组件

• view、text，大部分页面都是它俩哥们。

• 按钮（button），index页面的按钮“简易计算器”

  

• 图标（icon）,计算机的历史记录安静使用的就是icon自带的图标之一。

  

• 标记方式调整页面（navigator）

  

• 图片（Image），首页头像

  

• for循环，历史记录显示页面用到了，得从Storage中读取数据展示，而Storage中保存就是一个数组

  <block wx:for="{{logs}}" wx:for-item="log"><view class="item">{{log}}</view></block>

主要涉及API

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

  

• Storage，本地存储，保存计算历史记录用到了它有setStorage、getStorage，同时还有带Sync结尾的异步方法

  

注意事项

1. 每新建一个页面一定要记得去app.josn的pages属性中添加，不然的话使用navigateTo跳转到新页面后新页面的onLoad方法不会执行。

2. 微信小程序中没有window等JavaScript对象，所以在写JS前想好替代方案，比如本计算器就被坑大了，本来使用eval函数可以方便的计算表达式，结果没法用，绕了好大的弯。

3. 微信小程序中的JS并不是真正的JS，wxss也并不是真正的CSS，所以写的时候还是要注意一下。

4. 本计算器存在不完善和bug，因为重点不是实现全部功能，而是搞清楚微信小程序开发方法，所以非关注点不用在意。

微信小程序总体来说不难，官方的文档也写的非常好，认真阅读官方文档就好。