微信小程序开发完工了，自然也遇到了不少问题，本文我们主要和大家分享微信小程序开发遇到的问题汇总，希望能帮助到更多的微信开发者。
小程序简介
“让兴趣不再孤单，让爱好不再流浪” 是微信小程序《出发吧一起》的主题，这款小程序旨在解决当代大学生在校园生活中的孤独感，让大家找到志同道合的朋友，在跑步、健身、竞赛等活动中找到伙伴。利用小程序即开即用，用完就走的特点与交友相结合，它将会是一款高效快捷、无负担的线下交友利器
本小程序由 bmob 后端云提供数据处理与存储支持
小程序码
开发中技术问题汇总
1.使用e.target.dataset的出现问题
在小程序开发过程中,我们经常会用到标签中属性的属性值,我们通常会在 89c662c6f8b87e82add978948dc499d2 中 设置 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,但是都可以通过这种方式实现清空效果
wxml
<form bindsubmit="submitform"> <text class="key">活动名称</text>
<input name="title" maxlength="100" value="{{title}}" />
<button formtype="submit">确定</button> </form>
js
submitform:function(e){
var title = e.detail.value.title;
......
success: function (res) {
//将title值设置空
that.setdata({
title: ''
}
}
}
6.微信号,qq号,手机号 正则校验
由于申请加入活动需要填写真实姓名,联系方式等信息,为了防止用户随意填写信息,必须要对这些信息进行校验
js
var wxreg = new regexp("^[a-za-z]([-_a-za-z0-9]{5,19})+$");
//微信号正则校验 var qqreg = new regexp("[1-9][0-9]{4,}");
//qq号正则校验 var phreg = /^1[34578]\d{9}$/;
//手机号正则校验 var namereg = new regexp("^[\u4e00-\u9fa5]{2,4}$");
//2-4位中文姓名正则校验
7.使用 bmob sdk 实现报名成功发送模板消息,生成小程序二维码等
在开发过程中,由于想要实现,当用户报名成功后如何通知用户,查阅了小程序的开发文档发现有一个发送模板消息的api,再查询 bmob 的开发文档,发现实现了这个功能,这个真的太有用了.模板消息只能再真机上才能发送成功,经过配置,重要成功,但是有在使用中出现一个问题
,就是在小程序发布后 模板消息中如果带有 page 参数将不会发送,但是在开发版中能发送成功, 这个问题已经反馈了,估计等bmob小程序sdk更新后会解决这个问题.
相关推荐：
一个微信小程序版知乎实例分享
微信小程序组件化的解决思路和方法
微信小程序版2048小游戏
以上就是微信小程序开发遇到的问题汇总的详细内容。