微信小程序?qū)崿F(xiàn)計(jì)算器功能
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)計(jì)算器功能的具體代碼,供大家參考,具體內(nèi)容如下
一、微信小程序開(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>
// pages/cal/cal.js Page({ /** * 頁(yè)面的初始數(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)聽(tīng)頁(yè)面加載 */ onLoad: function (options) { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面初次渲染完成 */ onReady: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面顯示 */ onShow: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面隱藏 */ onHide: function () { }, /** * 生命周期函數(shù)--監(jiān)聽(tīng)頁(yè)面卸載 */ onUnload: function () { }, /** * 頁(yè)面相關(guān)事件處理函數(shù)--監(jiān)聽(tīng)用戶下拉動(dòng)作 */ onPullDownRefresh: function () { }, /** * 頁(yè)面上拉觸底事件的處理函數(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é),在小程序的布局方面引入了相對(duì)單位rpx,需要在學(xué)習(xí)一下彈性盒子flex布局。對(duì)于js部分,和vue.js有些類似,都是對(duì)數(shù)據(jù)進(jìn)行綁定,簡(jiǎn)化js的dom操作。這兩點(diǎn)還是需要再看看。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
layui實(shí)現(xiàn)下拉復(fù)選功能的例子(包括數(shù)據(jù)的回顯與上傳)
今天小編大家分享一篇layui實(shí)現(xiàn)下拉復(fù)選功能的例子(包括數(shù)據(jù)的回顯與上傳),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于echarts餅圖各個(gè)板塊之間的空隙如何實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12從盛大通行證上摘下來(lái)的身份證驗(yàn)證js代碼
偶然發(fā)現(xiàn)盛大通行證上的身份證驗(yàn)證代碼,特扒下來(lái),方便大家的使用。2011-01-01js 函數(shù)的執(zhí)行環(huán)境和作用域鏈的深入解析
在js中對(duì)象的外在表現(xiàn)形式為函數(shù)。2009-11-11Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解
這篇文章主要為大家介紹了Next.js路由組使用之組織路由結(jié)構(gòu)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10深入了解Hybrid App技術(shù)的相關(guān)知識(shí)
這篇文章主要介紹了深入了解Hybrid App技術(shù)的相關(guān)知識(shí),Hybrid App(混合模式移動(dòng)應(yīng)用)是指介于web-app、native-app這兩者之間的app,兼具" Native App良好用戶交互體驗(yàn)的優(yōu)勢(shì) "和" Web App跨平臺(tái)開(kāi)發(fā)的優(yōu)勢(shì) ",需要的朋友可以參考下2019-07-07基于JQuery+HTML+JavaScript實(shí)現(xiàn)地圖位置選取和地址模糊查詢
本文詳細(xì)講解了如何使用 JQuery+HTML+JavaScript 實(shí)現(xiàn)移動(dòng)端頁(yè)面中的地圖位置選取功能,本文逐步展示了如何構(gòu)建基本的地圖頁(yè)面,如何通過(guò)點(diǎn)擊地圖獲取經(jīng)緯度和地理信息,以及如何實(shí)現(xiàn)模糊查詢地址并在地圖上標(biāo)注,感興趣的小伙伴跟著小編一起來(lái)看看吧2024-07-07