一 微信小程序開(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è)面
-
<view class="content">
-
<view class="xianshi">{{screenNum}}</view>
-
<view class="anniu">
-
<view class="item blue" bindtap="btnClick" id="{{n9}}">9</view>
-
<view class="item blue" bindtap="btnClick" id="{{n8}}">8</view>
-
<view class="item blue" bindtap="btnClick" id="{{n7}}">7</view>
-
<view class="item blue" bindtap="btnClick" id="{{na}}">+</view>
-
</view>
-
<view class="anniu">
-
<view class="item blue" bindtap="btnClick" id="{{n6}}">6</view>
-
<view class="item blue" bindtap="btnClick" id="{{n5}}">5</view>
-
<view class="item blue" bindtap="btnClick" id="{{n4}}">4</view>
-
<view class="item blue" bindtap="btnClick" id="{{nb}}">-</view>
-
</view>
-
<view class="anniu">
-
<view class="item blue" bindtap="btnClick" id="{{n3}}">3</view>
-
<view class="item blue" bindtap="btnClick" id="{{n2}}">2</view>
-
<view class="item blue" bindtap="btnClick" id="{{n1}}">1</view>
-
<view class="item blue" bindtap="btnClick" id="{{nc}}">*</view>
-
</view>
-
<view class="anniu">
-
<view class="item blue" bindtap="btnClick" id="{{n0}}">0</view>
-
<view class="item blue" bindtap="btnClear">AC</view>
-
<view class="item blue" bindtap="btnJs">=</view>
-
<view class="item blue" bindtap="btnClick" id="{{nd}}">/</view>
-
</view>
-
</view>
-
-
Page({
-
-
-
-
-
data: {
-
n0: 0,
-
n1: 1,
-
n2: 2,
-
n3: 3,
-
n4: 4,
-
n5: 5,
-
n6: 6,
-
n7: 7,
-
n8: 8,
-
n9: 9,
-
na: '+',
-
nb: '-',
-
nc: '*',
-
nd: '/',
-
screenNum: 0,
-
screenStr: 0,
-
is_num:1
-
},
-
-
-
-
-
onLoad: function (options) {
-
-
},
-
-
-
-
-
onReady: function () {
-
-
},
-
-
-
-
-
onShow: function () {
-
-
},
-
-
-
-
-
onHide: function () {
-
-
},
-
-
-
-
-
onUnload: function () {
-
-
},
-
-
-
-
-
onPullDownRefresh: function () {
-
-
},
-
-
-
-
-
onReachBottom: function () {
-
-
},
-
-
-
-
-
onShareAppMessage: function () {
-
-
},
-
btnClick:function(event){
-
-
-
var op='';
-
var data=0;
-
var last_is_num = this.data.is_num;
-
-
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') {
-
data = event.target.id;
-
this.setData({ is_num: 1 });
-
}
-
if (event.target.id == '+' || event.target.id == '-' || event.target.id == '*' || event.target.id == '/') {
-
op = event.target.id;
-
this.setData({ is_num: 0 });
-
}
-
if (last_is_num==1){
-
-
if (op == ''){
-
-
if (this.data.screenNum!=0){
-
this.setData({ screenNum: this.data.screenNum + data });
-
this.setData({ screenStr: this.data.screenStr + data });
-
}else{
-
this.setData({ screenNum: data});
-
this.setData({ screenStr: data });
-
}
-
}else{
-
this.setData({ screenNum: this.data.screenNum + op });
-
this.setData({ screenStr: this.data.screenStr +',' +op+',' });
-
}
-
}else{
-
-
if (data != 0) {
-
-
this.setData({ screenNum: this.data.screenNum + data });
-
this.setData({ screenStr: this.data.screenStr + data });
-
} else {
-
return;
-
}
-
}
-
-
-
-
-
},
-
btnJs:function(){
-
console.log(this.data.screenNum);
-
console.log(this.data.screenStr);
-
var result=0;
-
var strs = new Array();
-
strs = this.data.screenStr.split(",");
-
for (var i = 0; i < strs.length; i++) {
-
-
if (strs[i]=='+'){
-
result = parseInt(strs[i - 1]) + parseInt(strs[i+1]);
-
}
-
if (strs[i] == '-') {
-
result = strs[i - 1] - strs[i + 1];
-
}
-
if (strs[i] == '*') {
-
result = strs[i - 1] * strs[i + 1];
-
}
-
if (strs[i] == '/') {
-
result = strs[i - 1] / strs[i + 1];
-
}
-
}
-
console.log('result:'+result);
-
this.setData({ screenNum: result});
-
this.setData({ screenStr: result });
-
},
-
btnClear:function(){
-
-
this.setData({ screenNum: 0 });
-
this.setData({ screenStr: 0 });
-
this.setData({ is_num: 1 });
-
}
-
})
總結(jié),在小程序的布局方面引入了相對(duì)單位rpx,需要在學(xué)習(xí)一下彈性盒子flex布局。對(duì)于js部分,和vue.js有些類似,都是對(duì)數(shù)據(jù)進(jìn)行綁定,簡(jiǎn)化js的dom操作。這兩點(diǎn)還是需要再看看。