微信小程序（看文档写实例一）微信小程序计算器实例

野性酷女 2022-05-13 23:16 265阅读 0赞

# 一、项目文件目录解析 #

官方介绍：[https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html][https_developers.weixin.qq.com_miniprogram_dev_quickstart_basic_file.html]。

一句话：

1.  `.json` 后缀的 `JSON` 配置文件
2.  `.wxml` 后缀的 `WXML` 模板文件
3.  `.wxss` 后缀的 `WXSS` 样式文件
4.  `.js` 后缀的 `JS` 脚本逻辑文件

其中`WXML相当于网页的html，而WXSS就是css，编写风格和html基本相似，之前也学了JS，话不多说，现在开始撸代码，通过一个简单的计算器实例基本了解小程序开发。`

# 二、wxml文件 #

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> &lt;view class='test-bg'&gt; &lt;view class='screen'&gt;{ {result}}&lt;/view&gt; &lt;view class='btnGroup'&gt; &lt;view class='item orange' bindtap='clickButton' id="{ {back}}"&gt;Back&lt;/view&gt; &lt;view class='item orange' bindtap='clickButton' id="{ {C}}"&gt;C&lt;/view&gt; &lt;view class='item orange' bindtap='clickButton' id="{ {addSub}}"&gt;+/-&lt;/view&gt; &lt;view class='item orange' bindtap='clickButton' id="{ {add}}"&gt;+&lt;/view&gt; &lt;/view&gt; &lt;view class='btnGroup'&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id9}}"&gt;9&lt;/view&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id8}}"&gt;8&lt;/view&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id7}}"&gt;7&lt;/view&gt; &lt;view class='item orange' bindtap='clickButton' id="{ {sub}}"&gt;-&lt;/view&gt; &lt;/view&gt; &lt;view class='btnGroup'&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id6}}"&gt;6&lt;/view&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id5}}"&gt;5&lt;/view&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id4}}"&gt;4&lt;/view&gt; &lt;view class='item orange' bindtap='clickButton' id="{ {mut}}"&gt;×&lt;/view&gt; &lt;/view&gt; &lt;view class='btnGroup'&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id3}}"&gt;3&lt;/view&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id2}}"&gt;2&lt;/view&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id1}}"&gt;1&lt;/view&gt; &lt;view class='item orange' bindtap='clickButton' id="{ {div}}"&gt;÷&lt;/view&gt; &lt;/view&gt; &lt;view class='btnGroup'&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {id0}}"&gt;0&lt;/view&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {dot}}"&gt;.&lt;/view&gt; &lt;view class='item blue' bindtap='clickButton' id="{ {history}}"&gt;History&lt;/view&gt; &lt;view class='item orange' bindtap='clickButton' id="{ {equ}}"&gt;=&lt;/view&gt; &lt;/view&gt; &lt;/view&gt; </td> 
 </tr> 
 </tbody> 
</table>

