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

<view class="content">
  <view class="screen">{{screenData}}</view>

  <view class="btnGroup">
    <view class="item orange" bindtap="clickButton" id="{{id1}}">back</view>
    <view class="item orange" bindtap="clickButton" id="{{id2}}">clear</view>
    <view class="item orange" bindtap="clickButton" id="{{id3}}">+/-</view>
    <view class="item orange" bindtap="clickButton" id="{{id4}}">+</view>
  </view>
 <view class="btnGroup">
    <view class="item blue" bindtap="clickButton" id="{{id5}}">9</view>
    <view class="item blue" bindtap="clickButton" id="{{id6}}">8</view>
    <view class="item blue" bindtap="clickButton" id="{{id7}}">7</view>
    <view class="item orange" bindtap="clickButton"  id="{{id8}}">-</view>
  </view>

<view class="btnGroup">
    <view class="item blue" bindtap="clickButton" id="{{id9}}">6</view>
    <view class="item blue" bindtap="clickButton" id="{{id10}}">5</view>
    <view class="item blue" bindtap="clickButton" id="{{id11}}">4</view>
    <view class="item orange" bindtap="clickButton"  id="{{id12}}">*</view>
  </view>
  <view class="btnGroup">
    <view class="item blue" bindtap="clickButton" id="{{id13}}">3</view>
    <view class="item blue" bindtap="clickButton" id="{{id14}}">2</view>
    <view class="item blue" bindtap="clickButton" id="{{id15}}">1</view>
    <view class="item orange" bindtap="clickButton"  id="{{id16}}">/</view>
  </view>
  <view class="btnGroup">
    <view class="item blue" bindtap="clickButton"  id="{{id17}}">0</view>
    <view class="item blue" bindtap="clickButton"  id="{{id18}}">.</view> 
    <view class="item blue" bindtap="history"  id="{{id19}}">history</view>    
    <view class="item orange" bindtap="clickButton"  id="{{id20}}">=</view> 
  </view>

</view>

{{screenData}} : {{}}绑定数据，这里表示绑定data中的 screenData。

bindtap="clickButton"   :绑定点击事件

call.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    id1: "back",
    id2: "clear",
    id3: "positive",
    id4: "+",

    id5: "9",
    id6: "8",
    id7: "7",
    id8: "-",

    id9: "6",
    id10: "5",
    id11: "4",
    id12: "*",

    id13: "3",
    id14: "2",
    id15: "1",
    id16: "/",

    id17: "0",
    id18: ".",
    id19: "history",
    id20: "=",
    
    screenData : "0",
    lastIsOperator : false,
    arr : [],
    logs : []
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  },
  history: function (event){
    wx.navigateTo({
      url: '../list/list'
    })

  },
  clickButton:function(event){
    console.log(event.target.id);
    
    var id = event.target.id;

    if (id == this.data.id1){ //BACK
      var data = this.data.screenData;
      if(data == 0){
        return;
      }
      data = data.substring(0, data.length-1);
      if(data == "" || data == "."){
        data = 0;
      }
      this.setData({ screenData: data });
      this.data.arr.pop(); //退格 -1
    }
    else if (id == this.data.id2){ //clear
      this.setData({ screenData: "0" });
      this.data.arr.length = 0; //数组清空

    } else if (id == this.data.id3) { // positive negative
      var data = this.data.screenData;
      if(data == 0){
        return;
      }
      var firstChar = data.substring(0,1);
      if (firstChar == "-"){
        data = data.substring(1); 
        this.data.arr.shift();//去除第一个元素
      }else{
        data = "-" + data;
        this.data.arr.unshift("-"); //第一个元素增加"-"
      }
      this.setData({ screenData: data });

    } else if (id == this.data.id20) { // =
      var data = this.data.screenData;
      if (data == 0){
        return;
      }
      var lastChar = data.substring(data.length - 1, data.length);
      if(isNaN(lastChar)){
        return;
      }
      var num = "";
      var lastOperator;
      var arr = this.data.arr;
      var optarr =[];
      for (i in arr){
        if (isNaN(arr[i]) == false || arr[i] == this.data.id18 || arr[i] == this.data.id3 ){
          num += arr[i];
        }else{
          lastOperator = arr[i];
          optarr.push(num);
          optarr.push(arr[i]);
          num = "";
        }
      }
      optarr.push(Number(num));
      var result = Number(optarr[0])*1.0;
      console.log(optarr);
      console.log(result);

      for(var i=1, len = optarr.length; i<len; i++){
        if(isNaN(optarr[i])){
          if (optarr[i] == this.data.id4){
            result += Number(optarr[i+1]);
          } else if (optarr[i] == this.data.id8) {
            result -= Number(optarr[i + 1]);
          } else if (optarr[i] == this.data.id12) {
            result *= Number(optarr[i + 1]);
          } else if (optarr[i] == this.data.id16) {
            result /= Number(optarr[i + 1]);
          }
        }
      }
      this.data.logs.push(data + "="　+ result); //存入history
      wx.setStorageSync("calllogs", this.data.logs);
      console.log("calllogs:" + wx.getStorageSync("calllogs"));
      this.data.arr.length = 0; //数组清空
      this.data.arr.push(result);
      this.setData({screenData : result + ""});          
      
    }else{ //click number or +-*/
      if (id == this.data.id4 || id == this.data.id8 || id == this.data.id12 || id == this.data.id16) {
               
        if (this.data.lastIsOperator == true || this.data.screenData == 0) {
          return;
        }
      }
      
      var sdata = this.data.screenData == 0 ? "" : this.data.screenData;
      var data = sdata + event.target.id　;

      this.setData({ screenData: data });
      this.data.arr.push(id); //event传入 每次点击的放入数组


      if (id == this.data.id4 || id == this.data.id8 || id == this.data.id14 || id == this.data.id16){
        this.setData({ lastIsOperator: true });
      }else{
        this.setData({ lastIsOperator: false });
      }
    }
  }
})

data:数据

clickButton：自定义事件/方法

--event.target.id：页面目标元素的id。可以在点击事件clickButton 打断点看下event对象

--this.data.id1   ：“back”(this当前pages对象 )，即代表下面内容

Page({

/**
* 页面的初始数据
*/
data: {
    id1: "back"

    ...

}

 this.setData({ screenData: "0" });  //设置数据  具体查看api

/* pages/call/call.wxss */

.content{
  height: 100%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  align-items: center;
  box-sizing: border-box;
padding-top: 30rpx;
}
.screen{
  width: 720rpx;
  height: 100rpx;
  line-height: 100rpx;
  padding-right: 10rpx;
  margin-bottom: 30rpx;
border-radius: 5px;
border:1px solid #f8f8f8;
}
.btnCroup{
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
}
.item{
  width:150rpx;
  min-height:100rpx;
  margin:5rpx;
  border-radius:5px;
  text-align:center;
  line-height:150rpx;
  float :left;
}
.orange{
 background-color: #af4f00;
}
.blue{
 background-color: #0a4ff0;
}

其他：跳转到历史记录

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