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

一、项目文件目录解析

官方介绍：
https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html
<https://developers.weixin.qq.com/miniprogram/dev/quickstart/basic/file.html>。

一句话：

* .json 后缀的 JSON 配置文件
* .wxml 后缀的 WXML 模板文件
* .wxss 后缀的 WXSS 样式文件
* .js 后缀的 JS 脚本逻辑文件
其中
WXML相当于网页的html，而WXSS就是css，编写风格和html基本相似，之前也学了JS，话不多说，现在开始撸代码，通过一个简单的计算器实例基本了解小程序开发。

二、wxml文件


<view class='test-bg'>

<view class='screen'>{{result}}</view>

<view class='btnGroup'>

<view class='item orange' bindtap='clickButton' id="{{back}}">Back</view>

<view class='item orange' bindtap='clickButton' id="{{C}}">C</view>

<view class='item orange' bindtap='clickButton' id="{{addSub}}">+/-</view>

<view class='item orange' bindtap='clickButton' id="{{add}}">+</view>

</view>

<view class='btnGroup'>

<view class='item blue' bindtap='clickButton' id="{{id9}}">9</view>

<view class='item blue' bindtap='clickButton' id="{{id8}}">8</view>

<view class='item blue' bindtap='clickButton' id="{{id7}}">7</view>

<view class='item orange' bindtap='clickButton' id="{{sub}}">-</view>

</view>

<view class='btnGroup'>

<view class='item blue' bindtap='clickButton' id="{{id6}}">6</view>

<view class='item blue' bindtap='clickButton' id="{{id5}}">5</view>

<view class='item blue' bindtap='clickButton' id="{{id4}}">4</view>

<view class='item orange' bindtap='clickButton' id="{{mut}}">×</view>

</view>

<view class='btnGroup'>

<view class='item blue' bindtap='clickButton' id="{{id3}}">3</view>

<view class='item blue' bindtap='clickButton' id="{{id2}}">2</view>

<view class='item blue' bindtap='clickButton' id="{{id1}}">1</view>

<view class='item orange' bindtap='clickButton' id="{{div}}">÷</view>

</view>

<view class='btnGroup'>

<view class='item blue' bindtap='clickButton' id="{{id0}}">0</view>

<view class='item blue' bindtap='clickButton' id="{{dot}}">.</view>

<view class='item blue' bindtap='clickButton' id="{{history}}">History</view>

<view class='item orange' bindtap='clickButton' id="{{equ}}">=</view>

</view>

</view>

二、wxss文件


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;

}

三、js文件


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<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 < 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 < 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 < subArray.length; j++) {

subSum /= Number(subArray[j]);

}

sum *= subSum;

}

}

return sum;

},

// 是否以运算符结尾

isOperatorEnd:function(str){

for(var i = 0;i<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') {

 

}

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) &&
this.isOperatorEnd(event.target.id)) return;

// 如果计算结果有小数点，直到输入运算符前不能再输入小数点

if (this.data.completeCalculate&&this.data.result.indexOf('.') != -1 &&
event.target.id == '.')return;

for (var i = 0; i < 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 });

}

}

})

四、效果

• « 上一篇：Python机器学习（1）——异常点检测
• » 下一篇：Drive.ai驾驶日记：有一天，我们让一辆无人车连续行驶了24小时……