uniapp如何引入js

隨著行動應用程式的發展，為了大幅減少開發人員的工作量，前端技術已經在不斷地提高，並且越來越多的跨平台技術出現。 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中文網其他相關文章！