微信小程序常用工具类详解及实例

2024-12-23 22:24:30

微信小程序常用工具类详解

前言：

做微信小程序当中，会遇到好多的工具类util.js，这里记载下来以便平常使用 (Ps:建议通过目录查看)

-获取日期（格式化）

function formatTime(date) {
 var year = date.getFullYear()
 var month = date.getMonth() + 1
 var day = date.getDate()

 var hour = date.getHours()
 var minute = date.getMinutes()
 var second = date.getSeconds()

 return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
}

function formatNumber(n) {
 n = n.toString()
 return n[1] ? n : '0' + n
}

-获取动态更新时间

function getDateDiff (dateTimeStamp) {
 var minute = 1000 * 60;
 var hour = minute * 60;
 var day = hour * 24;
 var halfamonth = day * 15;
 var month = day * 30;
 var year = day * 365;
 var now = new Date().getTime();
 var diffValue = now - dateTimeStamp;
 if(diffValue < 0){
  //非法操作
  return '数据出错';
 }
 var yearC = diffValue / year;
 var monthC = diffValue / month;
 var weekC = diffValue / (7 * day);
 var dayC = diffValue / day;
 var hourC = diffValue / hour;
 var minC = diffValue / minute;
 if(yearC >= 1){
  result = parseInt(yearC) + '年以前';
 }else if(monthC >= 1){
  result = parseInt(monthC) + '个月前';
 }else if(weekC >= 1){
  result = parseInt(weekC) + '星期前';
 }else if(dayC >= 1){
  result = parseInt(dayC) + '天前';
 }else if(hourC >= 1){
  result = parseInt(hourC) + '小时前';
 }else if(minC >= 5){
  result = parseInt(minC) + '分钟前';
 }else{
  result = '刚刚发表';
 }
 return result;
}

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

微信小程序基础组件与导航组件详细介绍

微信小程序基础组件与导航组件详解: 1.基础组件 1.1 图标 icon 1.2 文本 text 1.3 进度条 progress 2.导航组件(navigator) 1.基础组件 1.1 图标 icon (1)总结 (2) 案例效果截图 page.wxml <view class="type-group"> <block wx:for="{{iconType}}"> <icon type="{{item}}&qu
微信小程序基础知识css样式media标签

微信小程序基础知识css样式media标签前言: 微信小程序中我遇到了一个对我来说是新的东西,但是对于前端开发来说不算是新知识,html页面中的media标签,在此记录下来以备不时之需在css中我们使用media标签来区分调用哪个css样式,比如使用media="print"来表示当执行打印文档时,使用print.css样式.这样使得文档更有得于打印,如将页面宽度增宽.或屏蔽掉一些不需要打印的内容. <link href="styles/main.css"
微信小程序支付功能开发错误总结

微信小程序支付功能开发错误总结微信小程序支付终于踩完坑了,发现里面坑挺大的,现在发个贴,希望以后入坑的同学可以看一下 : https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=2 业务流程在这里大家看文档的时候可以看到.第一个坑,获取用户的openid,参数一定要拼在url连接上,否则会报{"errcode":40013,"errmsg":"invali
微信小程序详解页面跳转与返回并回传数据

微信小程序详解页面跳转与返回并回传数据 A页面: .wxml文件 <view class="flex-wrp"> <text style="width: 32%;">选择城市</text> <input style="width: 68%;" type="text" bindtap="city" placeholder="请选择城市" valu
微信小程序 UI与容器组件总结

微信小程序 UI与容器组件总结 1.总结与概述 2.容器组件 2.1 组件容器(view) 2.2 可滚动视图容器(scroll-view) 2.3 滑块视图容器(swiper) 1.总结与概述 1.1 UI组件总结图 1.2 概述小程序的UI组件也就是定义用户界面的一系列标签,类似于html标签.一个完整用户响应过程:事件触发-->UI组件接收到事件-->触发js函数响应事件-->更新UI 2.容器组件 2.1 容器组件(view) (1)总结 (2)例子效果图 page.wx
微信小程序-获得用户输入内容

在微信小程序里,如何获得用户输入的内容?? js: document.getElementById("Content").value jq:$("#Content").val() 在微信小程序中并不能这样写. 可以通过组件的属性 bindchange 将用户输入的储存存起来 test.wxml <input id="postalCode" bindchange="bindChange" type="number
微信小程序弹幕功能简单实例

1.微信小程序----弹幕的实现(无后台) 小程序刚刚出来,现在网上的demo是多,但是要找到一个自己需要的却不容易.今天跟大家分享自己写的一个弹幕功能. 效果图: 我的思路是这样的,先用<switch>标签确定是否打开弹幕,若打开弹幕则出现弹幕文本框和发射按钮,还有弹幕遮罩层. 先贴wxml和wxss代码. wxml代码如下:  <swiper indicator-dots="{{indicatorDo
微信小程序 http请求封装详解及实例代码

微信小程序 http请求封装示例代码 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, method:'POST', header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) }, fail: function( res ) { fail( res ); } }) 以上
微信小程序 this和that详解及简单实例

