258资源分享网

前言

经过将近一个多月的开发,我们团队开发的微信小程序 "出发吧一起" 终于开发完成,现在的线上版本为 2.2.4-beta 版本文章主要介绍该小程序在开发中所用到的技术,已经在开发中遇到问题的采取的解决方法

开源地址

开发中技术问题汇总 1.使用e.target.dataset的出现问题

在小程序开发过程中,我们经常会用到标签中属性的属性值,我们通常会在  中 设置 data-*="{{XXX}}" 然后在 JS 里通过 e.target.dateset.* 来获取XXX值,但是我经常遇到获取的是undefined,使用 console.log(e) 查看输出信息会发现,在 e对象中包含两个对象分别是currentTarget和target,而往往有些时候数据在currentTarget中,

此时可以将代码替换成这样来获取值

WXML

<view bindtap="bintap" data-id="1">view>

JS

bintap:function(e){ var id = e.currentTarget.dataset.id; }

网上还有一直说法是 data-* 里 * 命名的问题,去掉驼峰式命名,纯小写也能解决

2.小程序 textarea 文本框如何显示实时字数

WXML

<view> <view> <textarea name="content" bindinput="bindTextAreaChange" maxlength="{{noteMaxLen}}" /> <view class="chnumber">{{noteNowLen}}/{{noteMaxLen}}view> view> view>

JS

data:{ noteMaxLen: 200,//备注最多字数 noteNowLen: 0,//备注当前字数 } //字数改变触发事件 bindTextAreaChange: function (e) { var that = this var value = e.detail.value, len = parseInt(value.length); if (len > that.data.noteMaxLen) return; that.setData({ content: value, noteNowLen: len }) }, 3.利用 JS 实现模糊查询

由于我们使用的是 Bmob 后端云提供的数据处理与存储支持，根据 Bmob 提供的开发文档，免费版的应用无法进行模糊查询，看到这里，再看看已经快完工的活动检索界面，感受无法言说。正当准备放弃的时候，突然想到一个方法，那就是先把所有的后台所有数据都存到集合里，然后根据输入的检索值一个个匹配，想到之后马上就开始着手干了，先查了一下javaScript 文档,String 对象有一个方法是 indexOf() ,可返回某个指定的字符串值在字符串中首次出现的位置,这样就成了,遍历 所以数据,检索每一条数据的每个字符,如果出现了则将它加入到检索结果的集合中.

JS

//js 实现模糊匹配查询 findEach: function (e) { var that = this var strFind = that.data.wxSearchData.value; //这里使用的 wxSearch 搜索UI插件, if (strFind == null || strFind == "") { wx.showToast({ title: '输入为空', icon: 'loading', }) } if (strFind != "") { var nPos; var resultPost = []; for (var i in smoodList) { var sTxt = smoodList[i].title || ''; //活动的标题 nPos = sTxt.indexOf(strFind); if (nPos >= 0) {//如果输入的关键字在该活动标题中出现过,则匹配该活动 resultPost.push(smoodList[i]); //将该活动加入到搜索到的活动列表中 } } that.setData({ moodList: resultPost }) } },

更加详细的代码请前往Github查看

4.使用 JS 将字符串格式的时间转换成几秒前,几分钟前...

由于小程序中涉及评论,加入活动,收藏等一系列包括事件时间的功能,而数据库中存的时间格式为 2017-11-30 23:36:10 现在想要在界面上不显示具体时间,而是显示与当前时间的差,即几秒前,几分钟前等等

实现起来并不复杂,主要思路是先把字符串的时间转换成时间戳,然后与当前的时间戳进行比较,这样就能转换成几秒前、几分钟前、几小时前、几天前等形式了

JS

//字符串转换为时间戳 function getDateTimeStamp(dateStr) { return Date.parse(dateStr.replace(/-/gi, "/")); } //格式化时间 function getDateDiff(dateStr) { var publishTime = getDateTimeStamp(dateStr) / 1000, d_seconds, d_minutes, d_hours, d_days, timeNow = parseInt(new Date().getTime() / 1000), d, date = new Date(publishTime * 1000), Y = date.getFullYear(), M = date.getMonth() + 1, D = date.getDate(), H = date.getHours(), m = date.getMinutes(), s = date.getSeconds(); //小于10的在前面补0 if (M < 10) { M = '0' + M; } if (D < 10) { D = '0' + D; } if (H < 10) { H = '0' + H; } if (m < 10) { m = '0' + m; } if (s < 10) { s = '0' + s; } d = timeNow - publishTime; d_days = parseInt(d / 86400); d_hours = parseInt(d / 3600); d_minutes = parseInt(d / 60); d_seconds = parseInt(d); if (d_days > 0 && d_days < 3) { return d_days + '天前'; } else if (d_days <= 0 && d_hours > 0) { return d_hours + '小时前'; } else if (d_hours <= 0 && d_minutes > 0) { return d_minutes + '分钟前'; } else if (d_seconds < 60) { if (d_seconds <= 0) { return '刚刚'; } else { return d_seconds + '秒前'; } } else if (d_days >= 3 && d_days < 30) { return M + '-' + D + ' ' + H + ':' + m; } else if (d_days >= 30) { return Y + '-' + M + '-' + D + ' ' + H + ':' + m; } } 5.微信小程序提交表单清空表单数据

在发布活动之后,由于表单中的数据没有清空,给用户的体验必定不好,然而小程序的数据交互并不像html + jS 那样,使用 dataSet({}) 来给赋值,视图层就能通过异步的方式活动到值,于是想到,在提交表单后,给这些input都赋值为空,那样就实现了清空表单的效果,当然,表单中并不只包含input,但是都可以通过这种方式实现清空效果