小程序模板网

首页 小程序模板网 开发文档 小程序开发教程正文

微信小程序demo1计算器

发布时间：2017-12-15 09:14 所属栏目：小程序开发教程

一 微信小程序开发工具界面

 

二 目录结构

第一次进到页面它的目录结构如下：

三 需要注意的问题

(1)添加的新页面文件，都需要在app.json中进行配置，否则页面报错。

(2)工作原理  通过在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}"   相当于click事件。

在js代码中，可以通过this.data.n9获取数据，这些数据的定义都是在js中

通过在<view id="{{btn_a}}"><view>填写id，在具体的函数中，event.target.id去判断id是多少，进行区分。就可以实现，不同标签的点击，然后进行业务逻辑。如果需要访问数据，则是通过this.data.xx。

计算器的wxml页面

 

[html] view plain copy
 
  1. <view class="content">  
  2.   <view class="xianshi">{{screenNum}}</view>  
  3.   <view class="anniu">  
  4.     <view class="item blue" bindtap="btnClick" id="{{n9}}">9</view>  
  5.     <view class="item blue" bindtap="btnClick" id="{{n8}}">8</view>  
  6.     <view class="item blue" bindtap="btnClick" id="{{n7}}">7</view>  
  7.     <view class="item blue" bindtap="btnClick" id="{{na}}">+</view>  
  8.   </view>  
  9.    <view class="anniu">  
  10.     <view class="item blue" bindtap="btnClick" id="{{n6}}">6</view>  
  11.     <view class="item blue" bindtap="btnClick" id="{{n5}}">5</view>  
  12.     <view class="item blue" bindtap="btnClick" id="{{n4}}">4</view>  
  13.     <view class="item blue" bindtap="btnClick" id="{{nb}}">-</view>  
  14.   </view>  
  15.    <view class="anniu">  
  16.     <view class="item blue" bindtap="btnClick" id="{{n3}}">3</view>  
  17.     <view class="item blue" bindtap="btnClick" id="{{n2}}">2</view>  
  18.     <view class="item blue" bindtap="btnClick" id="{{n1}}">1</view>  
  19.     <view class="item blue" bindtap="btnClick" id="{{nc}}">*</view>  
  20.   </view>  
  21.    <view class="anniu">  
  22.     <view class="item blue" bindtap="btnClick" id="{{n0}}">0</view>  
  23.     <view class="item blue" bindtap="btnClear">AC</view>  
  24.     <view class="item blue" bindtap="btnJs">=</view>  
  25.     <view class="item blue" bindtap="btnClick" id="{{nd}}">/</view>  
  26.   </view>  
  27. </view>  
