摘要：前言经过将近一个多月的开发我们团队开发的微信小程序出发吧一起终于开发完成现在的线上版本为版本文章主要介绍该小程序在开发中所用到的技术已经在开发中遇到问题的采取的解决方法开源地址开发中技术问题汇总使用的出现问题在小程序开发过程中我们经常会用
前言
经过将近一个多月的开发,我们团队开发的微信小程序 "出发吧一起" 终于开发完成,现在的线上版本为 2.2.4-beta 版本文章主要介绍该小程序在开发中所用到的技术,已经在开发中遇到问题的采取的解决方法
开源地址
开发中技术问题汇总 1.使用e.target.dataset的出现问题在小程序开发过程中,我们经常会用到标签中属性的属性值,我们通常会在
此时可以将代码替换成这样来获取值
WXML
JS
bintap:function(e){
var id = e.currentTarget.dataset.id;
}
网上还有一直说法是 data-* 里 * 命名的问题,去掉驼峰式命名,纯小写也能解决
2.小程序 textarea 文本框如何显示实时字数WXML
{{noteNowLen}}/{{noteMaxLen}}
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
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更新后会解决这个问题.
具体代码我就不写了,bmob开发文档直达
发送模板消息
生成小程序二维码
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90195.html
摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...
摘要：微信小程序应用号开发资源汇总文档工具教程代码插件组件文档从搭建一个微信小程序开始小程序开发文档小程序设计指南工具小程序开发者工具官方支持微信小程序实时预览的支持的微信小程序组件化开发框架转在线工具小程序云端增强社区微信小程序 微信(小程序or应用号)开发资源汇总-文档-工具-教程-代码-插件-组件 文档 从搭建一个微信小程序开始 小程序开发文档 小程序设计指南 工具 小程序开发者...
摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。 每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。 每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：微信应用号小程序资源汇总。每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 wechat-weapp-resource 微信应用号（小程序）资源汇总。 每天不定期整理和收集微信小程序相关资源，方便查阅和学习，欢迎大家提交新的资源，完善和补充。 showImg(https://segmentfault.com/img/remote/1460000...
摘要：本文托管在上，不定期更新最后更新时间官方文档小程序开发文档小程序设计指南小程序开发者工具新闻报道微信正式开放内测小程序，不开发的日子真的来了氪关于微信小程序应用号，我能透露的几个细节可能吧你的产品适不适合做微信小程序你需要这篇产品逻 本文托管在github上，不定期更新：justjavac/awesome-wechat-weapp 最后更新时间：2016-09-24 06:22:10 ...
阅读 664·2021-11-22 09:34
阅读 2968·2021-11-11 16:54
阅读 2073·2021-09-04 16:48
阅读 948·2019-12-27 11:51
阅读 3087·2019-08-29 16:08
阅读 534·2019-08-29 15:13
阅读 1232·2019-08-29 15:09
阅读 2550·2019-08-29 12:45
