用sublime做的网站/百度关键词优化

    本章重新设计一个界面、功能都更强的计算器小程序

4.1 计算器功能需求

    功能如下：

• 能进行加、减、乘、除运算
• 能对输入的数值进行正负号取反运算
• 可以输入小数
• 输入数据的过程中可删除输入的最后一位
• 可清除输入的数据
• 能查看历史数据

      创建一个名为ch04的项目

      添加calc目录

      calc.json

{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "计算器","navigationBarTextStyle": "black"
}

<!--pages/calc/calc.wxml-->
<view class="content"><view class="screen">{{result}}</view><view class="btmGroup"><switch checked="{{record}}" bindchange="RecordHistory" /><view class="histext">保持历史记录</view></view><view class="btmGroup"><button class="item orange" hover-class="other-button-hover" id="{{id1}}" bindtap="clickButton"><icon type="info_circle" size="38" color="red" class="btnIcon" /></button><button class="item orange" hover-class="other-button-hover" id="{{id2}}" bindtap="clickButton"><icon type="cancel" size="38" color="red" class="btnIcon" /></button><button class="item orange" hover-class="other-button-hover" id="{{id3}}" bindtap="clickButton">←</button><button class="item orange" hover-class="other-button-hover" id="{{id4}}" bindtap="clickButton">÷</button></view><view class="btmGroup"><button class="item blue" hover-class="button-hover-num" id="{{id5}}" bindtap="clickButton">7</button><button class="item blue" hover-class="button-hover-num" id="{{id6}}" bindtap="clickButton">8</button><button class="item blue" hover-class="button-hover-num" id="{{id7}}" bindtap="clickButton">9</button><button class="item orange" hover-class="other-button-hover" id="{{id8}}" bindtap="clickButton">×</button></view><view class="btmGroup"><button class="item blue" hover-class="button-hover-num" id="{{id9}}" bindtap="clickButton">4</button><button class="item blue" hover-class="button-hover-num" id="{{id10}}" bindtap="clickButton">5</button><button class="item blue" hover-class="button-hover-num" id="{{id11}}" bindtap="clickButton">6</button><button class=item orange" hover-class="other-button-hover" id="{{id12}}" bindtap="clickButton">－</button></view><view class="btmGroup"><button class="item blue" hover-class="button-hover-num" id="{{id13}}" bindtap="clickButton">1</button><button class="item blue" hover-class="button-hover-num" id="{{id14}}" bindtap="clickButton">2</button><button class="item blue" hover-class="button-hover-num" id="{{id15}}" bindtap="clickButton">3</button><button class="item orange" hover-class="other-button-hover" id="{{id16}}" bindtap="clickButton">＋</button></view><view class="btmGroup"><button class="item orange" hover-class="other-button-hover" id="{{id17}}" bindtap="clickButton">±</button><button class="item blue" hover-class="button-hover-num" id="{{id18}}" bindtap="clickButton">0</button><button class="item blue" hover-class="button-hover-num" id="{{id19}}" bindtap="clickButton">.</button><button class="item orange" hover-class="other-button-hover" id="{{id20}}" bindtap="clickButton"><icon type="success_no_circle" size="38" color="red" class="btnIcon" /></button></view>
</view>

       calc.wcss

/* pages/calc/calc.wxss */
/*外层容器*/
.content {height: 100%;display: flex;flex-direction: column;align-items: center;box-sizing: border-box;padding-top: 10rpx;
}/*计算结果*/
.screen {background-color: #ffffff;text-align: right;width: 650rpx;height: 150rpx;line-height: 150rpx;padding: 0 20rpx;margin: 30rpx;border: 1px solid #ddd;border-radius: 3px;
}/*按钮组横向显示*/
.btmGroup{display: flex;flex-direction: row;
}/*针对按钮编写一个class宽160rpx，4个按钮占：640rpx间距10rpx, 总宽度没有超过750rpx文字的阴影、对齐、高度、按钮圆角等*/
.item {width: 160rpx;min-height: 150rpx;margin: 10rpx;text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);border-radius: 5px;text-align: center;line-height: 150rpx;
}/*控制按钮（橙色）*/
.orange{background-color: #f78d1d;color: #fef4e9;border:solid 1px #da7c0c;
}/*数字按钮（蓝色）*/
.blue{background-color: #0095cd;color: #d9eef7;border:solid 1px #0076a3;
}/*数字按钮按下状态*/
.button-hover-num{background-color: #0094cc; opacity: 0.7;
}/*控制按钮按下状态*/
.other-button-hover{background-color: red;
}

       calc.js

     识别出用户按了哪个按钮：20个按钮编写20个事件处理函数，非常烦琐。可以编写一个通用的按钮单击事件根据id来处理
     icon组件：只要指定图标的类型、大小和颜色，就可以显示出一个图标，而不需要去引用一张图片资源

          <icon type="图标类型" size="图标大小" color="图标颜色" />

                 type: 有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear.

                 size: 大小，单位为px

                 color: 颜色

