【愚公系列】《微信小程序开发解析》003-小程序框架（项目文件和逻辑层）

???? 作者简介，愚公搬代码
????《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，****博客专家，****商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
????《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
????《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
????????欢迎 ????点赞✍评论⭐收藏

文章目录

• ????前言
• ????一、小程序框架
• • ????1.新建项目
  • ????2.程序清单
  • • ????2.1
    • ????2.2
    • ????2.3
  • ????3.响应式数据绑定
  • • ????3.1 `` 文件
    • ????3.2 `` 文件
    • ????3.3 `` 文件
    • ????3.4 交互流程解析
  • ????4.逻辑层
  • • ????4.1 `App` 函数
    • ????4.2 `Page` 函数
    • ????4.3 `getApp` 函数
    • ????4.4 `getCurrentPages` 函数
    • ????4.5 具体用途和示例
    • ????4.6 模块
    • • ☀️4.6.1 创建模块
      • ☀️4.6.2 使用模块
      • ☀️4.6.3 导出和导入
      • • ????4.6.3.1 导出多个函数或变量
        • ????4.6.3.2 导入多个函数或变量
      • ☀️4.6.4 使用 ES6 模块语法
      • • ????4.6.4.1 创建模块
        • ????4.6.4.2 使用模块
      • ☀️4.6.5 使用第三方 NPM 包
• ????感谢：给读者的一封信

---

????前言

小程序框架是一种提供基础开发框架和工具的软件开发框架，用于简化和加速小程序应用程序的开发过程。小程序框架提供了一套规范和标准，帮助开发者快速构建小程序应用并管理应用的结构、数据流和页面之间的交互。

????一、小程序框架

????1.新建项目

新建一个小程序项目，删除多余的示例程序，保留最小程序集合。调整后的程序如图所示。

????2.程序清单

????2.1

