剖析简易计算器带你入门微信小程序开发

这是教程，也不是教程。

可以先看Demo的操作动图，看看是个什么玩意儿，GitHub地址（https://github.com/dunizb/wxapp-sCalc）

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页面也有使用：

注意事项

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

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

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

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

更多剖析简易计算器带你入门微信小程序开发 相关文章请关注PHP中文网！