小程序学习日记(2)

虽然被迫加班挺狼狈的,但是人还是干不过氛围呀,以后天气不好或是不想运动的时候跟他们一起加班再回家也是个不错的选择,这么好的机会正好抓紧学习以前欠下的债。

两天的学习,作个简单的总结。主要实现的功能是微信小程序上的简易计算器的功能。

虽然不怎么美观,但是大体的功能和其中的头疼调试也是够我喝一壶了。

依据实际情况划分<view></view>组件和<button></button>组件,在wxss中设置好其摆放规则和样式大小,样式多为内联样式(包括CSS有待学习)后面还待熟悉。在整个程序中需要调用的数据均在Page-data中进行初始化,初始化的ID可以和wxml中的控件进行绑定。

在整体样式设置完毕后,需要进行控件功能的补充和完善。此时最重要的就是功能需求分析,必须弄清楚每个控件的实现方式和控件之间的关联,在开发之际一定要想清楚,写清楚每个控件的逻辑情况。此时遇到了困扰许久的"Setting data field "xxx" to undefined is invalid",请回到page-data中进行变量初始化确认!同时还有至今未解决的退格函数无法生效的问题,现贴出代码,等大神解答。

if(e.target.id == "back"){

        if(data.toString().length>1){

          data = data.substr(0,data.toString().length -1);

        }else{//长度只有一位

          data = 0;}

}

今天学习的内容是数据的保存和读取任务,主要是两个函数的学习和熟悉。

组件部分为 switch,checked为选中状态;type为种类,多用switch很少使用checkbox;bindchange为绑定事件,及该控件的触发效果,多在js中单独定义功能函数。

函数部分为保存数据到本地的wx.setStorage和wx.setStorageSync。

wx.setStorageSync

wx.setStorage

平常较多使用的是wx.setStorageSync('key', 'value')

还有就是对应保存的从本地读取数据的wx.setStorage和wx.setStorageSync

wx.getStorage

wx.getStorageSync

同样的,wx.getStorageSync('key')使用较多。

整个过程则涉及到了页面跳转的接口函数:

wx.navigateTo/wx.redirectTo/wx.navigateBack

wx.navigateTo 为重点学习的函数。

在使用的过程中,学习到了一条保存多条历史记录的方式。由于setStorageSync在保存数据到本地缓存时,会覆盖指定的Key中原有的数据。这样会导致想存储多条数据需要定义过多的Key,过于繁琐。这里采用的是定义一个Key,将缓存的数据保存在一个数组中,每次需要使用时先从本地的缓存中将保存的历史记录读取出来,将增加历史记录时,只需要将运算过程字符串增加到数组后面或者前面,然后再将整个数组缓存,关键代码如下。

var saveExprs = function(expr){

  var exprs = wx.getStorageSync('exprs') || []//获取本地缓存

  exprs.unshift(expr);                      //在数组开头增加一个元素

  wx.setStorageSync('exprs',exprs);          //保存到本地缓存

}

开心,感觉最近一切在往好的方向发展,希望自己许久前就该开始的IT生涯能够如今晚般坚毅。跑步去了,好久没瘦了!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容