微信小程序 (六)模块化详细介绍

模块化也就是将一些通用的东西抽出来放到一个文件中,通过module.exports去暴露接口。我们在最初新建项目时就有个util.js文件就是被模块化处理时间的

 /**
 * 处理具体业务逻辑
 */
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
}

/**
 * 模块化导出暴露接口
 */
module.exports = {
 formatTime: formatTime
}

使用方式:

//导入模块化方式
var util = require('../../utils/util.js')
Page({
 data: {
 logs: []
 },
 onLoad: function () {
 this.setData({
 logs: (wx.getStorageSync('logs') || []).map(function (log) {
 // 通过暴露的接口调用模块化方法
 return util.formatTime(new Date(log))
 })
 })
 }
})

相关文章:

hello WeApp                     icon组件
Window                            text组件                                switch组件
tabBar底部导航               progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期                    checkbox组件                      toast组件
模块化详                     form组件详                     loading 组件
数据绑定                           input 组件                             navigator 组件
View组件                          picker组件                            audio 组件
scroll-view组件                 radio组件                        video组件
swiper组件                        slider组件                            Image组件

(0)

相关推荐

  • 微信小程序 MINA文件结构

    文件结构 框架程序包含一个描述整体程序的 app 和多个描述各自页面的 page. 一个框架程序主体部分由三个文件组成,必须放在项目的根目录,如下: 文件 必填 作用 app.js 是 小程序逻辑 app.json 是 小程序公共设置 app.wxss 否 小程序公共样式表 一个框架页面由四个文件组成,分别是: 文件类型 必填 作用 js 是 页面逻辑 wxml 是 页面结构 wxss 否 页面样式表 json 否 页面配置 注意:为了方便开发者减少配置项,我们规定描述页面的这四个文件必须具有相

  • 微信小程序 教程之小程序配置

    微信小程序--配置 以下就是小编对小程序配置的资料进行的系统的整理,希望能对开发者有帮助. 我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "na

  • 微信小程序 for 循环详解

    1,wx:for 在组件上使用wx:for控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item 事例如下: wxml文件: <view wx:for="{{items}}"> {{index}}: {{item:one}} </view> js文件: Page({ items:[{ one: "test1", },{ one: "test2&qu

  • 微信小程序 教程之模块化

    系列文章: 微信小程序 教程之模块化 微信小程序 教程之注册页面 微信小程序 教程之注册程序 文件作用域 在JavaScript文件中声明的变量和函数只在该文件中有效:不同的文件中可以声明相同名字的变量和函数,不会互相影响. 通过全局函数getApp()可以获取全局的应用实例,如果需要全局的数据可以在App()中设置,如: // app.js App({ globalData: 1 }) // a.js // The localValue can only be used in file a.j

  • 微信小程序 地图定位简单实例

    微信小程序开发地图定位. 微信小程序 刚刚公布没多久,自己学习一下内容,以便以后的开发,想落后别人,这里做了一个简单的小程序示例,大家可以参考下 要求要完成的功能: 1.要完成的要点是城市定位. 2.就是切换城市. 首页我们先参照微信小程序开放的官方文档找到: 在这里我们可以找到"当前位置经纬度" getLocation: function () { var that = this wx.getLocation( { success: function (res) { console.

  • 微信小程序 教程之注册页面

    系列文章: 微信小程序 教程之模块化 微信小程序 教程之注册页面 微信小程序 教程之注册程序 微信小程序--Page Page()函数用来注册一个页面.接受一个object参数,其指定页面的初始数据.生命周期函数.事件处理函数等. object参数说明: 属性 类型 描述 data Object 页面的初始数据 onLoad Function 生命周期函数--监听页面加载 onReady Function 生命周期函数--监听页面渲染完成 onShow Function 生命周期函数--监听页面

  • 微信小程序 教程之注册程序

    系列文章: 微信小程序 教程之模块化 微信小程序 教程之注册页面 微信小程序 教程之注册程序 App() App()函数用来注册一个小程序.接受一个object参数,其指定小程序的生命周期函数等. object参数说明: 属性 类型 描述 触发时机 onLaunch Function 生命周期函数--监听小程序初始化 当小程序初始化完成时,会触发onLaunch(全局只触发一次) onShow Function 生命周期函数--监听小程序显示 当小程序启动,或从后台进入前台显示,会触发onSho

  • 微信小程序 http请求详细介绍

    在微信小程序进行网络通信,只能和指定的域名进行通信,微信小程序包括四种类型的网络请求. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,wx.dowloadFile三种网络请求为主 设置域名 要微信小程序进行网络通信,必须先设置域名,不然会出现错误: URL 域名不合法,请在 mp 后台配置后重试

  • 微信 小程序Demo导入详细介绍

    微信小程序一出,立马炸开了锅,都去搭建自己的开发环境,我这里也来尝尝先,之前发了一篇文章,有人问Demo怎么导入? Demo源代码(来自网络) 百度: https://pan.baidu.com/s/1o8hJFuU (密码: bsky) 360: https://yunpan.cn/ckvXAacJjvsgR (提取码:3327) demo导入方式: 打开"微信web开发者工具" -->添加项目-->填写AppID(随便填).项目名称(随便填),选择本地开发目录(Demo

  • 微信小程序 Mustache语法详细介绍

    微信小程序  Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序  Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nick

  • 微信小程序 wx:key详细介绍

    微信小程序 wx:key 在自己学习的时候不是多明白到底是怎么回事,经过上网查阅资料,整理下: 个人感觉官方给出的例 子不是很明确,官方解释如下: wx:key 如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/> 中的输入内容,<switch/> 的选中状态),需要使用 wx:key 来指定列表中项目的唯一的标识符. wx:key 的值以两种形式提供 字符串,代表在 for 循环的 array 中 item 的某

  • 微信小程序 闭包写法详细介绍

    微信小程序 闭包写法 在入口处的 app.js 中定义了一个获取用户 OpenId 的函数,在微信的登录接口 wx.login 中发起网络请求.这个函数传入一个回调函数 cb getOpenIdData: function(cb) { var that = this //调用登录接口 wx.login({ success: function(res) { wx.request({ url: 'https://api.weixin.qq.com/sns/jscode2session', data:

  • 微信小程序 自定义创建详细介绍

    微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家.  微信小程序  自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录), 没哪个文件, 哦 原来是 app.json. 还记得 .json是什么文件不, 对喽, 全局配置文件. 没有配置文件就像没有汽油的布加迪, 跑起来才怪. 话

  • 微信小程序  自定义创建详细介绍

    微信小程序 自定义创建,最近自己捣鼓微信小程序的东西,这里对自定义创建做一个简单的资料整理,也许可以帮助大家.  微信小程序  自定义创建 自定义创建与默认创建完全相同, 只是不要勾选quick start即可 淡定(不要看到报错就紧张, 一定要淡定) 看看它说了什么, no such file or directory(没有文件或目录), 没哪个文件, 哦 原来是 app.json. 还记得 .json是什么文件不, 对喽, 全局配置文件. 没有配置文件就像没有汽油的布加迪, 跑起来才怪. 话

  • 微信小程序  Mustache语法详细介绍

    微信小程序  Mustache语法详解 最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序  Mustache语法. 小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档.比如小程序的wxml中的代码: {{userInfo.nick

  • 微信小程序 modal组件详细介绍

    modal弹出框常用在提示一些信息比如:退出应用,清楚缓存,修改资料提交时一些提示等等. 常用属性: wxml <!--监听button点击事件--> <button bindtap="listenerButton" type="primary">弹出modal</button> <!--弹出框--> <modal title="退出应用" hidden="{{hiddenModal

  • 微信小程序 toast组件详细介绍

    toast消息提示框,可用在提示一些信息,比如清楚缓存给用户一个友好的提示!或操作一些请求不想让用户有什么操作,toast也可以做到因为toast显示时其他操作是无效的 主要属性: wxml <!--点击button触发toast--> <button type="primary" bindtap="listenerButton">点击显示toast</button> <!--toast消息框显示3秒,并绑定事件-->

随机推荐