隨著行動應用程式的發展，為了大幅減少開發人員的工作量，前端技術已經在不斷地提高，並且越來越多的跨平台技術出現。 UniApp作為一個優秀的跨平台開發框架，它可以讓我們使用一套程式碼，並在多個平台上進行編譯，從而獲得高效能、易擴展和可維護的應用程式。在UniApp開發過程中，我們不僅需要掌握各種UI元件的使用方法，還需要了解如何在專案中引入JS檔案。在本文中，我將介紹UniApp中如何引入JS的方法。
一、在vue檔案中直接引入JS檔案
在UniApp開發中，我們使用的是Vue框架，因此，可以直接在.vue檔案中引入JS檔案。我們可以將JS檔案存放在專案的根目錄下，或是在src目錄下新建一個js資料夾或其他目錄來存放JS檔案。例如，我們可以在src目錄下建立一個libs資料夾，並在該資料夾下新建一個util.js的文件，用於存放JS程式碼，之後在.vue檔案中透過import語句來引入：
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
import util from "@/libs/util.js"
export default {
data() {
return {
message: util.getMessage()
}
}
}
</script>在上述程式碼中，我們透過import語句來引入位於/src/libs/util.js檔案中的程式碼，並在data()方法中呼叫對應的函數。其中，@代表src目錄。
二、在main.js中全域引入JS檔案
UniApp中的main.js檔案是入口文件，在該檔案中引入的JS程式碼將會在整個應用程式中生效。我們可以將全域引入的JS檔案存放在src目錄下的assets/js資料夾中，例如：
// src/assets/js/util.js
const util = {
getMessage() {
return "Hello World!"
}
}
export default util之後，在main.js檔案中透過import語句來引入：
// 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()在上述程式碼中，我們透過Vue.prototype.$util = util來實作將util.js檔案全域註冊到Vue元件中。之後，在.vue檔案中可以直接透過this.$util.getMessage()來呼叫util.js檔案中的程式碼。
三、使用uni.require方法引入JS文件
在UniApp中，如果需要引入一個非Vue元件的JS文件，可以使用uni.require方法來進行引入。此方法傳回引入的JS程式碼，並可透過module.exports將程式碼中的函數、物件或類別進行匯出。例如，在src目錄下新建一個common.js文件，存放一些公共函數或變數：
// src/common.js
const common = {
PI: 3.14,
sayHello(name) {
return `Hello ${name}!`
}
}
module.exports = common之後在其他文件中引入該文件：
// 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>在上述程式碼中，我們使用uni.require方法來引入common.js檔案中的程式碼，並在onLoad函數中呼叫其中的方法或變數。注意，uni.require方法中的路徑表示相對於@/目錄的相對路徑，如果是絕對路徑則需要以/開頭。
總結
在UniApp中，我們可以使用以上三種方法來引入JS檔案。在具體操作中，可以根據實際需求和項目的特性進行選擇。無論選擇哪種方式，我們都需要了解一些JS基礎知識，並做好程式碼模組化，以提高程式碼的可維護性和可重複使用性。希望本文能幫助大家更好地開發UniApp應用程式。
以上是uniapp如何引入js的詳細內容。更多資訊請關注PHP中文網其他相關文章！
