您的位置:首页 > 产品设计 > UI/UE

从零开始学微信小程序开发:4 美化UI界面 5 保存数据到本地

2018-01-06 20:41 691 查看
    本章重新设计一个界面、功能都更强的计算器小程序

4.1 计算器功能需求

    功能如下:

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

      添加calc目录

      calc.json

{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "计算器",
"navigationBarTextStyle": "black"
}
      calc.wxml
<!--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.js

var 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); //保存expr
expr1 = "";
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); //保存到本地缓存
}     清理本地缓存:小程序中本地缓存最大为10MB。
            wx.clearStorage:清空

            wx.clearStorageSync:同步清理

                                

     
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