Here we go. Today we are going to make a highly imitation Apple calculator, which looks like the one above.

<! <view class="button-container"> <view class="row"> <button class="number"> </button> <button class="number"  bindtap="tapAbsolute">+/_</button> <button class="number" bindtap="tapPercent">%</button> <button class="operator {{operator == '/' ? 'optActive' : / /view> <view class="row"> <button class="number" data-value="7" /" bindTap ="tapOperator"> bindtap="tapNumber">7</button> <button class="number" data-value="8" bindtap="tapNumber">8</button> <button class="number" data-value="9" bindtap="tapNumber">9</button> <button class="operator {{operator == '*' ? 'optActive' : </button> </view> <view class="row"> <button class="number" data-value="4" bindtap="tapNumber">4</button> <button class="number" data-value="5" bindtap="tapNumber">5</button> <button class="number" data-value="6" bindtap="tapNumber">6</button> <button class="operator {{operator == '-' ? 'optActive' : ''}}" data-value="-" bindtap="tapOperator">-</button> </view> <view class="row"> <button class="number" data-value="1" bindtap="tapNumber">1</button> <button class="number" data-value="2" bindtap="tapNumber">2</button> <button class="number" data-value="3" bindtap="tapNumber">3</button> <button class="operator {{operator == '+' ? 'optActive' : ''}}" data-value="+" bindtap="tapOperator">+</button> </view> <view class="row"> <button class="number large" data-value="0" bindtap="tapNumber">0</button> <button class="number" data-value="." bindtap="tapNumber">.</button> <button class="operator" bindtap="tapCalculate">=</button> </view> </view>Copy the code

First take a look at its overall layout, from top to bottom, from left to right, in fact, it is just a button. It is divided into number buttons and operator buttons.

// tapNumber: function(e) {// console.log(' tapNumber: ', e); const num = e.currentTarget.dataset['value']; if (num) { this.data.result += num; const fmtNumber = StringUtil.formatNumber(this.data.result); If (fmtnumber.length > 11) return; this.setData({ result: fmtNumber }); } else {console.warn(' corresponding data-value property exception! '); }},Copy the code

This is the response to clicking the button.

// tapOperator: function(e) {console.log('tap: ', e); const opt = e.currentTarget.dataset['value']; if (opt) { this.setData({ operator: opt }); }},Copy the code

This is the response after clicking the operator. So you add, subtract, multiply and divide.

Overall it’s not too difficult to implement. Want to learn wechat small program can pay attention to the public number: poetry like the code, discuss it together.