一、项目文件目录解析

官方介绍：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='screen'>{{result}}</view>

</view>

</view>

</view>

</view>

<view class='item blue' bindtap='clickButton' id="{{history}}">History</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 });

}

})

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

一、项目文件目录解析

二、wxml文件

二、wxss文件

三、js文件

四、效果

猜你喜欢