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

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

 /* 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;
 }

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