微信小程序入门学习-- 简易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>
View Code

{{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 })
call.js

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 }
call.wxss

其他：跳转到历史记录

增加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

posted @ 2017-07-15 20:07  永醉雨辰  阅读(516)  评论(0)  编辑  收藏  举报