// 
App({
  /**
   * 当小程序初始化完成时，会触发onLaunch（全局只触发一次）
   */
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送  到后台换取 openId, sessionKey, unionId
      }
    })
  },
  /**
   * 当小程序启动，或从后台进去前台显示时，会触发onShow
   */
  onShow(opt){

  },
  /**
   * 当小程序从前台进入后台时，会触发onHide
   */
  onHide(opt){

  },
  /**
   * 当小程序发生脚本错误，或API调用失败时，会触发onError并带上错误信息
   */
  onError(msg){

  },
  globalData: {
    userInfo: null
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40

????2.2

{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "backgroundTextStyle":"light",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "Weixin",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "style": "v2",
  "sitemapLocation": ""
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

????2.3

// pages/index/
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63
• 64
• 65
• 66

????3.响应式数据绑定

????3.1 文件

// pages/index/
Page({

  /**
   * 页面的初始数据
   */
  data: {
    arg: 'this is test'  // 定义页面的初始数据，包括一个名为 arg 的属性，值为 'this is test'
  },

  but_click() {
    // 点击 button 时的处理函数
    this.setData({
      arg: '点击button修改的变量'  // 修改 arg 的值为 '点击button修改的变量'
    })
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

在这个文件中，我们定义了一个页面的基础结构。Page 函数用于注册一个页面，并接收一个对象作为参数，这个对象定义了页面的初始数据、生命周期函数和事件处理函数。

• data 对象定义了页面的初始数据。在这里，我们定义了一个键 arg，值为 'this is test'。
• but_click 方法是一个事件处理函数，会在用户点击绑定了 bindtap="but_click" 的按钮时被调用。调用 方法，更新 data 对象中的 arg 属性，将其值改为 '点击button修改的变量'。

????3.2 文件

<!--pages/index/-->
<view>
  {{arg}}
</view>
<input value="{{arg}}" />
<button bindtap="but_click">点击button</button>

• 1
• 2
• 3
• 4
• 5
• 6

WXML 文件定义了页面的结构和内容。

• <view> 标签用于显示数据 arg（初始值为 'this is test'），通过双大括号语法 {{arg}} 绑定到 data 中的 arg 属性。
• <input> 标签的 value 属性同样绑定到 arg，显示一个初始值为 'this is test' 的输入框。
• <button> 标签绑定了点击事件 bindtap="but_click"，按钮文字为 “点击button”。当按钮被点击时，会调用 文件中的 but_click 方法。

????3.3 文件

/* pages/index/ */
input {
  border: 1px solid black;  /* 定义 input 标签的边框 */
}
input, view, button {
  margin: 100rpx;  /* 定义 input, view 和 button 标签的外边距 */
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7

WXSS 文件定义了页面的样式。

• input 标签的 border 属性设置了一个黑色的 1 像素实线边框。
• input, view, 和 button 标签都被设置了 margin: 100rpx，这意味着这些元素的外边距都为 100 相对像素（rpx 是微信小程序中的相对单位）。

????3.4 交互流程解析

1. 初始状态：

   • 页面加载时，arg 的初始值为 'this is test'。
   • view 标签显示 'this is test'。
   • input 标签的 value 为 'this is test'。

2. 按钮点击：

   • 用户点击按钮，触发 but_click 方法。
   • but_click 方法调用 ，更新 arg 的值为 '点击button修改的变量'。
   • 因为数据绑定，view 和 input 标签的内容也会自动更新为 '点击button修改的变量'。

在模拟器直接输入不点按钮值是不会变的。

至此说明小程序数据是单向绑定的。

????4.逻辑层

在微信小程序开发中，App、Page、getApp 和 getCurrentPages 是几个重要的全局方法和函数，用于管理应用程序的生命周期、页面的生命周期以及页面之间的导航和数据传递。

????4.1 App 函数

在微信小程序中，App 方法用于注册整个小程序的应用实例，并且接受一个包含各种属性和方法的对象作为参数。这个对象主要包含应用生命周期函数、全局数据和自定义方法。以下是 App 方法的参数表及其详细说明：

App 方法参数表

1. 生命周期函数

   • onLaunch(options)：当小程序初始化完成时触发，全局只触发一次。
   • onShow(options)：当小程序启动或从后台进入前台显示时触发。
   • onHide()：当小程序从前台进入后台时触发。
   • onError(error)：当小程序发生脚本错误或 API 调用失败时触发，带上错误信息。
   • onPageNotFound(options)：当页面不存在时触发。
   • onUnhandledRejection(res)：当未处理的 Promise 拒绝时触发。

2. 全局数据和自定义方法

   • globalData：自定义的全局数据，可以在小程序的任何页面通过 getApp() 获取应用实例，从而访问全局数据。
   • 自定义的方法：可以在对象中定义任意方法，以供全局调用。

详细说明

1. onLaunch(options)

该函数在小程序初始化完成时触发，全局只触发一次，通常用于初始化工作，比如登录、获取用户信息等。

App({
  onLaunch(options) {
    console.log('App Launch', options);
    // 初始化代码
  }
});

• 1
• 2
• 3
• 4
• 5
• 6

2. onShow(options)

该函数在小程序启动或从后台进入前台显示时触发。

App({
  onShow(options) {
    console.log('App Show', options);
    // 小程序进入前台时的处理逻辑
  }
});

• 1
• 2
• 3
• 4
• 5
• 6

3. onHide()

该函数在小程序从前台进入后台时触发。

App({
  onHide() {
    console.log('App Hide');
    // 小程序进入后台时的处理逻辑
  }
});

• 1
• 2
• 3
• 4
• 5
• 6

4. onError(error)

该函数在小程序发生脚本错误或 API 调用失败时触发，带上错误信息。

App({
  onError(error) {
    console.error('App Error', error);
    // 错误处理逻辑
  }
});

• 1
• 2
• 3
• 4
• 5
• 6

5. onPageNotFound(options)

该函数在页面不存在时触发，可以在这里进行重定向等处理。

App({
  onPageNotFound(options) {
    console.log('Page Not Found', options);
    wx.redirectTo({
      url: 'pages/index/index' // 重定向到首页
    });
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

6. onUnhandledRejection(res)

该函数在未处理的 Promise 拒绝时触发。

App({
  onUnhandledRejection(res) {
    console.error('Unhandled Promise Rejection', res);
    // 处理未处理的 Promise 拒绝
  }
});

• 1
• 2
• 3
• 4
• 5
• 6

7. globalData

用于定义全局的数据，可以在小程序的任何页面获取和修改。

App({
  globalData: {
    userInfo: null,
    apiBaseUrl: ''
  }
});

• 1
• 2
• 3
• 4
• 5
• 6

8. 自定义方法

可以在对象中定义任意方法，供全局调用。

App({
  globalData: {
    userInfo: null
  },
  getUserInfo: function() {
    return this.globalData.userInfo;
  },
  setUserInfo: function(info) {
    this.globalData.userInfo = info;
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

示例代码

App({
  onLaunch(options) {
    console.log('App Launch', options);
    // 可以进行登录操作，获取用户信息等
    const logs = wx.getStorageSync('logs') || [];
    logs.unshift(Date.now());
    wx.setStorageSync('logs', logs);
  },
  
  onShow(options) {
    console.log('App Show', options);
  },
  
  onHide() {
    console.log('App Hide');
  },
  
  onError(error) {
    console.error('App Error', error);
  },
  
  onPageNotFound(options) {
    console.log('Page Not Found', options);
    wx.redirectTo({
      url: 'pages/index/index'
    });
  },
  
  onUnhandledRejection(res) {
    console.error('Unhandled Promise Rejection', res);
  },
  
  globalData: {
    userInfo: null,
    apiBaseUrl: ''
  },
  
  getUserInfo() {
    return this.globalData.userInfo;
  },
  
  setUserInfo(info) {
    this.globalData.userInfo = info;
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45

????4.2 Page 函数

在微信小程序中，Page 方法用于注册一个页面。它接受一个对象作为参数，这个对象包含页面的生命周期函数、页面数据及其他自定义方法。

Page 方法参数表

1. 数据

   • data：页面的初始数据，可以在页面渲染时使用。

2. 生命周期函数

   • onLoad(options)：页面加载时触发。参数 options 是打开当前页面路径中的参数。
   • onShow()：页面显示时触发。
   • onReady()：页面初次渲染完成时触发。
   • onHide()：页面隐藏时触发。
   • onUnload()：页面卸载时触发。
   • onPullDownRefresh()：监听用户下拉动作。
   • onReachBottom()：页面上拉触底事件的处理函数。
   • onShareAppMessage(options)：用户点击右上角分享时触发。
   • onPageScroll(object)：页面滚动时触发。
   • onTabItemTap(item)：当前是 tab 页时，点击 tab 时触发。

3. 事件处理函数

   • 事件处理函数：页面中可以定义各种用户交互事件处理函数，例如按钮点击、表单提交等。

4. 自定义方法

   • 自定义方法：可以在对象中定义任意方法，以供页面内部调用。

详细说明

1. data

页面的初始数据，可以在页面结构中绑定，渲染页面。

Page({
  data: {
    message: 'Hello, WeChat!',
    count: 0
  }
});

• 1
• 2
• 3
• 4
• 5
• 6

2. onLoad(options)

页面加载时触发，通常用于初始化页面数据。

Page({
  onLoad(options) {
    console.log('Page Load', options);
    // 初始化页面数据
  }
});

• 1
• 2
• 3
• 4
• 5
• 6

3. onShow()

页面显示时触发，可以在此处理页面显示时的逻辑。

Page({
  onShow() {
    console.log('Page Show');
  }
});

• 1
• 2
• 3
• 4
• 5

4. onReady()

页面初次渲染完成时触发，一般只触发一次。

Page({
  onReady() {
    console.log('Page Ready');
  }
});

• 1
• 2
• 3
• 4
• 5

5. onHide()

页面隐藏时触发。

Page({
  onHide() {
    console.log('Page Hide');
  }
});

• 1
• 2
• 3
• 4
• 5

6. onUnload()

页面卸载时触发，可以在此进行清理工作。

Page({
  onUnload() {
    console.log('Page Unload');
  }
});

• 1
• 2
• 3
• 4
• 5

7. onPullDownRefresh()

监听用户下拉动作，通常用于刷新页面数据。

Page({
  onPullDownRefresh() {
    console.log('Pull Down Refresh');
    // 执行下拉刷新操作
    wx.stopPullDownRefresh(); // 完成后停止刷新
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7

8. onReachBottom()

页面上拉触底事件的处理函数，通常用于加载更多数据。

Page({
  onReachBottom() {
    console.log('Reach Bottom');
    // 加载更多数据
  }
});

• 1
• 2
• 3
• 4
• 5
• 6

9. onShareAppMessage(options)

用户点击右上角分享时触发，可以自定义分享内容。

Page({
  onShareAppMessage(options) {
    return {
      title: '自定义分享标题',
      path: '/pages/index/index'
    };
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

10. onPageScroll(object)

页面滚动时触发，可以获取滚动位置。

Page({
  onPageScroll(object) {
    console.log('Page Scroll', object.scrollTop);
  }
});

• 1
• 2
• 3
• 4
• 5

11. onTabItemTap(item)

当前是 tab 页时，点击 tab 时触发。

Page({
  onTabItemTap(item) {
    console.log('Tab Item Tap', item);
  }
});

• 1
• 2
• 3
• 4
• 5

12. 事件处理函数

可以定义各种用户交互事件的处理函数，例如按钮点击、表单提交等。

Page({
  data: {
    count: 0
  },
  handleButtonClick() {
    this.setData({
      count: this.data.count + 1
    });
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

13. 自定义方法

可以在对象中定义任意方法，以供页面内部调用。

Page({
  customMethod() {
    console.log('Custom Method');
  }
});

• 1
• 2
• 3
• 4
• 5

示例代码

Page({
  data: {
    message: 'Hello, WeChat!',
    count: 0
  },
  
  onLoad(options) {
    console.log('Page Load', options);
    // 初始化页面数据
  },
  
  onShow() {
    console.log('Page Show');
  },
  
  onReady() {
    console.log('Page Ready');
  },
  
  onHide() {
    console.log('Page Hide');
  },
  
  onUnload() {
    console.log('Page Unload');
  },
  
  onPullDownRefresh() {
    console.log('Pull Down Refresh');
    // 执行下拉刷新操作
    wx.stopPullDownRefresh(); // 完成后停止刷新
  },
  
  onReachBottom() {
    console.log('Reach Bottom');
    // 加载更多数据
  },
  
  onShareAppMessage(options) {
    return {
      title: '自定义分享标题',
      path: '/pages/index/index'
    };
  },
  
  onPageScroll(object) {
    console.log('Page Scroll', object.scrollTop);
  },
  
  onTabItemTap(item) {
    console.log('Tab Item Tap', item);
  },
  
  handleButtonClick() {
    this.setData({
      count: this.data.count + 1
    });
  },
  
  customMethod() {
    console.log('Custom Method');
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45
• 46
• 47
• 48
• 49
• 50
• 51
• 52
• 53
• 54
• 55
• 56
• 57
• 58
• 59
• 60
• 61
• 62
• 63

????4.3 getApp 函数

getApp 函数用于获取全局的应用实例。通过这个实例，可以访问在 App 函数中定义的全局数据和方法。

// pages/index/
Page({
  data: {
    arg: 'this is test'
  },
  onLoad: function () {
    const app = getApp();
    console.log(app.globalData.userInfo);  // 访问全局数据
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

????4.4 getCurrentPages 函数

getCurrentPages 函数用于获取当前页面栈的实例列表。页面栈按照页面的打开顺序维护，栈底是首页，栈顶是当前页面。

// pages/index/
Page({
  data: {
    arg: 'this is test'
  },
  onLoad: function () {
    const pages = getCurrentPages();
    console.log(pages);  // 输出当前页面栈中的页面实例
  }
})

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

????4.5 具体用途和示例

1. App 函数：用于定义全局的生命周期和全局数据。通常在 onLaunch 生命周期中进行一些初始化操作，如登录、获取用户信息等。

2. Page 函数：用于定义页面的生命周期、数据和事件处理函数。每个页面都通过 Page 函数来注册。

3. getApp 函数：用于获取全局应用实例，方便在页面中访问和修改全局数据。

4. getCurrentPages 函数：用于获取当前页面栈，主要用于页面导航和数据传递。例如，通过页面栈可以知道从哪个页面跳转过来，从而实现一些特定的业务逻辑。

示例：页面之间的数据传递

假设有两个页面：pageA 和 pageB，需要从 pageA 跳转到 pageB 并传递数据。

：

Page({
  data: {
    message: 'Hello from Page A'
  },
  goToPageB: function () {
    wx.navigateTo({
      url: '/pages/pageB/pageB?message=' + this.data.message,
    });
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

：

<button bindtap="goToPageB">Go to Page B</button>

• 1

：

Page({
  data: {
    message: ''
  },
  onLoad: function (options) {
    // 接收来自 pageA 的数据
    this.setData({
      message: options.message
    });
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

：

<view>{{message}}</view>

• 1

通过这种方式，可以实现页面之间的数据传递和导航。getCurrentPages 可以用于更复杂的场景，如返回前一个页面时进行特定操作等。

????4.6 模块

在微信小程序中，模块化编程可以帮助你更好地组织代码，使其更加清晰和易于维护。微信小程序通过 CommonJS 规范来管理模块。下面是关于微信小程序中模块使用的详细说明：

☀️4.6.1 创建模块

你可以在 utils 或者其他自定义目录中创建 JavaScript 文件作为模块。例如，创建一个 文件：

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

  return [year, month, day].map(formatNumber).join('-');
}

function formatNumber(n) {
  return n.toString().padStart(2, '0');
}

module.exports = {
  formatTime: formatTime,
  formatNumber: formatNumber
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

☀️4.6.2 使用模块

在需要使用这些模块的页面或组件中，通过 require 方法引入模块。例如，在一个页面的 JavaScript 文件中：

// pages/index/
const utils = require('../../utils/');

Page({
  data: {
    currentTime: ''
  },
  
  onLoad() {
    const currentTime = utils.formatTime(new Date());
    this.setData({ currentTime });
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

☀️4.6.3 导出和导入

模块通过 导出，其他文件可以通过 require 导入。以下是更多示例：

????4.6.3.1 导出多个函数或变量

// 
const formatTime = (date) => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  
  return [year, month, day].map(formatNumber).join('-');
};

const formatNumber = (n) => {
  return n.toString().padStart(2, '0');
};

const greeting = "Hello, WeChat!";

module.exports = {
  formatTime,
  formatNumber,
  greeting
};

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20

????4.6.3.2 导入多个函数或变量

// pages/index/
const { formatTime, formatNumber, greeting } = require('../../utils/');

Page({
  data: {
    currentTime: '',
    greetingMessage: ''
  },
  
  onLoad() {
    const currentTime = formatTime(new Date());
    this.setData({ 
      currentTime,
      greetingMessage: greeting
    });
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

☀️4.6.4 使用 ES6 模块语法

微信小程序原生不支持 ES6 的 import 和 export 语法，但可以通过使用一些工具（如 Babel 或 TypeScript）进行编译，实现类似的效果。

例如，使用 Babel 时，可以这样写：

????4.6.4.1 创建模块

// 
export const formatTime = (date) => {
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  
  return [year, month, day].map(formatNumber).join('-');
};

export const formatNumber = (n) => {
  return n.toString().padStart(2, '0');
};

export const greeting = "Hello, WeChat!";

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14

????4.6.4.2 使用模块

// pages/index/
import { formatTime, formatNumber, greeting } from '../../utils/';

Page({
  data: {
    currentTime: '',
    greetingMessage: ''
  },
  
  onLoad() {
    const currentTime = formatTime(new Date());
    this.setData({ 
      currentTime,
      greetingMessage: greeting
    });
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17

☀️4.6.5 使用第三方 NPM 包

微信小程序支持使用 NPM 包。你需要先使用命令行工具在项目根目录下初始化 NPM：

npm init

• 1

然后安装你需要的 NPM 包：

npm install lodash --save

• 1

之后在小程序开发工具中构建 NPM：

1. 打开微信开发者工具。
2. 在工具栏中点击 “工具” -> “构建npm”。

构建完成后，你可以在小程序中使用这些 NPM 包：

// pages/index/
const _ = require('lodash');

Page({
  data: {
    array: [1, 2, 3, 4, 5]
  },
  
  onLoad() {
    const reversedArray = _.reverse([...this.data.array]);
    this.setData({ array: reversedArray });
  }
});

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

---

????感谢：给读者的一封信

亲爱的读者，

我在这篇文章中投入了大量的心血和时间，希望为您提供有价值的内容。这篇文章包含了深入的研究和个人经验，我相信这些信息对您非常有帮助。

如果您觉得这篇文章对您有所帮助，我诚恳地请求您考虑赞赏1元钱的支持。这个金额不会对您的财务状况造成负担，但它会对我继续创作高质量的内容产生积极的影响。

我之所以写这篇文章，是因为我热爱分享有用的知识和见解。您的支持将帮助我继续这个使命，也鼓励我花更多的时间和精力创作更多有价值的内容。

如果您愿意支持我的创作，请扫描下面二维码，您的支持将不胜感激。同时，如果您有任何反馈或建议，也欢迎与我分享。

再次感谢您的阅读和支持！

最诚挚的问候， “愚公搬代码”