用微信小程序开发一个计算器

今天我们用微信小程序来写一个计算器的案例

页面布局

首先我们需要对页面进行一个简单的规划，计算器一般在页面中都分为两部分，一部分是上面的结果显示区，另一部分就是下面的数字按钮及其运算符按钮，整体页面布局如图所示

下面我们就来进行代码的实现
首先我们在index.json文件中给页面设置样式，如图

然后我们就开始在index.wxml中进行主页面的布局设计
上面结果展示区我们分别需要用两个位置来显示数字和运算符
下面计算按钮区我们则需要四行来显示我们的数字键和运算符
代码如下

每个按钮分别绑定上不同的事件，接下来我们开始在index.wxss中对页面的样式进行美化。
如图

对页面布局样式完成后，其页面如下

功能实现

接下来就是功能的实现，在index.js中完成各事件处理函数

其具体代码如下

这样，我们的计算器小案列就算完成了

但是值得注意的是，原生的js带有bug，当我们在进行浮点数的运算时，运算结果会出现错误，如果需要解决这个问题，可以在网上找一些精确计算的方法放到我们的事件处理函数中，此类问题就可以解决

用微信小程序开发一个计算器相关推荐

微信小程序开发一个小型商城（八、个人页面）
上一篇文章:微信小程序开发一个小型商城(七.支付页面) 在上方还是使用wx:if进行判断是否有登录的数据,有的话将数据当中的图片和名字渲染到页面当中,不存在的话使用一个登录按钮表示需要用户登录.往下分 ...
微信小程序开发一个小型商城（四、商品列表）
上一篇文章,微信小程序开发一个小型商城(三.商品分类设计) 在从上一个界面跳转过来,会看到商品列表这个界面:如下图所示: 页面分析:从上到下:分别是一个已经定义好的自定义组件,下面的综合,销量,也是一 ...
微信小程序开发一个小型商城（五、商品详情）
上一篇文章:微信小程序开发一个小型商城(四.商品列表) 在从上一个界面跳转过来,会看到商品详情这个界面goods_detail :如下图所示: 页面分析:从上到下:一个轮播图+一个view标签存储商品 ...
微信小程序开发一个小型商城（七、支付页面）
上一篇:微信小程序开发一个小型商城(六.购物车页面) 在这里,基本上是与购物车页面相似的: 在从购物车页面跳转过来,在购物车界面对购物车商品会进行合法判断,是否有收货人的信息和是否存在商品,而在订单页 ...
微信小程序开发一个小型商城（一、准备工作）
文章根据b站视频零基础玩转微信小程序教程(黑马) 最开始我们需要在app.json文件当中声明所有使用到的界面.代码如下所示: "pages": ["pages/in ...
微信小程序开发简易计算器改进版
微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...
用微信小程序开发BMI计算器（核心代码）
微信小程序大热,笔者想利用之开发一款BMI计算器,因为不久后有考试,所以只实现最基础的功能. 1.微信开发者工具工作界面 2.需要新增的文件夹 3.核心代码 3.1list.wxml <view ...
用微信小程序写一个计算器
下面是用微信小程序写的一个简单的计算器,有兴趣的小伙伴可以了解一下. 页面部分 <view class='box'><view class='txt'>{{screenNum} ...
微信小程序开发一个多少钱
小程序开发是当前比较流行的一项技术服务,能够为企业和个人带来巨大的商业价值和社会价值,但是小程序开发费用也是潜在的成本之一.在选择小程序开发服务时,了解开发费用如何计算.影响价格的因素以及如何降低成本 ...

用微信小程序开发一个计算器

页面布局

功能实现

用微信小程序开发一个计算器相关推荐

最新文章

热门文章