uniapp에 js를 도입하는 방법

모바일 애플리케이션의 발전과 함께 개발자의 작업량을 대폭 줄이기 위해 프런트 엔드 기술이 지속적으로 개선되었으며 점점 더 많은 크로스 플랫폼 기술이 등장했습니다. 탁월한 크로스 플랫폼 개발 프레임워크인 UniApp을 사용하면 일련의 코드를 사용하고 이를 여러 플랫폼에서 컴파일하여 고성능, 쉽게 확장 가능하고 유지 관리 가능한 애플리케이션을 얻을 수 있습니다. UniApp 개발 과정에서 우리는 다양한 UI 구성 요소의 사용을 마스터해야 할 뿐만 아니라 JS 파일을 프로젝트에 도입하는 방법도 이해해야 합니다. 이번 글에서는 UniApp에 JS를 도입하는 방법을 소개하겠습니다.

1. JS 파일을 vue 파일에 직접 삽입

UniApp 개발에서는 Vue 프레임워크를 사용하므로 JS 파일을 .vue 파일에 직접 삽입할 수 있습니다. JS 파일을 프로젝트의 루트 디렉터리에 저장하거나 src 디렉터리에 새 js 폴더나 다른 디렉터리를 만들어 JS 파일을 저장할 수 있습니다. 예를 들어, src 디렉터리에 libs 폴더를 만들고, JS 코드를 저장할 폴더에 새 util.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>

In 위의 코드에서는 import 문을 통해 /src/libs/util.js 파일에 있는 코드를 도입하고 data() 메서드에서 해당 함수를 호출합니다. 그 중 @는 src 디렉토리를 나타낸다.

2. JS 파일을 main.js에 전역적으로 도입

UniApp의 main.js 파일이 엔트리 파일이고, 이 파일에 도입된 JS 코드는 전체 애플리케이션에 적용됩니다. 전역적으로 가져온 JS 파일을 src 디렉터리 아래의 자산/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.js 파일을 Vue 구성 요소에 전체적으로 등록합니다. 이후 .vue 파일의 this.$util.getMessage()를 통해 util.js 파일의 코드를 직접 호출할 수 있습니다.

3. 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 메서드의 경로는 @/ 디렉터리에 대한 상대 경로를 나타냅니다. 절대 경로인 경우 /로 시작해야 합니다.

Summary

UniApp에서는 위의 세 가지 방법을 사용하여 JS 파일을 도입할 수 있습니다. 특정 작업에서는 실제 요구 사항과 프로젝트 특성에 따라 선택할 수 있습니다. 어떤 방법을 선택하든 JS에 대한 기본 지식을 이해하고 코드 모듈화를 잘 수행하여 코드의 유지 관리성과 재사용성을 향상시켜야 합니다. 이 기사가 UniApp 애플리케이션을 더 잘 개발하는 데 도움이 되기를 바랍니다.

위 내용은 uniapp에 js를 도입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!