小程序模板網(wǎng)

微信小程序demo1計(jì)算器

發(fā)布時(shí)間：2017-12-15 09:14 所屬欄目：小程序開(kāi)發(fā)教程

一 微信小程序開(kāi)發(fā)工具界面

 

二 目錄結(jié)構(gòu)

第一次進(jìn)到頁(yè)面它的目錄結(jié)構(gòu)如下：

三 需要注意的問(wèn)題

(1)添加的新頁(yè)面文件，都需要在app.json中進(jìn)行配置，否則頁(yè)面報(bào)錯(cuò)。

(2)工作原理  通過(guò)在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}"   相當(dāng)于click事件。

在js代碼中，可以通過(guò)this.data.n9獲取數(shù)據(jù)，這些數(shù)據(jù)的定義都是在js中

通過(guò)在<view id="{{btn_a}}"><view>填寫(xiě)id，在具體的函數(shù)中，event.target.id去判斷id是多少，進(jìn)行區(qū)分。就可以實(shí)現(xiàn)，不同標(biāo)簽的點(diǎn)擊，然后進(jìn)行業(yè)務(wù)邏輯。如果需要訪問(wèn)數(shù)據(jù)，則是通過(guò)this.data.xx。

計(jì)算器的wxml頁(yè)面

 

[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.    * 頁(yè)面的初始數(shù)據(jù) 
  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.    * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面加載 
  29.    */  
  30.   onLoad: function (options) {  
  31.     
  32.   },  
  33.   
  34.   /** 
  35.    * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 
  36.    */  
  37.   onReady: function () {  
  38.     
  39.   },  
  40.   
  41.   /** 
  42.    * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 
  43.    */  
  44.   onShow: function () {  
  45.     
  46.   },  
  47.   
  48.   /** 
  49.    * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 
  50.    */  
  51.   onHide: function () {  
  52.     
  53.   },  
  54.   
  55.   /** 
  56.    * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 
  57.    */  
  58.   onUnload: function () {  
  59.     
  60.   },  
  61.   
  62.   /** 
  63.    * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作 
  64.    */  
  65.   onPullDownRefresh: function () {  
  66.     
  67.   },  
  68.   
  69.   /** 
  70.    * 頁(yè)面上拉觸底事件的處理函數(shù) 
  71.    */  
  72.   onReachBottom: function () {  
  73.     
  74.   },  
  75.   
  76.   /** 
  77.    * 用戶點(diǎn)擊右上角分享 
  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.       //如果上一次是數(shù)字  
  99.       if (op == ''){  
  100.         //這一次是數(shù)字  
  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.       //上次不是數(shù)字  
  114.       if (data != 0) {  
  115.         //這一次是數(shù)字  
  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('現(xiàn)在是'+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(); //定義一數(shù)組   
  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.     //把標(biāo)記恢復(fù)成默認(rèn)狀態(tài)  
  154.     this.setData({ screenNum: 0 });  
  155.     this.setData({ screenStr: 0 });  
  156.     this.setData({ is_num: 1 });        
  157.   }  
  158. })  


總結(jié)，在小程序的布局方面引入了相對(duì)單位rpx，需要在學(xué)習(xí)一下彈性盒子flex布局。對(duì)于js部分，和vue.js有些類似，都是對(duì)數(shù)據(jù)進(jìn)行綁定，簡(jiǎn)化js的dom操作。這兩點(diǎn)還是需要再看看。


易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址：http://22321a.com/wxmini/doc/course/18178.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢
QQ在線咨詢