今天20

小程序引入js

原标题：小程序引入js

导读：

在开发小程序的过程中，引入JS文件是不可或缺的一步，我就来详细给大家讲解一下如何在微信小程序中引入JS文件，让你的小程序更加高效、强大，我们要明确一点，JS文件的引入是为了让小...

在开发小程序的过程中，引入JS文件是不可或缺的一步，我就来详细给大家讲解一下如何在微信小程序中引入JS文件，让你的小程序更加高效、强大。

我们要明确一点，JS文件的引入是为了让小程序拥有更丰富的功能，在微信小程序中,主要有以下两种方式引入JS文件：

第一种：在页面的JSON配置文件中引入

每个小程序页面都有自己的JSON配置文件，我们可以在这个文件中引用需要的JS文件,具体操作如下：

打开小程序的页面目录,找到对应的JSON配置文件。
在配置文件中，使用"usingComponents"字段来引入JS文件。

{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

这里，my-component就是我们引入的JS文件路径，需要注意的是，路径要正确无误,否则会导致引用失败。

第二种：在页面的WXML文件中引入

除了在JSON配置文件中引入，我们还可以直接在页面的WXML文件中使用<script>标签引入JS文件,具体步骤如下：

打开小程序的页面目录,找到对应的WXML文件。
在WXML文件中,使用以下代码引入JS文件：

<script src="path/to/your-js-file.js"></script>

这里，path/to/your-js-file.js是JS文件的路径,同样需要注意路径的正确性。

引入JS文件后，如何使用？

引入JS文件后，我们就可以在小程序的逻辑层（JavaScript）中使用它的方法和属性了,以下是一个简单示例：

假设我们引入了一个名为utils.js的JS文件，其中有一个方法sum用于计算两个数的和。
在页面的JS文件中,我们可以这样使用：

// 引入utils.js
const utils = require('../../utils/utils.js');
Page({
  data: {
    result: 0
  },
  onLoad: function() {
    // 调用utils.js中的sum方法
    let result = utils.sum(1, 2);
    this.setData({
      result: result
    });
  }
});

在这个例子中，我们通过require函数引入了utils.js文件，并在onLoad函数中调用了其中的sum方法。