微信小程序入门学习-- 简易Demo：计算器
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了微信小程序入门学习-- 简易Demo：计算器相关的知识，希望对你有一定的参考价值。
简单学习下微信小程序
官网 简易教程 · 小程序
https://mp.weixin.qq.com/debug/wxadoc/dev/
需要通过开发者工具，来完成小程序创建和代码编辑。
下载安装，运行程序，点击添加项目，弹窗，可以选无AppId，选择程序路径，勾选quick start。
app.json 配置文件
wxxml --相当于html
wxss--相当于css
在pages文件夹新建文件夹
修改配置app.json 这样系统启动时会运行call文件项目
"pages":[ "pages/call/call", "pages/logs/logs" ]
call.wxxml
1 <view class="content"> 2 <view class="screen">{{screenData}}</view> 3 4 <view class="btnGroup"> 5 <view class="item orange" bindtap="clickButton" id="{{id1}}">back</view> 6 <view class="item orange" bindtap="clickButton" id="{{id2}}">clear</view> 7 <view class="item orange" bindtap="clickButton" id="{{id3}}">+/-</view> 8 <view class="item orange" bindtap="clickButton" id="{{id4}}">+</view> 9 </view> 10 <view class="btnGroup"> 11 <view class="item blue" bindtap="clickButton" id="{{id5}}">9</view> 12 <view class="item blue" bindtap="clickButton" id="{{id6}}">8</view> 13 <view class="item blue" bindtap="clickButton" id="{{id7}}">7</view> 14 <view class="item orange" bindtap="clickButton" id="{{id8}}">-</view> 15 </view> 16 17 <view class="btnGroup"> 18 <view class="item blue" bindtap="clickButton" id="{{id9}}">6</view> 19 <view class="item blue" bindtap="clickButton" id="{{id10}}">5</view> 20 <view class="item blue" bindtap="clickButton" id="{{id11}}">4</view> 21 <view class="item orange" bindtap="clickButton" id="{{id12}}">*</view> 22 </view> 23 <view class="btnGroup"> 24 <view class="item blue" bindtap="clickButton" id="{{id13}}">3</view> 25 <view class="item blue" bindtap="clickButton" id="{{id14}}">2</view> 26 <view class="item blue" bindtap="clickButton" id="{{id15}}">1</view> 27 <view class="item orange" bindtap="clickButton" id="{{id16}}">/</view> 28 </view> 29 <view class="btnGroup"> 30 <view class="item blue" bindtap="clickButton" id="{{id17}}">0</view> 31 <view class="item blue" bindtap="clickButton" id="{{id18}}">.</view> 32 <view class="item blue" bindtap="history" id="{{id19}}">history</view> 33 <view class="item orange" bindtap="clickButton" id="{{id20}}">=</view> 34 </view> 35 36 </view>
{{screenData}} : {{}}绑定数据，这里表示绑定data中的 screenData。
bindtap="clickButton" :绑定点击事件
call.js
1 Page({ 2 3 /** 4 * 页面的初始数据 5 */ 6 data: { 7 id1: "back", 8 id2: "clear", 9 id3: "positive", 10 id4: "+", 11 12 id5: "9", 13 id6: "8", 14 id7: "7", 15 id8: "-", 16 17 id9: "6", 18 id10: "5", 19 id11: "4", 20 id12: "*", 21 22 id13: "3", 23 id14: "2", 24 id15: "1", 25 id16: "/", 26 27 id17: "0", 28 id18: ".", 29 id19: "history", 30 id20: "=", 31 32 screenData : "0", 33 lastIsOperator : false, 34 arr : [], 35 logs : [] 36 }, 37 38 /** 39 * 生命周期函数--监听页面加载 40 */ 41 onLoad: function (options) { 42 43 }, 44 45 /** 46 * 生命周期函数--监听页面初次渲染完成 47 */ 48 onReady: function () { 49 50 }, 51 52 /** 53 * 生命周期函数--监听页面显示 54 */ 55 onShow: function () { 56 57 }, 58 59 /** 60 * 生命周期函数--监听页面隐藏 61 */ 62 onHide: function () { 63 64 }, 65 66 /** 67 * 生命周期函数--监听页面卸载 68 */ 69 onUnload: function () { 70 71 }, 72 73 /** 74 * 页面相关事件处理函数--监听用户下拉动作 75 */ 76 onPullDownRefresh: function () { 77 78 }, 79 80 /** 81 * 页面上拉触底事件的处理函数 82 */ 83 onReachBottom: function () { 84 85 }, 86 87 /** 88 * 用户点击右上角分享 89 */ 90 onShareAppMessage: function () { 91 92 }, 93 history: function (event){ 94 wx.navigateTo({ 95 url: ‘../list/list‘ 96 }) 97 98 }, 99 clickButton:function(event){ 100 console.log(event.target.id); 101 102 var id = event.target.id; 103 104 if (id == this.data.id1){ //BACK 105 var data = this.data.screenData; 106 if(data == 0){ 107 return; 108 } 109 data = data.substring(0, data.length-1); 110 if(data == "" || data == "."){ 111 data = 0; 112 } 113 this.setData({ screenData: data }); 114 this.data.arr.pop(); //退格 -1 115 } 116 else if (id == this.data.id2){ //clear 117 this.setData({ screenData: "0" }); 118 this.data.arr.length = 0; //数组清空 119 120 } else if (id == this.data.id3) { // positive negative 121 var data = this.data.screenData; 122 if(data == 0){ 123 return; 124 } 125 var firstChar = data.substring(0,1); 126 if (firstChar == "-"){ 127 data = data.substring(1); 128 this.data.arr.shift();//去除第一个元素 129 }else{ 130 data = "-" + data; 131 this.data.arr.unshift("-"); //第一个元素增加"-" 132 } 133 this.setData({ screenData: data }); 134 135 } else if (id == this.data.id20) { // = 136 var data = this.data.screenData; 137 if (data == 0){ 138 return; 139 } 140 var lastChar = data.substring(data.length - 1, data.length); 141 if(isNaN(lastChar)){ 142 return; 143 } 144 var num = ""; 145 var lastOperator; 146 var arr = this.data.arr; 147 var optarr =[]; 148 for (i in arr){ 149 if (isNaN(arr[i]) == false || arr[i] == this.data.id18 || arr[i] == this.data.id3 ){ 150 num += arr[i]; 151 }else{ 152 lastOperator = arr[i]; 153 optarr.push(num); 154 optarr.push(arr[i]); 155 num = ""; 156 } 157 } 158 optarr.push(Number(num)); 159 var result = Number(optarr[0])*1.0; 160 console.log(optarr); 161 console.log(result); 162 163 for(var i=1, len = optarr.length; i<len; i++){ 164 if(isNaN(optarr[i])){ 165 if (optarr[i] == this.data.id4){ 166 result += Number(optarr[i+1]); 167 } else if (optarr[i] == this.data.id8) { 168 result -= Number(optarr[i + 1]); 169 } else if (optarr[i] == this.data.id12) { 170 result *= Number(optarr[i + 1]); 171 } else if (optarr[i] == this.data.id16) { 172 result /= Number(optarr[i + 1]); 173 } 174 } 175 } 176 this.data.logs.push(data + "=" + result); //存入history 177 wx.setStorageSync("calllogs", this.data.logs); 178 console.log("calllogs:" + wx.getStorageSync("calllogs")); 179 this.data.arr.length = 0; //数组清空 180 this.data.arr.push(result); 181 this.setData({screenData : result + ""}); 182 183 }else{ //click number or +-*/ 184 if (id == this.data.id4 || id == this.data.id8 || id == this.data.id12 || id == this.data.id16) { 185 186 if (this.data.lastIsOperator == true || this.data.screenData == 0) { 187 return; 188 } 189 } 190 191 var sdata = this.data.screenData == 0 ? "" : this.data.screenData; 192 var data = sdata + event.target.id ; 193 194 this.setData({ screenData: data }); 195 this.data.arr.push(id); //event传入 每次点击的放入数组 196 197 198 if (id == this.data.id4 || id == this.data.id8 || id == this.data.id14 || id == this.data.id16){ 199 this.setData({ lastIsOperator: true }); 200 }else{ 201 this.setData({ lastIsOperator: false }); 202 } 203 } 204 } 205 })
data:数据
clickButton：自定义事件/方法
--event.target.id：页面目标元素的id。可以在点击事件clickButton 打断点看下event对象
--this.data.id1 ：“back”(this当前pages对象 )，即代表下面内容
Page({ /** * 页面的初始数据 */ data: { id1: "back" ... }
this.setData({ screenData: "0" }); //设置数据 具体查看api
1 /* pages/call/call.wxss */ 2 3 .content{ 4 height: 100%; 5 display: flex; 6 display: -webkit-flex; 7 flex-direction: column; 8 align-items: center; 9 box-sizing: border-box; 10 padding-top: 30rpx; 11 } 12 .screen{ 13 width: 720rpx; 14 height: 100rpx; 15 line-height: 100rpx; 16 padding-right: 10rpx; 17 margin-bottom: 30rpx; 18 border-radius: 5px; 19 border:1px solid #f8f8f8; 20 } 21 .btnCroup{ 22 display: -webkit-flex; 23 display: flex; 24 flex-direction: row; 25 } 26 .item{ 27 width:150rpx; 28 min-height:100rpx; 29 margin:5rpx; 30 border-radius:5px; 31 text-align:center; 32 line-height:150rpx; 33 float :left; 34 } 35 .orange{ 36 background-color: #af4f00; 37 } 38 .blue{ 39 background-color: #0a4ff0; 40 }
其他：跳转到历史记录
增加list
,并修改app.json文件
"pages":[ "pages/call/call", "pages/list/list" ]
在call.js中 wx.navigateTo() //API
history: function (event){ wx.navigateTo({ url: ‘../list/list‘ }) },
利用 wx.setStorageSync("calllogs", this.data.logs); //类似sessionStorage页面间传送数据
在list.js 关键代码
data: { logs:[] }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var logs = wx.getStorageSync("calllogs"); this.setData({ "logs": logs}); },
list.wxml
<view class="content"> <block wx:for="{{logs}}" wx:for-item="log"> <view class="item">{{log}} </view> </block> </view>
此demo参考视频做的：
http://www.iqiyi.com/w_19rsuqbvyh.html
以上是关于微信小程序入门学习-- 简易Demo：计算器的主要内容，如果未能解决你的问题，请参考以下文章