当前位置: 首页 > news >正文

微信小程序开发问题汇总

前言

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

开发中技术问题汇总

1.使用e.target.dataset的出现问题

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

具体代码我就不写了,bmob开发文档直达

  • 发送模板消息
  • 生成小程序二维码

相关文章:

  • 基于我的Winform开发框架扩展而成的WCF开发框架
  • 「面试题」如何实现一个圣杯布局?
  • .NET开发不可不知、不可不用的辅助类(三)(报表导出---终结版)
  • 预加载机制及变量提升
  • proguaid混淆maven工程问题总结
  • 图片编辑类
  • tcpdump
  • UGUI
  • mysql -- 优化之ICP(index condition pushdown)
  • 感恩送书第1期:2019年快来了,感谢各位网友,送《Spring 5开发大全》
  • 用工作单元(IUnitOfWork)带给我们的是什么?
  • EF架构~将数据库注释添加导入到模型实体类中
  • PHP生成随机字符串
  • JMeter接口测试中文乱码问题总结
  • loongson官方PMON使用
  • 《网管员必读——网络组建》(第2版)电子课件下载
  • 5分钟即可掌握的前端高效利器:JavaScript 策略模式
  • Angular js 常用指令ng-if、ng-class、ng-option、ng-value、ng-click是如何使用的?
  • CAP 一致性协议及应用解析
  • cookie和session
  • emacs初体验
  • iOS 颜色设置看我就够了
  • java小心机(3)| 浅析finalize()
  • Java知识点总结(JDBC-连接步骤及CRUD)
  • opencv python Meanshift 和 Camshift
  • Unix命令
  • Xmanager 远程桌面 CentOS 7
  • 成为一名优秀的Developer的书单
  • 动态魔术使用DBMS_SQL
  • 买一台 iPhone X,还是创建一家未来的独角兽?
  • 如何优雅地使用 Sublime Text
  • 实现菜单下拉伸展折叠效果demo
  • 大数据全解:定义、价值及挑战
  • ​​​​​​​Installing ROS on the Raspberry Pi
  • # Python csv、xlsx、json、二进制(MP3) 文件读写基本使用
  • #13 yum、编译安装与sed命令的使用
  • #define
  • (4.10~4.16)
  • (C#)一个最简单的链表类
  • (LeetCode C++)盛最多水的容器
  • (PyTorch)TCN和RNN/LSTM/GRU结合实现时间序列预测
  • (附源码)ssm高校运动会管理系统 毕业设计 020419
  • (附源码)ssm经济信息门户网站 毕业设计 141634
  • (一)搭建springboot+vue前后端分离项目--前端vue搭建
  • (转)关于如何学好游戏3D引擎编程的一些经验
  • (转)人的集合论——移山之道
  • .form文件_一篇文章学会文件上传
  • .mat 文件的加载与创建 矩阵变图像? ∈ Matlab 使用笔记
  • .net core webapi 部署iis_一键部署VS插件:让.NET开发者更幸福
  • .NET Micro Framework初体验
  • .net 后台导出excel ,word
  • .NET3.5下用Lambda简化跨线程访问窗体控件,避免繁复的delegate,Invoke(转)
  • .netcore 如何获取系统中所有session_如何把百度推广中获取的线索(基木鱼,电话,百度商桥等)同步到企业微信或者企业CRM等企业营销系统中...
  • .NET中 MVC 工厂模式浅析
  • ??在JSP中,java和JavaScript如何交互?