uniapp 공개 메소드에 의해 도입된 구현 메소드에 대해 토론

모바일 인터넷의 발전과 함께 APP 개발은 주요 기업에서 널리 사용하는 방법 중 하나가 되었습니다. APP 개발 과정에서 대부분의 애플리케이션은 유지 관리를 용이하게 하기 위해 일부 공개 메소드를 플러그인 형태로 프로젝트에 도입할 수 있습니다. 현재 가장 인기 있는 MVVM 프레임워크 중 하나인 uniapp은 플러그인을 도입하는 매우 편리한 방법을 제공합니다. 이 기사에서는 uniapp 공개 메서드 도입의 구현 방법에 대해 설명합니다.

1. 플러그인 프로젝트 생성

먼저 플러그인 프로젝트를 생성해야 합니다(플러그인 프로젝트는 기본적으로 일반 uniapp 프로젝트와 동일합니다). 프로젝트 디렉토리의 uni_modules"(그렇지 않은 경우), 이 폴더는 플러그인을 저장하는 데 사용됩니다.

2. 공개 메소드를 플러그인으로 캡슐화합니다.

프로젝트에 공개 메소드를 작성합니다(아래 예시 참조):

export default {
  toast: (msg, duration = 1500, position = "bottom") => {
    uni.showToast({
      title: msg,
      icon: "none",
      duration: duration,
      position: position
    });
  }
};

공개 메소드를 플러그인으로 캡슐화합니다. 단계는 다음과 같습니다.

1. uni_modules에서 code> 폴더 아래에 <code>.npmignore 파일을 생성하고 .vscode, .git 등을 추가합니다. 패키징하지 않은 폴더 또는 파일.
uni_modules文件夹下创建一个.npmignore文件，添加.vscode、.git等文件夹或文件不进行打包。
2. 在uni_modules文件夹下创建一个名为your-plugin的文件夹，your-plugin为插件的名称。
3. 在your-plugin文件夹下创建一个package.json文件。

{
  "name": "@uni/your-plugin",
  "version": "1.0.0",
  "main": "index.js",
  "description": "your description",
  "author": "your name",
  "license": "MIT",
  "keywords": ["uni", "plugin"]
}

其中，name字段为插件的名称，格式为@uni/插件名称，main字段为入口文件，keywords标签中一定要包含关键字uni和plugin。

4. 在your-plugin文件夹下创建一个index.js文件。

import toast from "./toast.js";

const Plugin = {
  toast
};

export default {
  install(Vue) {
    Object.keys(Plugin).forEach(key => {
      Vue.prototype[`$${key}`] = Plugin[key];
    });
  }
};

其中，toast为公共方法，Plugin对象中存储了所有需要暴露的公共方法，install方法用于安装插件。

3. 推送到 npmjs

将插件推送到npmjs即可供其他项目引用，步骤如下：

1. 在[npmjs官网](https://www.npmjs.com/)上注册账号（如果已有账号则略过该步骤）。
2. 在终端使用npm adduser命令登录。
3. 在your-plugin文件夹下使用命令npm init初始化。

npm init

4. 发布插件，使用命令npm publish。

npm publish

5. 如果需要更新插件，修改版本后再次发布即可。

4. 引入插件

在需要使用公共方法的项目中，引入推送到npmjs的插件，步骤如下：

1. 在项目目录下创建一个名为manifest.json的文件，添加如下代码。

{
  "app-plus": {
    "plugins": {
      "@uni/your-plugin": {
        "version": "^1.0.0",
        "provider": "<your provider>"
      }
    }
  }
}

其中，version字段为插件的版本号，provider字段为插件提供者，需要在插件发布到npmjs时指定。

2. 在需要使用公共方法的页面中，执行如下代码。

import yourPlugin from "@uni/your-plugin";

Vue.use(yourPlugin);

5. 使用公共方法

引入插件后即可在页面中使用公共方法，以下以刚刚创建的toast uni_modules 폴더 아래에 your-plugin이라는 폴더를 만듭니다. 여기서 your-plugin은 플러그인 이름입니다. .

your-plugin 폴더에 package.json 파일을 생성하세요.

this.$toast('Hello world!')

이 중 name 필드는 @uni/plug-in name 형식의 플러그인 이름입니다. 및 main 필드 항목 파일로서 keywords 태그에는 uni 및 plugin 키워드가 포함되어야 합니다.

your-plugin 폴더 아래에 index.js 파일을 생성하세요.

rrreee그 중 toast는 공개 메소드이고, Plugin 객체는 노출이 필요한 모든 공개 메소드를 저장하며, >install 메소드는 플러그인을 설치하는 데 사용됩니다. 🎜🎜3. npmjs로 푸시🎜🎜플러그인을 npmjs로 푸시하면 다른 프로젝트에서 참조할 수 있습니다. 🎜🎜🎜[npmjs 공식 홈페이지](https://www. npmjs.com/) (이미 계정이 있는 경우) 계정이 있는 경우 이 단계를 건너뛰세요. 🎜로그인하려면 터미널에서 npm adduser 명령을 사용하세요. 🎜초기화하려면 your-plugin 폴더에서 npm init 명령을 사용하세요. rrreee

🎜플러그인을 게시하려면 npm 게시 명령을 사용하세요.

rrreee

🎜플러그인을 업데이트해야 하는 경우 버전을 수정하고 다시 게시하세요.

🎜4. 플러그인 도입🎜🎜공개 메소드를 사용해야 하는 프로젝트에서는 npmjs에 푸시된 플러그인을 도입합니다. 🎜🎜🎜라는 파일을 생성합니다. 프로젝트 디렉터리.json 파일에 다음 코드를 추가합니다. rrreee🎜 그 중 version 필드는 플러그인의 버전 번호이고, provider 필드는 플러그인 제공자입니다. , 이는 플러그인이 npmjs에 게시될 때 지정되어야 합니다. 🎜

🎜공개 메소드를 사용해야 하는 페이지에서 다음 코드를 실행하세요.

rrreee🎜5. 공개 메소드 사용🎜🎜플러그인을 도입한 후 페이지에서 공개 메소드를 사용할 수 있습니다. 다음은 바로 toast 메소드의 예입니다. 생성됨:🎜rrreee🎜그렇습니다. uniapp 공개 메소드 도입을 성공적으로 구현했습니다. 🎜🎜요약하자면, 공개 메소드를 플러그인으로 캡슐화하고 이를 npmjs로 푸시하면 프로젝트 개발 효율성과 관리 편의성이 크게 향상될 수 있습니다. 실제 프로젝트에서는 자주 사용되는 몇 가지 메소드를 플러그인으로 캡슐화하여 위와 같은 방식으로 도입할 수 있습니다. 🎜

위 내용은 uniapp 공개 메소드에 의해 도입된 구현 메소드에 대해 토론의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!