正文

微信小程序引入js文件的方法详解及实例教程

/0 浏览量
0412

在微信小程序开发中，引入JavaScript（JS）文件是常见的操作，它可以帮助我们复用代码、管理模块、实现复杂的功能等。下面，我将详细讲解微信小程序中引入JS文件的方法，并提供实例教程。

一、引入JS文件的方法

微信小程序支持多种方式引入JS文件，以下是三种常用方法：

1. 在页面的<script>标签中引入

在页面的<script>标签中使用src属性引入JS文件。这种方法适用于在页面级别引入JS文件。

<!-- index.wxml -->
<view>
  <text>这是一个简单的微信小程序页面。</text>
</view>

<!-- index.wxss -->
/* ...样式... */

<!-- index.js -->
// 页面的逻辑
Page({
  onLoad: function() {
    console.log('页面加载完毕');
  }
})

<!-- index.json -->
{
  "navigationBarTitleText": "首页"
}

2. 在组件中引入

在组件的<script>标签中使用src属性引入JS文件。这种方法适用于在组件级别引入JS文件。

<!-- my-component.wxml -->
<view>
  <text>这是一个自定义组件。</text>
</view>

<!-- my-component.wxss -->
/* ...样式... */

<!-- my-component.js -->
// 组件的逻辑
Component({
  properties: {
    someProperty: {
      type: String,
      value: 'some default value'
    }
  },
  methods: {
    someMethod: function() {
      console.log('这是一个自定义组件的方法');
    }
  }
})

3. 在全局范围内引入

在app.js或app.wxss中引入JS文件。这种方法适用于在全局范围内引入JS文件。

// app.js
App({
  onLaunch: function() {
    console.log('应用启动');
  }
})

// app.wxss
/* ...全局样式... */

二、实例教程

以下是一个简单的实例，演示如何在一个微信小程序页面中引入一个自定义的JS文件。

1. 创建自定义JS文件

首先，创建一个名为myUtil.js的JS文件，用于封装一些工具函数。

// myUtil.js
function getDateTime() {
  const now = new Date();
  return `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()} ${now.getHours()}:${now.getMinutes()}:${now.getSeconds()}`;
}

module.exports = {
  getDateTime
}

2. 在页面中引入自定义JS文件

在页面的<script>标签中使用src属性引入myUtil.js文件。

<!-- index.wxml -->
<view>
  <text>当前时间：{{dateTime}}</text>
</view>

<!-- index.wxss -->
/* ...样式... */

<!-- index.js -->
const util = require('../../utils/myUtil.js');
Page({
  data: {
    dateTime: ''
  },
  onLoad: function() {
    this.setData({
      dateTime: util.getDateTime()
    });
  }
})

<!-- index.json -->
{
  "navigationBarTitleText": "首页"
}

在上述实例中，我们创建了一个自定义的JS文件myUtil.js，并封装了一个获取当前日期时间的函数getDateTime。在页面index.js中，我们通过require语法引入了myUtil.js文件，并在页面加载时获取并设置了当前时间。

通过以上讲解和实例，相信你已经掌握了微信小程序中引入JS文件的方法。在实际开发中，灵活运用这些方法，可以帮助你更好地管理代码、提高开发效率。

-- 展开阅读全文 --