正文

小程序如何轻松调用外部JS，实现功能拓展与代码复用

/0 浏览量
1014

在微信小程序开发中，为了实现功能的拓展和代码的复用，调用外部JavaScript（JS）文件是一种常见且高效的方法。以下将详细介绍如何在微信小程序中轻松实现这一功能。

1. 准备外部JS文件

首先，你需要创建一个外部的JS文件。这个文件可以包含你希望在多个页面或组件中复用的函数、类或者模块。例如，你可以创建一个名为 utils.js 的文件，并在其中定义一些通用的工具函数。

// utils.js
function formatTime(date) {
  const year = date.getFullYear()
  const month = date.getMonth() + 1
  const day = date.getDate()
  const hours = date.getHours()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()

  return [year, month, day].map(formatNumber).join('-') + ' ' + [hours, minutes, seconds].map(formatNumber).join(':')
}

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

2. 在小程序项目中引入外部JS文件

在微信小程序项目中，你可以通过以下几种方式引入外部JS文件：

2.1 在页面的 script 标签中引入

在页面的 wxml 文件中，你可以使用 <script> 标签来引入 utils.js。

<!-- 在页面的 wxml 文件中 -->
<script src="/utils/utils.js"></script>

2.2 在组件中引入

在组件的 wxml 文件中，同样使用 <script> 标签引入。

<!-- 在组件的 wxml 文件中 -->
<script src="/utils/utils.js"></script>

2.3 在全局范围内引入

在 app.js 或 app.wxss 中引入，可以使整个小程序都能访问到这个JS文件。

// app.js
require('/utils/utils.js')

3. 在页面或组件中使用外部JS文件中的函数

一旦外部JS文件被引入，你就可以在页面的JS文件或者组件的JS文件中使用这些函数了。

// 在页面的 JS 文件中
Page({
  onLoad: function() {
    const date = new Date()
    this.setData({
      formattedTime: formatTime(date)
    })
  }
})

4. 注意事项

  • 确保外部JS文件与页面或组件的路径正确无误。
  • 引入的JS文件中的变量或函数，在页面或组件中可以直接访问，无需使用额外的命名空间。
  • 外部JS文件中的代码不会影响小程序的其他部分，除非在全局范围内引入。

通过以上步骤，你可以在微信小程序中轻松调用外部JS文件，实现功能的拓展和代码的复用。这不仅有助于提高开发效率，还能使代码结构更加清晰，便于维护。

-- 展开阅读全文 --