【小程序入门集锦】15，一个开源的小程序计算器

2017-04-16 本文已影响118人石桥码农

这是一个小程序新手练习的项目（基于微信quick demo改写），做了一个计算器。有基本的UI，有基本的跳转及简单的js逻辑，很适合初学者阅读。

读别人的代码，就是归整自己的编程技能。

涉及微信小程序开发相关知识：

1、CSS Flexbox布局

2、事件绑定、页面跳转

3、Page、window、App全局设置

4、wxml、wxsss、js、json文件使用方法

5、view、text、icon、button组件使用方法

6、navigate、wx.setStorageSync、数据绑定等API

Setup

1、Clone the repo

$ git clone https://github.com/dunizb/wxapp-sCalc.git

2、Import to Wechat DEV Tools

把项目导入到微信开发者工具中即可

编者注：源码中有两点值得注意——

1，作者并没有给每一个计算器按钮绑定一个事件函数，统一绑定于blickBtn这一个函数，而通过id与e.target.id来分别用户点击的是哪一个按钮，并且作者直接用了计算按钮的屏显数字做了id，简单直接

2，单击按钮时有一个红色的高亮效果，该效果是通过css实现的：

.item:active {

background-color: #ff0000;

}

一行简单的代码，就使UE体验上升了不少。值得学习~

另外，再分享一个小程序游戏，虽说微信官方禁止小游戏上架，但是谁又能阻止学习者的脚步呢。微信小程序文档中那些绘图API与动画API，可能也是为将来做游戏准备的。

这个一个2048游戏，如果喜欢计算器风格的demo，这个可能你也会喜欢。

---

我在知乎开了一个live，4月22日晚（周六）8点半我在知乎与大家见面：

【0基础周末学习小程序开发】

在【哲学李论】公众号回复"0基础周末学习小程序开发"，可以免费领券，限量500名。

在微信公众号哲学李论，回复“小程序入门集锦”可以看到这个系列的所有文章。

如果觉得本文还行，请转发给朋友。

好文章与15W艺友分享，欢迎推荐文章：liyi@rixingyike.com。