微信小程序demo1計(jì)算器
發(fā)布時間：2017-12-15 09:14 所屬欄目：小程序開發(fā)教程
一 微信小程序開發(fā)工具界面
二 目錄結(jié)構(gòu)
第一次進(jìn)到頁面它的目錄結(jié)構(gòu)如下：
三 需要注意的問題
(1)添加的新頁面文件，都需要在app.json中進(jìn)行配置，否則頁面報(bào)錯。
(2)工作原理 通過在<view></view>中添加事件 bindtap="btnClick" id="{{n9}}" 相當(dāng)于click事件。
在js代碼中，可以通過this.data.n9獲取數(shù)據(jù)，這些數(shù)據(jù)的定義都是在js中
通過在<view id="{{btn_a}}"><view>填寫id，在具體的函數(shù)中，event.target.id去判斷id是多少，進(jìn)行區(qū)分。就可以實(shí)現(xiàn)，不同標(biāo)簽的點(diǎn)擊，然后進(jìn)行業(yè)務(wù)邏輯。如果需要訪問數(shù)據(jù)，則是通過this.data.xx。
計(jì)算器的wxml頁面
- <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>
- // pages/cal/cal.js
- Page({
- /**
- * 頁面的初始數(shù)據(jù)
- */
- 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
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽頁面加載
- */
- onLoad: function (options) {
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
- */
- onReady: function () {
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽頁面顯示
- */
- onShow: function () {
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽頁面隱藏
- */
- onHide: function () {
- },
- /**
- * 生命周期函數(shù)--監(jiān)聽頁面卸載
- */
- onUnload: function () {
- },
- /**
- * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
- */
- onPullDownRefresh: function () {
- },
- /**
- * 頁面上拉觸底事件的處理函數(shù)
- */
- onReachBottom: function () {
- },
- /**
- * 用戶點(diǎn)擊右上角分享
- */
- onShareAppMessage: function () {
- },
- btnClick:function(event){
- //console.log('你按得鍵是'+event.target.id);
- //console.log('上一次' + this.data.is_num);
- 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){
- //如果上一次是數(shù)字
- if (op == ''){
- //這一次是數(shù)字
- 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{
- //上次不是數(shù)字
- if (data != 0) {
- //這一次是數(shù)字
- this.setData({ screenNum: this.data.screenNum + data });
- this.setData({ screenStr: this.data.screenStr + data });
- } else {
- return;
- }
- }
- //console.log(op+'aaaaa'+data);
- //console.log('現(xiàn)在是'+this.data.is_num);
- //console.log('screenNum' + this.data.screenNum);
- //console.log(this.data.screenStr);
- },
- btnJs:function(){
- console.log(this.data.screenNum);
- console.log(this.data.screenStr);
- var result=0;
- var strs = new Array(); //定義一數(shù)組
- strs = this.data.screenStr.split(","); //字符分割
- for (var i = 0; i < strs.length; i++) {
- //console.log(strs[i] + 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(){
- //把標(biāo)記恢復(fù)成默認(rèn)狀態(tài)
- this.setData({ screenNum: 0 });
- this.setData({ screenStr: 0 });
- this.setData({ is_num: 1 });
- }
- })
總結(jié)，在小程序的布局方面引入了相對單位rpx，需要在學(xué)習(xí)一下彈性盒子flex布局。對于js部分，和vue.js有些類似，都是對數(shù)據(jù)進(jìn)行綁定，簡化js的dom操作。這兩點(diǎn)還是需要再看看。
易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源
碼云倉庫:
本文地址：http://m.chqfk.com/wxmini/doc/course/18178.html 復(fù)制鏈接
如需定制請聯(lián)系易優(yōu)客服咨詢： 點(diǎn)擊咨詢