[javascript] view plain copy
 
  1. // pages/cal/cal.js  
  2. Page({  
  3.   
  4.   /** 
  5.    * 页面的初始数据 
  6.    */  
  7.   data: {  
  8.    n0: 0,  
  9.    n1: 1,  
  10.    n2: 2,  
  11.    n3: 3,  
  12.    n4: 4,  
  13.    n5: 5,  
  14.    n6: 6,  
  15.    n7: 7,  
  16.    n8: 8,  
  17.    n9: 9,  
  18.    na: '+',  
  19.    nb: '-',  
  20.    nc: '*',  
  21.    nd: '/',  
  22.    screenNum: 0,  
  23.    screenStr: 0,  
  24.    is_num:1  
  25.   },  
  26.   
  27.   /** 
  28.    * 生命周期函数--监听页面加载 
  29.    */  
  30.   onLoad: function (options) {  
  31.     
  32.   },  
  33.   
  34.   /** 
  35.    * 生命周期函数--监听页面初次渲染完成 
  36.    */  
  37.   onReady: function () {  
  38.     
  39.   },  
  40.   
  41.   /** 
  42.    * 生命周期函数--监听页面显示 
  43.    */  
  44.   onShow: function () {  
  45.     
  46.   },  
  47.   
  48.   /** 
  49.    * 生命周期函数--监听页面隐藏 
  50.    */  
  51.   onHide: function () {  
  52.     
  53.   },  
  54.   
  55.   /** 
  56.    * 生命周期函数--监听页面卸载 
  57.    */  
  58.   onUnload: function () {  
  59.     
  60.   },  
  61.   
  62.   /** 
  63.    * 页面相关事件处理函数--监听用户下拉动作 
  64.    */  
  65.   onPullDownRefresh: function () {  
  66.     
  67.   },  
  68.   
  69.   /** 
  70.    * 页面上拉触底事件的处理函数 
  71.    */  
  72.   onReachBottom: function () {  
  73.     
  74.   },  
  75.   
  76.   /** 
  77.    * 用户点击右上角分享 
  78.    */  
  79.   onShareAppMessage: function () {  
  80.     
  81.   },  
  82.   btnClick:function(event){  
  83.     //console.log('你按得键是'+event.target.id);  
  84.     //console.log('上一次' + this.data.is_num);  
  85.     var op='';  
  86.     var data=0;  
  87.     var last_is_num = this.data.is_num;  
  88.     //这次输入的是什么  
  89.     if (event.target.id == '9' || event.target.id == '8' || event.target.id == '7' || event.target.id == '6' || event.target.id == '5' || event.target.id == '4' || event.target.id == '3' || event.target.id == '2' || event.target.id == '1' || event.target.id == '0') {  
  90.       data = event.target.id;  
  91.       this.setData({ is_num: 1 });  
  92.     }  
  93.     if (event.target.id == '+' || event.target.id == '-' || event.target.id == '*' || event.target.id == '/') {  
  94.       op = event.target.id;  
  95.       this.setData({ is_num: 0 });  
  96.     }  
  97.     if (last_is_num==1){  
  98.       //如果上一次是数字  
  99.       if (op == ''){  
  100.         //这一次是数字  
  101.         if (this.data.screenNum!=0){  
  102.           this.setData({ screenNum: this.data.screenNum + data });  
  103.           this.setData({ screenStr: this.data.screenStr + data });  
  104.         }else{  
  105.           this.setData({ screenNum: data});  
  106.           this.setData({ screenStr: data });  
  107.         }  
  108.       }else{  
  109.         this.setData({ screenNum: this.data.screenNum + op });  
  110.         this.setData({ screenStr: this.data.screenStr +',' +op+',' });  
  111.       }  
  112.     }else{  
  113.       //上次不是数字  
  114.       if (data != 0) {  
  115.         //这一次是数字  
  116.         this.setData({ screenNum: this.data.screenNum + data });  
  117.         this.setData({ screenStr: this.data.screenStr + data });  
  118.       } else {  
  119.         return;  
  120.       }  
  121.     }  
  122.     //console.log(op+'aaaaa'+data);  
  123.     //console.log('现在是'+this.data.is_num);  
  124.     //console.log('screenNum' + this.data.screenNum);  
  125.     //console.log(this.data.screenStr);  
  126.   },  
  127.   btnJs:function(){  
  128.     console.log(this.data.screenNum);  
  129.     console.log(this.data.screenStr);  
  130.     var result=0;  
  131.     var strs = new Array(); //定义一数组   
  132.     strs = this.data.screenStr.split(","); //字符分割  
  133.     for (var i = 0; i < strs.length; i++) {  
  134.       //console.log(strs[i] + i); //分割后的字符输出  
  135.       if (strs[i]=='+'){  
  136.         result = parseInt(strs[i - 1]) + parseInt(strs[i+1]);  
  137.       }  
  138.       if (strs[i] == '-') {  
  139.         result = strs[i - 1] - strs[i + 1];  
  140.       }  
  141.       if (strs[i] == '*') {  
  142.         result = strs[i - 1] * strs[i + 1];  
  143.       }  
  144.       if (strs[i] == '/') {  
  145.         result = strs[i - 1] / strs[i + 1];  
  146.       }      
  147.     }  
  148.     console.log('result:'+result);  
  149.     this.setData({ screenNum: result});  
  150.     this.setData({ screenStr: result });      
  151.   },  
  152.   btnClear:function(){  
  153.     //把标记恢复成默认状态  
  154.     this.setData({ screenNum: 0 });  
  155.     this.setData({ screenStr: 0 });  
  156.     this.setData({ is_num: 1 });        
  157.   }  
  158. })  


总结，在小程序的布局方面引入了相对单位rpx，需要在学习一下弹性盒子flex布局。对于js部分，和vue.js有些类似，都是对数据进行绑定，简化js的dom操作。这两点还是需要再看看。


易优小程序（企业版）+灵活api+前后代码开源 码云仓库:starfork
本文地址：https://www.eyoucms.com/wxmini/doc/course/18178.html 复制链接 如需定制请联系易优客服咨询：800182392 点击咨询

免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

产品

服务

帮助

关于

工作日 8:30-12:00 14:30-18:00
周六及部分节假日提供值班服务

联系我们
QQ在线咨询