Bagaimana untuk memperkenalkan js ke dalam uniapp

Dengan pembangunan aplikasi mudah alih, untuk mengurangkan beban kerja pembangun dengan banyak, teknologi bahagian hadapan telah dipertingkatkan secara berterusan, dan semakin banyak teknologi merentas platform telah muncul. Sebagai rangka kerja pembangunan merentas platform yang sangat baik, UniApp membenarkan kami menggunakan set kod dan menyusunnya pada berbilang platform untuk mendapatkan aplikasi berprestasi tinggi, mudah berskala dan boleh diselenggara. Semasa proses pembangunan UniApp, kami bukan sahaja perlu menguasai penggunaan pelbagai komponen UI, tetapi juga perlu memahami cara memperkenalkan fail JS ke dalam projek. Dalam artikel ini, saya akan memperkenalkan cara memperkenalkan JS dalam UniApp.

1 Secara langsung memperkenalkan fail JS ke dalam fail vue

Dalam pembangunan UniApp, kami menggunakan rangka kerja Vue, jadi kami boleh terus memperkenalkan fail JS ke dalam fail .vue. Kami boleh menyimpan fail JS dalam direktori akar projek, atau mencipta folder js baharu atau direktori lain dalam direktori src untuk menyimpan fail JS. Sebagai contoh, kita boleh mencipta folder libs dalam direktori src dan mencipta fail util.js baharu dalam folder untuk menyimpan kod JS, dan kemudian memperkenalkannya melalui pernyataan import dalam fail .vue:

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

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

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

Dalam kod di atas, kami memperkenalkan kod yang terletak dalam fail /src/libs/util.js melalui pernyataan import dan memanggil fungsi yang sepadan dalam kaedah data(). Antaranya, @ mewakili direktori src.

2. Memperkenalkan fail JS secara global dalam main.js

Fail main.js dalam UniApp ialah fail kemasukan dan kod JS yang diperkenalkan dalam fail ini akan berkuat kuasa dalam keseluruhan aplikasi. . Kami boleh menyimpan fail JS yang diimport secara global dalam folder assets/js dalam direktori src, contohnya:

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

export default util

, kemudian memperkenalkannya melalui pernyataan import dalam fail main.js:

// 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()

Dalam kod di atas, kami menggunakan Vue.prototype.$util = util untuk mendaftarkan fail util.js secara global ke dalam komponen Vue. Selepas itu, kod dalam fail util.js boleh dipanggil terus melalui ini.$util.getMessage() dalam fail .vue.

3. Gunakan kaedah uni.require untuk memperkenalkan fail JS

Dalam UniApp, jika anda perlu memperkenalkan fail JS yang bukan komponen Vue, anda boleh menggunakan kaedah uni.require untuk memperkenalkannya. Kaedah ini mengembalikan kod JS yang diperkenalkan dan boleh mengeksport fungsi, objek atau kelas dalam kod melalui module.exports. Sebagai contoh, cipta fail common.js baharu dalam direktori src untuk menyimpan beberapa fungsi atau pembolehubah awam:

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

module.exports = common

Kemudian perkenalkan fail dalam fail lain:

// 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>

Dalam kod di atas, kami gunakan kaedah uni.require untuk memperkenalkan kod dalam fail common.js dan panggil kaedah atau pembolehubah dalam fungsi onLoad. Ambil perhatian bahawa laluan dalam kaedah uni.require mewakili laluan relatif kepada direktori @/ Jika ia adalah laluan mutlak, ia perlu bermula dengan /.

Ringkasan

Dalam UniApp, kami boleh menggunakan tiga kaedah di atas untuk memperkenalkan fail JS. Dalam operasi tertentu, pemilihan boleh dibuat berdasarkan keperluan sebenar dan ciri projek. Tidak kira kaedah yang kita pilih, kita perlu memahami beberapa pengetahuan asas JS dan melakukan kerja yang baik dalam modularisasi kod untuk meningkatkan kebolehselenggaraan dan kebolehgunaan semula kod. Saya harap artikel ini dapat membantu anda membangunkan aplikasi UniApp dengan lebih baik.

Atas ialah kandungan terperinci Bagaimana untuk memperkenalkan js ke dalam uniapp. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!