微信小程序中,在wx.request({});方法调用成功或者失败之后,有时候会需要获取页面初始化数据data的情况,这个时候,如果使用,this.data来获取,会出现获取不到的情况,调试页面也会报undefiend.原因是,在javascript中,this代表着当前对象,会随着程序的执行过程中的上下文改变,在wx.request({});方法的回调函数中,对象已经发生改变,所以已经不是wx.request({});方法对象了,data属性也不存在了.官方的解决办法是,复制一份当前的对象,如
微信小程序常用工具类详解及实例

微信小程序常用工具类详解前言: 做微信小程序当中,会遇到好多的工具类util.js,这里记载下来以便平常使用 (Ps:建议通过目录查看) -获取日期(格式化) function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() var hour = date.getHours() var minute = date.getMinut
微信小程序日历组件calendar详解及实例

微信小程序日历组件calendar详解及实例模版使用: src="../cal/calendar.wxml"> is="calendar" data="{{selected_value,days,month,years,lunar_years,lunar_month,lunar_days,selectDateType,l unar_selected_value}}"> JS代码使用: var Calendar = require('
微信小程序 MD5的方法详解及实例代码

微信小程序 MD5的方法详解生成的文件可以放在 utils文件中哦!!! /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as defined in RFC 1321. * Version 1.1 Copyright (C) Paul Johnston 1999 - 2002. * Code also contributed by Greg Holt
微信小程序前端源码详解及实例分析

微信小程序前端源码逻辑和工作流看完微信小程序的前端代码真的让我热血沸腾啊,代码逻辑和设计一目了然,没有多余的东西,真的是大道至简. 废话不多说,直接分析前端代码.个人观点,难免有疏漏,仅供参考. 文件基本结构: 先看入口app.js,app(obj)注册一个小程序.接受一个 object 参数,其指定小程序的生命周期函数等.其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData) //app.js App({ onLau
微信小程序 location API接口详解及实例代码

微信小程序 location API 接口: 现在微信小程序火了 ,利用假期时间学习了下,微信小程序的基础知识,嘿嘿! 以下是记录学习微信小程序 location API接口,并且写了一个小实例来记录,如有错误之处还请指正. 微信小程序的位置接口共有两个: 1.wx.getLocation(OBJECT)获取当前的地理位置.速度. 2.wx.openLocation(OBJECT) 使用微信内置地图查看位置然后,根据object参数说明,结合module模块化重写了下两个接口在暴露出来引用,让
微信小程序 audio音频播放详解及实例

微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名类型默认值说明 id String video 组件的唯一标识符, src String 要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name
微信小程序 audio音频播放详解及实例

微信小程序 audio音频播放 audio audio为音频组件,我们可以轻松的在小程序中播放音频. 属性名类型默认值说明 id String video 组件的唯一标识符, src String 要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String 默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效 name
微信小程序 http请求封装详解及实例代码

微信小程序 http请求封装示例代码 wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, method:'POST', header: { 'content-type': 'application/json' }, success: function(res) { console.log(res.data) }, fail: function( res ) { fail( res ); } }) 以上
微信小程序中input标签详解及简单实例

微信小程序中input标签详解及简单实例使用input标签,我们都会,在微信小程序中使用,必定也是可以一下子就会的,但是却有些常用的属性无法按照习惯去使用: 我就用我最常用的来做例子: 一个一个来解读: 首先,我是定义了他的id,这是我们最常用的,所以就配了一个id,毕竟不操作他,又为什么设成输入框呢, 第二,设置他的样式, 第三,设置他的输入类别,以上都是很简单的第四.使用正则l:哎限定输入为纯数字.这点可能有点不理解,这是对他的keyup事件监听,将不是纯数字的list无视掉.注意,是对

微信小程序 常用工具类详解及实例

相关推荐

随机推荐

微信小程序常用工具类详解及实例