微信小程序实战项目《带源码》—

《微信小程序》

实验四报告

1. 实验名称: 仿计算器

2. 实验目的: 熟悉使用微信小程序开发工具，开发微信小程序项目。仿计算器，完成加减乘除求余四则运算。

3. 实验要求: 手工编写的项目。

具体要求：根据flex布局样式，使用数据绑定技术，通过JavaScript编程，完成四则运算（加减乘除求余）的功能。

(1)分别粘贴5个案例的结果截图。案例1：23+31。案例2：14-3。案例3：52*34。案例4：5/2。案例5：7%2。

(2)源代码，包括：每个页面的wxml、wxss、js三个代码文件。共3个代码文件。

特别要求：不能破坏实验报告的文档格式，否则一律0分处理。

实验结果： 将正确的答案（操作结果的屏幕截图，中文描述的用例描述的步骤）写在本报告上。

一、23+31

二、14-3

三、52*34

四、5/2

五、7%2

代码：

wxml文件
<!--pages/index/index.wxml--><view class="result"><view class="result-num">{{result}}</view></view><view class="btns"><view><view hover-class="bg" bindtap="resetBtn">C</view><view hover-class="bg" bindtap="delBtn">DEL</view><view hover-class="bg" bindtap="opBtn" data-val="%">%</view><view hover-class="bg" bindtap="opBtn" data-val="/">÷</view></view><view><view hover-class="bg" bindtap="numBtn" data-val="7">7</view><view hover-class="bg" bindtap="numBtn" data-val="8">8</view><view hover-class="bg" bindtap="numBtn" data-val="9">9</view><view hover-class="bg" bindtap="opBtn" data-val="*">×</view></view><view><view hover-class="bg" bindtap="numBtn" data-val="4">4</view><view hover-class="bg" bindtap="numBtn" data-val="5">5</view><view hover-class="bg" bindtap="numBtn" data-val="6">6</view><view hover-class="bg" bindtap="opBtn" data-val="-">-</view></view><view><view hover-class="bg" bindtap="numBtn" data-val="1">1</view><view hover-class="bg" bindtap="numBtn" data-val="2">2</view><view hover-class="bg" bindtap="numBtn" data-val="3">3</view><view hover-class="bg" bindtap="opBtn" data-val="+">+</view></view><view><view hover-class="bg" bindtap="numBtn" data-val="0">0</view><view hover-class="bg" bindtap="dotBtn">.</view><view hover-class="bg" bindtap="equalBtn" data-val="=">=</view></view></view>Wxss文件
/* pages/index/index.wxss */page {display: flex;flex-direction: column;height: 80%;color: #555;}.result {flex: 1;background: #f3f6fe;position: relative;}.result-num {position: absolute;font-size: 27pt;bottom: 5vh;right: 3vw;}.result-op {font-size: 15pt;position: absolute;bottom: 1vh;right: 3vw;}.btns {flex: 1;}/* 按钮样式 */.bg {background: #eee;}.btns {flex: 1;display: flex;flex-direction: column;font-size: 17pt;border-top: 1rpx solid #ccc;border-left: 1rpx solid #ccc;}.btns > view {flex: 1;display: flex;}.btns > view > view {flex-basis: 25%;border-right: 1rpx solid #ccc;border-bottom: 1rpx solid #ccc;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}.btns > view:last-child > view:first-child {flex-basis: 50%;}.btns > view:first-child > view:first-child {color: #f00;}.btns > view > view:last-child {color: #fc8e00;}Js文件
Page({/*** 页面的初始数据*/data: {result: '',num1: '0',num2: '0',op: '',opisclear:false,isClear: false},// 数字按钮事件处理函数numBtn:function(e) {var num = e.target.dataset.valif(this.data.num1 == '0' && this.data.opisclear == false){this.setData({result:this.data.result+num,num1:num})}else if(!(this.data.num1 == '0') && this.data.opisclear == false){this.setData({result:this.data.result+num,num1:this.data.num1+num})}else if(this.data.num2 == '0' && this.data.opisclear == true){this.setData({result:this.data.result+num,num2:num})}else if(this.data.num2 != '0' && this.data.opisclear == true){this.setData({result:this.data.result+num,num2:this.data.num2+num})}},// 运算符事件处理函数opBtn:function(e) {var op1 = e.target.dataset.valvar op2 = ''if(op1 == '+'){op2 = '＋'}else if(op1 == '-'){op2 = '－'}else if(op1 == '*'){op2 = '×'}else if(op1 == '/'){op2 = '÷'}else if(op1 == '%'){op2 = '%'}console.log(op1)if (this.data.num1 == '0' || this.data.opisclear == true){return;}this.setData({result:this.data.result+op2,op:op1,opisclear:true})},// 等于号事件处理函数equalBtn: function(){var num1 = Number(this.data.num1);var num2 = Number(this.data.num2);console.log(num1)console.log(num2)var result1 = 0;if(this.data.op == '+') {result1 = num1 + num2;}else if (this.data.op == '-'){result1 = num1 - num2;}else if (this.data.op == '*'){result1 = num1 * num2;}else if (this.data.op == '/'){result1 = num1 / num2;}else if (this.data.op == '%'){result1 = num1 % num2;}console.log(result1);this.setData({result: this.data.result + "=" + result1,op:'',num1: result1,num2:0,opisclear:false,isClear:true,})},// 小数点事件处理函数dotBtn: function() {if (this.isClear) {this.setData({num: '0.'})this.isClear = falsereturn}if (this.data.num.indexOf('.') >= 0) {return}this.setData({num: this.data.num + '.'})},// DEL按钮处理函数delBtn: function() {var num = this.data.num.substr(0, this.data.num.length - 1)var result1 = this.data.result.substr(0,this.data.result1.length - 1)this.setData({result:result1,num: num === '' ? '0' : num})},// C按钮事件处理函数resetBtn: function() {this.setData({result: '',num1: '0',num2: '0',op: '',opisclear:false,isClear: false})}})

微信小程序实战项目《带源码》——仿计算器相关推荐

微信小程序实战视频教程附源码课件与多个微信小程序源码 14课
课程介绍: 两天微信小程序实战,结合豆瓣API开发豆瓣小程序,附带微信官方小程序开发工具win版与mac版.还有几个小程序源码可供剖析. 课程目录: 第一天 01-内容介绍 02-微信小程序开发工具的 ...
驾校分期-众筹项目java前后端分离项目vue（微信小程序+java前后端源码下载）
可以idea直接打开,mysql数据库项目,前后端分离项目vue,分期可自动设置,自动换算金额驾校分期-众筹项目java前后端分离项目vue(微信小程序+java前后端源码下载)
基于olami开放语义平台的微信小程序遥知之源码实现
概述实现一个智能生活信息查询的小秘书功能,支持查天气.新闻.日历.汇率.笑话.故事.百科.诗词.邮编.区号.菜谱.股票.节目预告,还支持闲聊.算24点.数学计算.单位换算.购物.搜索等功能. 使用方 ...
基于java springboot的小说阅读微信小程序含后台管理系统源码
系统运行环境开发工具 eclipse(idea),mysql5.7(大于5.5),navicat,小程序开发工具硬件要求 windows操作系统 cpu:2.4GHz 内存:4G 硬盘:100G ...
微云二手车运营版公众号+小程序v1.1.20+微信小程序+抖音端源码安装教程
系统包括PC+公众号+小程序v1.1.20+微信小程序+抖音小程序前端,使用前先在后台初始化下数据.播播资源网技术小编看了下说明是带PC端功能,但后台没找到设置的地方,不过公众号+小程序+抖音也够用了 ...
微信小程序盲盒系统源码附带教程
微信小程序盲盒系统源码可对接微信支付附带教程盲盒小程序的教学服务器安装宝塔面板设置好网站数据库设置好SSL证书上传微擎框架框架安装好上传小程序后台 /addons 这个目录是放置后 ...
微信小程序云开发实例源码部署详细流程[自带管理后台]
项目介绍小贝校招项目是集校招资讯.内推.刷题.简历模板下载等功能于一体的小程序,基于微信原生+微信云开发+vant+colorui以及相关技术栈开发,自带图像云开发后台,不需要自己建网站. 源代码 ...
校园服务小程序源代码分享园服务微信小程序全开源版源码-包含服务端
2021年4月17日更新严正声明: [请一定勿将程序用户商业用途且包括用此程序去参加各类学校的竞赛或者其他以获取名利而参与的竞赛等,一旦被原作者发现将会面临严重的侵权责任后果,特别是被获奖后会遭 ...
微信小程序反编译-获取源码
1.使用PC端微信找到微信小程序的存储位置找到文件位置删除applet文件夹下所有文件,方便后期定位自己需要编译的小程序 2. 点击自己需要反编译的小程序 3. 查看微信小程序生成的文件 wx开头的 ...

微信小程序实战项目《带源码》——仿计算器

代码：

微信小程序实战项目《带源码》——仿计算器相关推荐

最新文章

热门文章