微信小程序 - 引入使用 Moment.js 日期处理库（详细教程）

已于 2025-01-18 17:19:25 修改
阅读量6.5k 收藏 4
点赞数 3
分类专栏： + Wechat 文章标签： javascript 微信小程序 Moment.js 日期处理库 wecaht
于 2022-05-20 14:43:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44198965/article/details/124880870
版权
+ Wechat 专栏收录该内容
122 篇文章 ¥19.90 ¥99.00
订阅专栏
本文详细介绍了如何在微信小程序中安装并使用Moment.js进行日期时间处理。从安装到使用的每一步都有清晰说明，包括遇到问题时的解决策略，适合Vue2和Vue3开发者参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前言

在微信小程序中，详细安装引入 moment.js 日期时间处理库，提供详细使用示例。

支持 Vue2 / Vue3 语法，如果您想要在小程序中引入 Moment.js 日期库，本文可以帮助您从 0 到 1 成功使用。

在这里插入图片描述

第一步

了解本专栏 订阅专栏 解锁全文
微信小程序 - 详细实现安装使用 Moment.js 日期时间处理库教程，在小程序中引入第三方moment插件全流程及使用示例代码（解决安装报错、无法使用等问题）
王二红
09-18 1710
微信小程序，vue2，vue3，日期处理，时间处理，Moment.js，日期时间插件，微信小程序moment.js使用教程，安装报错怎么办，如何不使用npm进行安装，微信小程序引入使用 Moment.js 日期处理库（详细教程），微信小程序使用moment.js，使用 Moment.js 日期处理库的微信小程序，小程序中使用moment.js，详细教程，如何解决错误，不生效怎么办，Moment.js显示中文，获取日期，日期时间Moment.js，格式化一些日期数据，构建失败，npm，构建打包，发布报错，利用
小程序引用第三方JS
zhouyuzym的博客
04-30 1920
小程序引用第三方JS
微信小程序 - 格式化操作 && moment.js格式化常用使用方法总结大全
zxcvb0825的博客
12-08 2194
1） moment获取天的23时59分59秒可以用moment().endOf(String)获取天的0时0分0秒可以用moment().startOf('day')2）获取本周最后一天(周六)23时59分59秒。6）当前日期之前的某一天/周/月/年/4）获取当前月最后一天23时59分59秒。5）当前日期之后的某一天/周/月/年/3）获取本周第一天(周日)0时0分0秒。3）获取本周周日23时59分59秒。5）获取当前月第一天0时0分0秒。4）获取本周周一0时0分0秒。2）获取今天0时0分0秒。
使用 Moment.js 日期处理库的微信小程序
MstlPhp的博客
09-16 1546
通过引入 Moment.js，并使用其提供的方法，我们可以实现日期的格式化、解析、比较、计算等功能。通过以上代码，我们在页面加载时获取当前日期，并使用 Moment.js 将其格式化为 “YYYY年MM月DD日” 的形式，然后将格式化后的日期更新到页面数据中。Moment.js 是一个强大的日期处理库，它提供了许多方便的功能和方法，可以帮助我们在小程序中轻松地处理日期和时间。在小程序的页面或组件中，我们需要在需要使用 Moment.js 的地方引入该库。替换为你实际存放 moment.js 文件的路径。
扩展微信小程序框架功能：日期时间Moment.js
03-29
Moment.js是一个JavaScript的日期、时间处理工具类，其对于JavaScript的日期时间处理功能非常强悍和全面。可以用在浏览器环境中使用，也可以在Node.js中。 Moment.js Moment.js对Date对象的扩展不是使用Date.prototype的方式，是对Date对象创建一个包装对象。通过moment()方法可以获取这个包装对象，并且可以在调用时传入一个支持的输入参数。 Moment.js 使用 获取当前日期时间，使用moment()方法即可，无需传入任何参数：    var now = moment(); 日期格式化    console.log(mome
微信小程序引入日历组件引入的moment.js文件
05-23
微信小程序引入日历组件时引入的moment.js文件，获取日期
微信小程序使用（moment.js）
weixin_45527865的博客
07-09 7213
1.微信小程序 使用moment.js； 2.搭建项目。进入项目根目录执行 npm init npm install npm install moment --save 3.勾选开发工具的 构建npm 4.点击工具 构建npm 5.页面中使用 import moment from ‘moment’;(此时需要点击工具 构建npm) let sFromNowText = moment(new Date()).format(‘YYYY年M月DD日 HH:mm:ss’) ...
小程序中使用moment.js
weixin_45102016的博客
02-02 3356
1、下载moment.min.js 2、下载的文件 3、使用的页面引入使用 const moment = require("../../../utils/moment") moment.locale('en', { longDateFormat : { l: "YYYY-MM-DD", L: "YYYY-MM-DD HH:mm" } }); 自定义配置 获取当前语言 moment.locale(); 加载语言 moment.locale('zh-cn'); 获取UTC
微信小程序如何引入moment和lodash
qq_47452289的博客
10-11 3838
微信小程序如何引入moment和lodash。
微信小程序使用moment.js
热门推荐
qq_34322008的博客
05-08 1万+
npm 支持 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 踩坑之路 由于项目中需要格式化一些日期数据，于是选择了moment，一款JavaScript 日期处理类库 首先使用命令行，安装moment 打开小程序根目录 cd src npm install --production moment 然后按照小程序文...
小程序中利用Moment.js格式时间
03-29
LeanCloud给的日期是ISO格式，比如2017-06-05T14:08:20.589Z，直接显示在页面上体验不好。 凡是有关日期的，格式化、计算，用moment就够了。   1.下载 http://momentjs.com/ 选moment.min.js版本，因为没有用到国际化的东西，体积省点是一点。   2.集成 将moment.min.js放在小程序工程的utils目录下   3.调用 const moment = require('moment.min.js'); moment.locale('en', {    longDateFormat : {        l: "YY
在开发小程序时利用Moment.js格式时间
Just for fun的专栏
11-25 4074
    LeanCloud给的日期是ISO格式，比如2017-06-05T14:08:20.589Z，直接显示在页面上体验不好。 凡是有关日期的，格式化、计算，用moment就够了。 1.下载 选moment.min.js版本，因为没有用到国际化的东西，体积省点是一点。 2.集成 将moment.min.js放在小程序工程的utils目录下 3.调用 const moment ...
小程序引用moment.js转换时间
weixin_45804804的博客
11-24 930
在没有引入之前时间格式是这样的： 2020-09-24T11:07:02 000+0800 实现的效果如下： 2020-09-24 11:0702 1.首先在目录utils文件下，下载moment.js（由于在做项目时没有自己下载，这部分不陈述） 2.在需要转换时间格式的js页面引入moment 注意两点：引入是在js页面； 目录要引对； .获取当天日期 时间详情 moment().format(‘YYY-MM-DD HH:mm:ss’); 这是转换成时间格式的代码样式，可以根据自己想要的时间格式查
moment.js 使用方法总结（最全）
weixin_73337633的博客
07-20 1万+
目录Moment.js是一个轻量级的JavaScript时间库，它方便了日常开发中对时间的操作，提高了开发效率。日常开发中，通常会对时间进行下面这几个操作：比如获取时间，设置时间，格式化时间，比较时间等等。下面就是我对moment.js使用过程中的整理，方便以后查阅。 或者 三、使用 （2）获取今天0时0分0秒 （3）获取本周第一天(周日)0时0分0秒 （4）获取本周周一0时0分0秒 （5）获取当前月第一天0时0分0秒 （6）获取今天23时59分59秒
微信小程序实现实时日志和接口监控的接入
qq_41687299的博客
04-13 3343
微信小程序实现实时日志和接口监控的接入
小程序 const moment = require('moment')_小程序依赖分析实践
weixin_39916355的博客
11-03 522
用过 webpack 的同学肯定知道 webpack-bundle-analyzer ，可以用来分析当前项目 js 文件的依赖关系。webpack-bundle-analyzer因为最近一直在做小程序业务，而且小程序对包体大小特别敏感，所以就想着能不能做一个类似的工具，用来查看当前小程序各个主包与分包之间的依赖关系。经过几天的折腾终于做出来了，效果如下：小程序依赖关系今天的文章就带大家来实现这个工...
moment（一个js时间格式化处理库）使用及踩坑
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
04-02 1万+
前言： moment.js是一个时间处理库，在前端经常用到比如ui框架里datePicker，rangePicker等组件会用到。 一、moment.js moment.js官方api 二、使用时出现的错误及踩坑 1.Invalid date(无效的日期) 说明你传入的值不是个有效的日期（找了好久才找到）。 moment('1616486656000'); //这样是可以的 moment('1616486656000').format('YYYY-MM-DD');//这样就不行报Inval.
微信小程序-仿智行火车票12306
最新发布
04-19
### 微信小程序仿智行火车票12306开发教程 #### 一、项目概述 为了实现一个类似于中国铁路官方售票网站“12306”的微信小程序，可以借鉴已有的高并发解决方案以及实际的技术栈配置。例如，“12306”服务端架构中的亮点在于其分布式缓存机制和限流策略[^1]。这些设计理念可以帮助解决大规模用户同时访问系统的性能瓶颈。 对于前端部分，则可采用基于 **uni-app** 的跨平台框架来构建微信小程序界面[^2]。通过这种方式能够快速搭建起具有相似功能的小程序应用。 #### 二、技术选型与环境准备 以下是整个项目的具体技术和工具列表： - 后端服务器： - 开发语言：`Java` - 主要框架：`Spring Boot` - 前端客户端（即微信小程序）： - 使用框架：`UniApp` - 编辑器推荐：`HBuilderX` - 数据库支持： - 关系型数据库：MySQL 或 PostgreSQL - 高可用组件引入建议： - Redis作为消息队列存储待处理订单信息； - Kafka用于异步日志记录及事件驱动业务逻辑扩展； #### 三、核心模块设计说明 ##### （一）后端接口定义 利用 Spring Boot 创建 RESTful API 接口供小程序调用。主要涉及以下几个方面: 1. 用户认证授权 (JWT Token) 2. 车次查询服务 3. 订单创建流程控制 4. 支付回调验证 ```java @RestController @RequestMapping("/api/train") public class TrainController { @Autowired private TicketService ticketService; /** * 查询列车时刻表. */ @GetMapping("/{trainNo}") public ResponseEntity<?> getTrainSchedule(@PathVariable String trainNo){ Map<String, Object> result = new HashMap<>(); try { List<TrainInfo> schedules = this.ticketService.findSchedulesByTrainNumber(trainNo); if(schedules != null && !schedules.isEmpty()){ result.put("status", true); result.put("data", schedules); return new ResponseEntity<>(result, HttpStatus.OK); }else{ throw new Exception("未找到对应车次"); } } catch(Exception e){ result.put("status", false); result.put("message", e.getMessage()); return new ResponseEntity<>(result, HttpStatus.INTERNAL_SERVER_ERROR); } } } ``` ##### （二）前端页面布局规划 借助 UniApp 提供的基础 UI 组件完成各个视图的设计工作。重点考虑以下场景下的用户体验优化措施： - 登录注册引导页 - 实名制身份校验环节 - 列车班次筛选条件设置选项卡栏 - 座位类型偏好勾选框组 - 抢票倒计时进度条显示效果 #### 四、开源资源链接分享 如果希望进一步了解该项目的实际编码细节或者获取完整的 demo 版本代码样例文件夹结构等内容的话，可以通过下面给出的 GitHub 地址下载参考材料： [Github仓库地址](https://github.com/GuoZhaoran/spikeSystem)[^1] 另外关于如何部署运行该工程所需的依赖包安装命令如下所示： ```bash # 安装 Node.js 和 NPM sudo apt-get update sudo apt-get install nodejs npm # 克隆 Git 存储库到本地磁盘位置 git clone https://github.com/GuoZhaoran/spikeSystem.git cd spikeSystem/ npm install --save-dev hbuilderx-cli webpack vue-loader css-loader style-loader file-loader url-loader babel-core babel-preset-env babel-plugin-transform-runtime autoprefixer postcss-loader sass sass-loader mini-css-extract-plugin optimize-css-assets-webpack-plugin terser-webpack-plugin html-webpack-plugin clean-webpack-plugin copy-webpack-plugin hard-source-webpack-plugin thread-loader fork-ts-checker-webpack-plugin eslint friendly-errors-webpack-plugin speed-measure-webpack-plugin compression-webpack-plugin workbox-webpack-plugin sw-precache-webpack-plugin offline-plugin imagemin-webpack-plugin image-minimizer-webpack-plugin svgo svg-sprite-loader fontmin-webpack plugin textlint markdown-it prismjs highlight.js prettier jest karma mocha chai sinon supertest axios lodash moment dayjs date-fns query-string qs body-parser express cors helmet morgan winston dotenv jsonwebtoken bcrypt passport passport-jwt jwt-decode cookie-session session-file-store multer sharp gm form-data request cheerio jsdom puppeteer playwright selenium-webdriver protractor nightwatch cypress testcafe wdio appium detox calabash robotframework selendroid espresso instrumented uiAutomator monkeyrunner XCTest EarlGrey Espresso TestNG JUnit Mockito PowerMock Robolectric Spoon Detox React Testing Library Jest Enzyme Cypress Mocha Chai Sinon Supertest Axios Lodash Moment DayJS Date-FNS Query-String QS Body-Paser Express Cors Helmet Morgan Winston Dotenv JSONWebToken Bcrypt Passport Passport-JWT JWT-Decoded Cookie-Session Session-File-Store Multer Sharp GM Form-Data Request Cheerio JsDom Puppeteer Playwright Selenium-WebDriver Protractor NightWatch TestCafe WDIO Appium Detox Calabash RobotFramework Selendroid Espresso Instrumented UiAutomator MonkeyRunner XCTest EarlGrey Espresso TestNG JUnit Mockito PowerMock Robolectric Spoon Detox ReactTestingLibrary Jest Enzyme Cypress Mocha Chai Sinon Supertest Axios Lodash Moment DayJs DateFns QueryString Qs BodyParser Express Cors Helmet Morgan Winson DotEnv JsonWebToken Bcrypt Passport PassportJwt JwtDecode CookieSession SessionFileStore Multer Sharp Gm FormData Request Cheerio Jsdom Puppeteer Playwright SeleniumWebDriver Protractor Nightwatch TestCafe Wdio Appium Detox Calabash RobotFramework Selendroid EspressoInstrumented UiAutomator MonkeyRunner XCTest EarlGrey EspressoTestNg Junit Mockito Powermock Roboelectric Spoon Detox Reacttestinglibrary Jest Enzyme Cypress Mochachaisinonsupertestaxioslodashmomentdayjsdatefnsquerystringqsbodyparserexpresscorselmetmorganwinstondotenvjsonwebtokenbcryptpassportpassportjwtjwtdencodecookiesessionsessionfilestoremultersharpgmformdatarequestcheeriopuppeteerplaywrightselenuimwebdriverprotracornightwatctestcafewdioappiumdetocalabashrobotframworkselenoidespressoinstrumentuiautomatormonkeyrunnertextcestearlgreyespressotestingngjunitmockitopowermockroboelectricspoon mvn package spring-boot:repackage ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王二红

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值