微信小程序-简易计算器
一、前期准备工作
软件环境:微信开发者工具
官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
1、基本需求。
- 简易计算器
- 满足日常所用的的加减乘除计算
- 带历史记录,查看过往计算
2、案例目录结构
二、程序实现具体步骤
1.index.wxml代码
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
</view>
<view>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
<text class="" style="display:block">极客小寨OkYoung团队 倾情出品</text>
</view>
<view class="usermotto">
<!--<text class="user-motto">{{motto}}</text>-->
<button type="default" size="{{primarySize}}" plain="{{plain}}" hover-class="button-hover"
disabled="{{disabled}}" bindtap="toCalc"> {{motto}} </button>
</view>
</view>
2.index.wxss代码
/**index.wxss**/
.userinfo {
/*display: flex;*/
/*flex-direction: column;*/
/*align-items: center;*/
/*width:256rpx;*/
/*height: 512rpx;*/
}
.userinfo-avatar {
width: 228rpx;
height: 228rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
margin-top:80px;
line-height: 80px;
}
.usermotto {
margin-top: 35%;
}
/** 修改button默认的点击态样式类**/
.button-hover {
background-color: red;
}
/** 修改默认的navigator点击态 **/
.navigator-hover {
color:blue;
}
.github{
color: green;
font-size: 14px;
text-align: center;
margin-top: 5px;
}
.icon{
vertical-align: middle;
margin-right: 2px;
}
3.index.js逻辑代码
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: '简易计算器☞',
userInfo: {},
defaultSize: 'default',
disabled: false,
iconType:'info_circle'
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
toCalc:function(){
wx.navigateTo({
url:'../calc/calc'
})
},
onLoad: function () {
console.log('onLoad');
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
4.计算器部分功能逻辑代码
var id = event.target.id;
if(id == this.data.idb){ //退格←
var data = this.data.screenData;
if(data == "0"){
return;
}
data = data.substring(0,data.length-1);
if(data == "" || data == "-"){
data = 0;
}
this.setData({"screenData":data});
this.data.arr.pop();
}else if(id == this.data.idc){ //清屏C
this.setData({"screenData":"0"});
this.data.arr.length = 0;
}else if(id == this.data.idt){ //正负号+/-
var data = this.data.screenData;
if(data == "0"){
return;
}
var firstWord = data.charAt(0);
if(data == "-"){
data = data.substr(1);
this.data.arr.shift();
}else{
data = "-" + data;
this.data.arr.unshift("-");
}
this.setData({"screenData":data});
}else if(id == this.data.ide){ //等于=
var data = this.data.screenData;
if(data == "0"){
return;
}
//eval是js中window的一个方法,而微信页面的脚本逻辑在是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能再脚本中使用window,也无法在脚本中操作组件
//var result = eval(newData);
var lastWord = data.charAt(data.length);
if(isNaN(lastWord)){
return;
}
三、案例运行效果图
四、总结与备注
注意事项
1.每新建一个页面一定要记得去app.josn的pages属性中添加,不然的话使用navigateTo跳转到新页面后新页面的onLoad方法不会执行。
2.微信小程序中没有window等JavaScript对象,所以在写JS前想好替代方案,比如本计算器就被坑大了,本来使用eval函数可以方便的计算表达式,结果没法用,绕了好大的弯。
3.微信小程序中的JS并不是真正的JS,wxss也并不是真正的CSS,所以写的时候还是要注意一下。
4.本计算器存在不完善和bug,因为重点不是实现全部功能,而是搞清楚微信小程序开发方法,所以非关注点不用在意。
微信小程序-简易计算器
注:本文著作权归作者,由demo大师代发,拒绝转载,转载需要作者授权
微信小程序-简易计算器的更多相关文章
- 微信小程序简易教程
刚接触到微信小程序开发,这里做一个简单的教程: 1. 获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开 ...
- 微信小程序简易table组件实现
前提:微信小程序自1.6.3基础库版本库开始支持简洁组件,之前的版本因不支持,故在引用组件处默认为空节点.关于微信小程序已有模板为何还需构建组件?一是因为组件可以更方便的自定义并绑定行为,二是在其他页 ...
- 第一篇、微信小程序_01计算器
官方文档地址:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 一.计算器的首页布局 第一部分WXML: <view class=&quo ...
- 微信小程序实现计算器功能
page { height:100%;} .calculator { width: 100%; height: 100vh; border:solid 1px; background: rgb(238 ...
- 微信小程序——简易动画案例
wxml: <view class="container"> <view animation="{{animation}}" class=&q ...
- 微信小程序 简易搜索功能实现
先看效果图 挺简单的一个实现方法,导入外部js数据,将数据通过radio-group展示出来,根据数据里的status属性判断显不显示该项. 在搜索框内实时读取输入的数据,去除空格后将数据跟js里的n ...
- 微信小程序简易富文本
- 微信小程序实例源码大全
微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...
- 微信小程序源码推荐
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
随机推荐
- QDAC
QDAC GITHUB: svn://www.qdac.cc/QDAC3 包括QMsgPack\QJson\QWoker...等序列和事件调度控件.
- Selenium2+python自动化34-获取百度输入联想词
前言 最近有小伙伴问百度输入后,输入框下方的联想词如何定位到,这个其实难度不大,用前面所讲的元素定位完全可以定位到的. 本篇以百度输入框输入关键字匹配后,打印出联想词汇. 一.定位输入框联想词 1.首 ...
- NGUI 3.5教程(一)安装NGUI 3.5.8
写在前面: 网上找的NGUI教程,都是基于2.x版本号的.为了能配合教程学着做,我也是下载了各种NGUI 2.x版本号.可是在导入的时候,或多或少都报错(我用的Unity 的版本号是4.3.2).无奈 ...
- Spring注解方式实现任务调度【官方文档翻译】
原文:http://docs.spring.io/spring/docs/4.0.1.BUILD-SNAPSHOT/javadoc-api/ 注解类型:EnableScheduling @Target ...
- russian-doll-envelopes
https://leetcode.com/problems/russian-doll-envelopes/ // Use map (Russian doll number -> vector o ...
- go语言基础之二维数组
1.二维数组 示例: package main //必须有个main包 import "fmt" func main() { //有多少个[]就是多少维 //有多少个[]就用多少个 ...
- Combinations leetcode java
题目: Given two integers n and k, return all possible combinations of k numbers out of 1 ... n. For ex ...
- jquery中filter(fn)的使用研究
jquery中filter(fn)给出的官方说明是: 筛选出与指定函数返回值匹配的元素集合 这个函数内部将对每个对象计算一次 (正如 '$.each'). 如果调用的函数返回false则这个元素被删除 ...
- Android下 使用百度地图sdk
百度地图 Android SDK是一套基于Android 2.1(v1.3.5及以前版本支持android 1.5以上系统)及以上版本设备的应用程序接口.可以使用该套 SDK开发适用于Android系 ...
- 揭开Faiss的面纱 探究Facebook相似性搜索工具的原理
https://www.leiphone.com/news/201703/84gDbSOgJcxiC3DW.html 本月初雷锋网报道,Facebook 开源了 AI 相似性搜索工具 Faiss.而在 ...