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

最新推荐文章于 2024-03-02 13:39:42 发布
最新推荐文章于 2024-03-02 13:39:42 发布
阅读量6.2k 收藏 7
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/QFire/article/details/78990962
版权

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

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：同步清理
                                

     

CopperDong
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
《从零开始学微信小程序开发》
08-21
《从零开始学微信小程序开发》全书电子版详细讲解及代码实例解析 。
如何在微信小程序中使用本地存储
最新发布
qq_67153941的博客
05-25 476
通过wx.setStorageSync和wx.getStorageSync方法可以同步地进行存储和读取操作，而使用wx.setStorage和wx.getStorage方法可以异步地进行存储和读取操作。除了wx.setStorageSync和wx.getStorageSync方法外，还可以使用异步的wx.setStorage和wx.getStorage方法来进行本地存储操作。在上述代码中，wx.setStorage方法接受一个对象作为参数，其中key表示存储的键名，data表示存储的值。
微信小程序界面设计-样式入门到精通
01-10
讲解微信小程序中样式的入门使用，如何使用传统的css知识点来开发wxss的样式
美化微信小程序的界面--微信小程序开发中使用vant的完整步骤
河西~石头
10-11 1775
我们都知道，虽然微信小程序的wxcss与css类似，但我们写前端一个个的样式去写完，不太现实，没有那个时间，也没有那个必要。其实早就有类似的样式插件可以解决这些问题。这里我们就来看看vant在微信小程序中的使用。
微信小程序个人中心-我的界面
热门推荐
wy313622821的博客
04-24 5万+
个人中心-我的界面 简介 我们在开发微信小程序的时候，基本上都会有一个个人中心的界面，简称我的界面，里面有保存每个用户的个人信息，个人设置，个人的数据记录。所以本文主要针对这个页面做了一个自己熟练的界面，下面来看看效果图： 效果图 . . . 这种效果的整体布局固定不变，如果想要更好看的效果，可以修改里面的图片小图标，还有背景颜色，又或者加上动图都是可以的，但是整体的框架基本就是这样，所以下面来...
微信小程序美化方法大集合
weixin_45512098的博客
02-23 4461
微信小程序界面的美化方法集合
微信小程序登陆界面（效果图+源代码）
weixin_43474701的博客
12-14 2万+
微信小程序登陆界面 login.wxml： <view class="container"> <view class="login-icon"> <image class="login-img" src="../images/loginLog.jpg"></image> </view> <view class="login-from"> <!--账号--> <...
从零开始学微信小程序开发 pdf
05-17
从零开始学微信小程序开发 pdf《从零开始学微信小程序开发》一书作者高洪涛,电子工业出版社
微信小程序demo：在线聊天功能(源代码+截图)
06-19
微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+截图)微信小程序demo：在线聊天功能(源代码+...
微信小程序开发教程--从零开始
02-24
今天一不小心拿到了小程序的内测资格，为了不辜负微信团队的信任，我决定十一...从零开始(1)app.js(2)app.json(3)app.wxml(4)app.wxss3.HelloWorld(1)创建程序实例(2)美化ActionBar(3)美化页面(4)配置首页4.超级HelloW
微信小程序界面美化
05-10
微信小程序美化，视频教你每一步，并且有详细的步骤教程
微信小程序Demo：问卷调查
03-15
综上所述，“微信小程序Demo：问卷调查”涵盖了前端开发的基本技能，包括UI设计、数据交互、网络请求等多个方面。通过此项目，开发者不仅可以提升微信小程序的开发能力，还能深入理解如何构建一个完整的问卷调查系统...
微信小程序推荐demo：商城：UI设计完善，适用1122版本(源代码+截图)
06-19
微信小程序推荐demo：商城：UI设计完善，适用1122版本(源代码+截图)微信小程序推荐demo：商城：UI设计完善，适用1122版本(源代码+截图)微信小程序推荐demo：商城：UI设计完善，适用1122版本(源代码+截图)微信小程序...
微信小程序开发-康爱多微商城：学习界面设计案例源码.zip
08-15
在微信小程序开发领域，"康爱多微商城：学习界面设计案例源码.zip" 是一个宝贵的教育资源，尤其适合初学者和有经验的开发者探索和学习微信小程序的界面设计技巧。这个压缩包包含了康爱多微商城的实际界面设计源码，...
微信小程序推荐demo：商城：UI设计完善
05-04
在本主题“微信小程序推荐demo：商城：UI设计完善”中，我们将深入探讨微信小程序在商城应用场景下的UI设计及其重要性。 UI（User Interface）设计是构建用户界面的过程，它关乎到应用的易用性和美观度。一个完善的...
小白学习微信小程序的界面设计和用户体验
吃不胖.
03-02 426
本文通过代码案例的方式详细介绍了微信小程序的界面设计和用户体验方面的内容。微信小程序的界面设计和用户体验是指如何设计小程序的页面以及如何让用户在使用小程序时获得良好的体验。本文将通过代码案例的方式详细介绍微信小程序的界面设计和用户体验方面的内容。数据绑定与渲染是指如何将页面上的数据与后台数据进行绑定，并将数据渲染到页面上。在上述代码中，我们为头部、内容区域和底部设置了不同的背景颜色、字体颜色、字体大小和对齐方式，以达到更好的视觉效果。样式设计是指如何为页面上的元素设置样式，以达到美观和易用的效果。
微信小程序——界面介绍（极简）
weixin_58963766的博客
07-08 485
1、用户占比：反应了当前使用小程序的用户或者开发者的比例，处于动态变化中。比例高说明这个版本较稳定或者使用者多，兼容性也会好一点，所以建议选择比例高的。如果是真机开发，选完版本后还要点击“推送”2、不校验：如果出现服务连不上，而后台端口、网络、请求等也没有问题，那么可能是因为这个选项的问题。校验的信息在下图位置中，如果没有在个人界面配置相应服务器地址，则要勾选“不校验”
微信小程序新手向——界面布局
Krisit的博客
09-28 6727
微信小程序新手向——界面布局

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值