# 二、wxss文件 #

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> page{ width: 100%; height: 100%; } .test-bg{ width: 100%; height: 100%; background-color: #70c7da; padding-top: 30rpx; } .bg-image{ display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,.2); } .screen{ background-color: white; border-radius: 5rpx; text-align: right; width: 720rpx; height: 100rpx; line-height: 100rpx; padding: 10rpx; margin-bottom: 30rpx; } .btnGroup{ display: flex; flex-direction: row; } .item{ width: 160rpx; min-height: 150rpx; margin: 10rpx; text-shadow: 0 1px 1px rgba(0,0,0,.3); border-radius: 5rpx; text-align: center; line-height: 150rpx; } .orange{ /* 前景色 */ color: #fef4e9; border: solid 1px #da7c0c; /* 背景色 */ background: #f78d1d; } .blue{ /* 前景色 */ color: #fef4e9; border: solid 1px #0076a3; /* 背景色 */ background: #0095cd; } </td> 
 </tr> 
 </tbody> 
</table>

# 三、js文件 #

<table style="width:500px;"> 
 <tbody> 
 <tr> 
 <td> Page({ data: { back: 'back', C: 'C', addSub: 'addSub', add: '+', sub: '-', mut: '×', div: '÷', equ: '=', history: 'history', dot: '.', id0: '0', id1: '1', id2: '2', id3: '3', id4: '4', id5: '5', id6: '6', id7: '7', id8: '8', id9: '9', result:'0', valiBackOfArray: ['+', '-', '×', '÷', '.'], completeCalculate:false }, // 计算结果 calculate: function (str) { // 判断是不是有负数 var isNagativeNum = false; if (str.charAt(0) == '-') { str = str.replace('-', '').replace('(', '').replace(')', ''); isNagativeNum = true; } // 对字符串解析并运算 var addArray = str.split('+'); var sum = 0.0; for(var i =0;i&lt;addArray.length;i++){ if (addArray[i].indexOf('-') == -1) { if (addArray[i].indexOf('×') != -1 || addArray[i].indexOf('÷') != -1) sum += this.calculateMutDiv(addArray[i]); else sum += Number(addArray[i]); } else{ var subArray = addArray[i].split('-'); var subSum = 0; if (subArray[0].indexOf('×') != -1 || subArray[0].indexOf('÷') != -1) subSum = this.calculateMutDiv(subArray[0]); else subSum = Number(subArray[0]); for (var j = 1; j &lt; subArray.length; j++) { if(subArray[i].indexOf('×') != -1 || subArray[i].indexOf('÷') != -1) subSum -= this.calculateMutDiv(subArray[j]); else subSum -= Number(subArray[j]); } sum+=subSum; } } if(isNagativeNum)return (-sum).toString(); else return sum.toString(); }, // 分块乘除运算 calculateMutDiv: function (str) { var addArray = str.split('×'); var sum = 1.0; for (var i = 0; i &lt; addArray.length; i++) { if (addArray[i].indexOf('÷') == -1) { sum *= Number(addArray[i]); } else { var subArray = addArray[i].split('÷'); var subSum = Number(subArray[0]); for (var j = 1; j &lt; subArray.length; j++) { subSum /= Number(subArray[j]); } sum *= subSum; } } return sum; }, // 是否以运算符结尾 isOperatorEnd:function(str){ for(var i = 0;i&lt;this.data.valiBackOfArray.length;i++){ if (str.charAt(str.length - 1) == this.data.valiBackOfArray[i])return true; } return false; }, clickButton:function(event){ if (this.data.result==0){ if (event.target.id == 'back' || event.target.id == 'C' || event.target.id == 'addSub' || event.target.id == 'history' || event.target.id == '+' || event.target.id == '-' || event.target.id == '×' || event.target.id == '÷' || event.target.id == '=')return; this.setData({result:event.target.id}); } else if (event.target.id == 'back' ) { this.setData({ result: this.data.result.length ==1?'0':this.data.result.substring(0, this.data.result.length-1) }); } else if (event.target.id == 'C') { this.setData({ result: '0'}); } else if (event.target.id == 'addSub') { var r = this.data.result; if (this.isOperatorEnd(r)) return; if (r.charAt(0) == '-') this.setData({ result: r.replace('-', '').replace('(', '').replace(')', '') }); else this.setData({ result: '-('+r+')'}); } else if (event.target.id == 'history') { &nbsp; } else if (event.target.id=='='){ if (this.isOperatorEnd(this.data.result))return; this.setData({result:this.calculate(this.data.result)}); this.setData({completeCalculate: true}); } else{ if (this.isOperatorEnd(this.data.result) &amp;&amp; this.isOperatorEnd(event.target.id)) return; // 如果计算结果有小数点，直到输入运算符前不能再输入小数点 if (this.data.completeCalculate&amp;&amp;this.data.result.indexOf('.') != -1 &amp;&amp; event.target.id == '.')return; for (var i = 0; i &lt; this.data.valiBackOfArray.length -1 ; i++) { if (this.data.valiBackOfArray[i] == event.target.id){ this.setData({ completeCalculate: false }); break; } } this.setData({ result: this.data.result + event.target.id }); } } }) </td> 
 </tr> 
 </tbody> 
</table>

# 四、效果 #

![70][]

![70 1][]

[https_developers.weixin.qq.com_miniprogram_dev_quickstart_basic_file.html]: https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html
[70]: /images/20220514/e0f2ac3740ac4b6b80efdde7c078881a.png
[70 1]: /images/20220514/94f12d4b2a3f4f389469b7ad30c28f08.png