How to introduce js in uniapp

With the development of mobile applications, in order to greatly reduce the workload of developers, front-end technology has been continuously improved, and more and more cross-platform technologies have emerged. As an excellent cross-platform development framework, UniApp allows us to use a set of codes and compile them on multiple platforms to obtain high-performance, easily scalable and maintainable applications. During the UniApp development process, we not only need to master the use of various UI components, but also need to understand how to introduce JS files into the project. In this article, I will introduce how to introduce JS in UniApp.

1. Directly introduce JS files into the vue file

In UniApp development, we use the Vue framework, so we can directly introduce JS files into the .vue file. We can store the JS file in the root directory of the project, or create a new js folder or other directory in the src directory to store the JS file. For example, we can create a libs folder in the src directory, and create a new util.js file in the folder to store JS code, and then introduce it through the import statement in the .vue file:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
import util from "@/libs/util.js"

export default {
  data() {
    return {
      message: util.getMessage()
    }
  }
}
</script>

In the above code, we introduce the code located in the /src/libs/util.js file through the import statement, and call the corresponding function in the data() method. Among them, @ represents the src directory.

2. Globally introduce JS files in main.js

The main.js file in UniApp is the entry file, and the JS code introduced in this file will take effect in the entire application. . We can store the globally imported JS files in the assets/js folder in the src directory, for example:

// src/assets/js/util.js
const util = {
  getMessage() {
    return "Hello World!"
  }
}

export default util

Afterwards, import them through the import statement in the main.js file:

// main.js
import Vue from 'vue'
import App from './App'

import util from './assets/js/util.js'

Vue.config.productionTip = false

Vue.prototype.$util = util

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

In the above code, we use Vue.prototype.$util = util to globally register the util.js file into the Vue component. After that, the code in the util.js file can be called directly through this.$util.getMessage() in the .vue file.

3. Use the uni.require method to introduce JS files

In UniApp, if you need to introduce a JS file that is not a Vue component, you can use the uni.require method to introduce it. This method returns the introduced JS code, and can export the functions, objects or classes in the code through module.exports. For example, create a new common.js file in the src directory to store some public functions or variables:

// src/common.js
const common = {
  PI: 3.14,
  
  sayHello(name) {
    return `Hello ${name}!`
  }
}

module.exports = common

Then introduce the file in other files:

// src/pages/index/index.vue
<script>
export default {
  onLoad() {
    const common = uni.require('@/common.js')
    console.log(common.PI) // 输出3.14
    console.log(common.sayHello('UniApp')) // 输出Hello UniApp!
  }
}
</script>

In the above code, we use uni.require method to introduce the code in the common.js file and call the methods or variables in the onLoad function. Note that the path in the uni.require method represents a relative path relative to the @/ directory. If it is an absolute path, it needs to start with /.

Summary

In UniApp, we can use the above three methods to introduce JS files. In specific operations, selection can be made based on actual needs and project characteristics. No matter which method we choose, we need to understand some basic knowledge of JS and do a good job in code modularization to improve the maintainability and reusability of the code. I hope this article can help you better develop UniApp applications.

The above is the detailed content of How to introduce js in uniapp. For more information, please follow other related articles on the PHP Chinese website!