// pages/calc/calc.jsvar calculate=function(data1, oper, data2) {var data;data1 = parseFloat(data1);data2 = parseFloat(data2);switch (oper) {case "+":data = data1 + data2;break;case "-":data = data1 - data2;break;case "*":data = data1 * data2;break;case "/":if (data2 !== 0) {data = data1 / data2;} else {data = 0;}break;}return data;
}
//保存数据到本地缓存的数组中
var saveExprs = function(expr) {var exprs = wx.getStorageSync('exprs') || []  //exprs.unshift(expr);  //在数组开头增加一个元素wx.setStorageSync('exprs', exprs);  //保存到本地缓存
}Page({/*** 页面的初始数据*/data: {result:"0",id1: "history",id2: "clear",id3: "back",id4: "div",id5: "num_7",id6: "num_8",id7: "num_9",id8: "mul",id9: "num_4",id10: "num_5",id11: "num_6",id12: "sub",id13: "num_1",id14: "num_2",id15: "num_3",id16: "add",id17: "negative",id18: "num_0",id19: "dot",id20: "equ",lastoper: "+",temp: "0",flag: true,record: true,expr:""    //表达式},//修改记录标志RecordHistory:function(e){console.log(e)this.setData({record:e.detail.value})},/* 单击事件处理函数 */clickButton:function(e) {var data = this.data.result;  //取上一个结果值var tmp = this.data.temp; //取上次的临时结果var lastoperl = this.data.lastoper; //上一次的运算符var noNumFlag = this.data.flag;     //上一次非数字按钮标志var expr1 = this.data.expr;  //if (e.target.id>='num_0' && e.target.id<='num_9') {data += e.target.id.split("_")[1];   //切分出值if (this.data.result == '0' || noNumFlag) {data = e.target.id.split("_")[1];}noNumFlag = false;} else {noNumFlag = true;console.log(e.target.id);if (e.target.id == "dot") {if (data.toString().indexOf(".") == -1) {data += ".";}} else if (e.target.id == "clear") {expr1 = expr1.substr(0, expr1.length-1) + "=" + tmp;  //if (this.data.record) {//  wx.setStorageSync("expr", expr1);//}saveExprs(expr1); //保存exprexpr1 = "";data == 0;tmp = 0;lastoperl = "+";} else if (e.target.id == "negative") {data = -1 * data;} else if (e.target.id == "back") {if (data.toString().length > 1) {data = data.substr(0, data.toString().length - 1);} else {data = 0;}} else if (e.target.id == "div") {expr1 += data.toString() + "÷";data = calculate(tmp, lastoperl, data);tmp = data;lastoperl = "/";} else if (e.target.id == "mul") {expr1 += data.toString() + "×";data = calculate(tmp, lastoperl, data);tmp = data;lastoperl = "*";} else if (e.target.id == "add") {expr1 += data.toString() + "+";data = calculate(tmp, lastoperl, data);tmp = data;lastoperl = "+";} else if (e.target.id == "sub") {expr1 += data.toString() + "-";data = calculate(tmp, lastoperl, data);tmp = data;lastoperl = "-";} else if (e.target.id == "equ") {expr1 += data.toString();data = calculate(tmp, lastoperl, data);expr1 += "=" + data;//if (this.data.record) {//  wx.setStorageSync("expr", expr1);//}saveExprs(expr1);expr1 = "";tmp = 0;lastoperl = "+";} else if (e.target.id == "history") { //历史wx.navigateTo({   //导航url: '../history/history'})}}this.setData({result: data,lastoper: lastoperl,temp: tmp,flag: noNumFlag,expr: expr1});},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

第五章 保存数据到本地

    HTML5提供本地缓存localStorage在微信小程序中也可以使用

5.1 保存计算历史界面设计

    switch组件：”是“和”否“之间进行选择的操作，还有复选框checkbox组件   

5.2 修改计算器UI

    是否保存计算过程到历史记录中

5.3 保存计算到本地缓存

    两个API接口函数：

        wx.setStorage:将数据存储指定key中，会覆盖原来key。是一个异步接口，其参数是个Object对象，有以下属性：

• key: 本地缓存中的key，是一个字符串。
• data：需要存储的内容，可以是字符串，也可以是Object对象
• success：接口调用成功的回调函数
• fail：接口调用失败的回调函数
• complete：结束的回调函数（成功和失败都会执行）

       wx.setStorageSync：不同的是它是同步接口，因此不需要success, fail和complete

5.4 从本地缓存读取数据

    添加history子目录

    history.json

{"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "查看历史记录","navigationBarTextStyle": "black"
}

    history.wxml

<!--pages/history/history.wxml-->
<view class="container"><block wx:for="{{exprs}}"><view>{{item}}</view></block>
</view>

    history.js

// pages/history/history.js
Page({/*** 页面的初始数据*/data: {//expr: "历史记录"exprs:[]},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {this.setData({//expr:wx.getStorageSync("expr")exprs:wx.getStorageSync("exprs") || []})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

   页面切换的相关接口函数：

        1、wx.navigateTo：保留当前页面，跳转到应用内的某个页面。

            以下属性：

• url：可用相对路径或绝对路径
• success：调用成功的回调函数
• fail：调用失败的回调函数
• complete：结束的回调函数（无论成功与否）

           官方规定页面路径只能是5层

        2、wx.redirectTo接口函数：跳转前会关闭当前页面。

        3、wx.navigateBack：关闭当前页面，退回到前一页面

   获取本地缓存数据

        1、wx.getStorage；异步接口

        2、wx.getStorageSync：同步接口

   使用数组保存多条历史记录

//保存数据到本地缓存的数组中
var saveExprs = function(expr) {var exprs = wx.getStorageSync('exprs') || []  //exprs.unshift(expr);  //在数组开头增加一个元素wx.setStorageSync('exprs', exprs);  //保存到本地缓存
}

            wx.clearStorage：清空

            wx.clearStorageSync：同步清理