微信小程序开发如何引入js

微信小程序开发如何引入js

随着移动互联网的快速发展，微信小程序作为一种轻量级的应用程序，因其便捷、高效的特点受到广大用户的喜爱，在微信小程序开发过程中，JavaScript（简称js）是必不可少的编程语言，如何引入js到微信小程序中呢？下面就来为大家详细介绍一下。

🔍 1. 通过外部链接引入

在微信小程序的app.json文件中，我们可以通过script标签来引入外部的js文件,具体操作如下：

1. 在项目根目录下创建一个名为utils的文件夹，并在其中创建一个名为common.js的js文件。
2. 在common.js文件中编写需要复用的js代码。
3. 打开app.json文件，在script数组中添加以下代码：

{
  "script": [
    "utils/common.js"
  ]
}

这样，common.js文件中的js代码就被引入到微信小程序中了。

🔍 2. 通过页面引入

除了在全局范围内引入js文件外，我们还可以在页面中单独引入js文件,具体操作如下：

1. 在页面的json文件中,添加以下代码：

{
  "usingComponents": {}
}

2. 在页面的wxml文件中,添加以下代码：

<script src="utils/common.js"></script>

这样，common.js文件中的js代码就被引入到当前页面中了。

🔍 3. 使用ES6模块化引入

微信小程序支持ES6模块化语法，我们可以使用import和export关键字来引入和导出模块,具体操作如下：

1. 在common.js文件中，使用export关键字导出需要复用的函数或变量：

// common.js
export function test() {
  console.log('Hello, world!');
}

2. 在需要引入的页面或全局文件中，使用import关键字导入模块：

// 页面或全局文件
import { test } from 'utils/common.js';
test(); // 输出：Hello, world!

通过以上三种方法，我们可以在微信小程序中引入js文件，实现代码的复用和模块化，在实际开发过程中，可以根据项目需求选择合适的方法，希望这篇文章能帮助到大家！😊