探討一下uniapp公共方法引進的實作方法

隨著行動互聯網的發展，開發APP已成為各大企業廣泛採用的方式之一。而在APP開發的過程中，大多數應用都會涉及一些公共方法的使用，為了方便維護和管理，我們可以將這些公共方法以插件的方式引入專案中。而目前較受歡迎的MVVM框架之一——uniapp，已經提供了非常方便的插件引入方式，本文將帶大家一起來探討一下uniapp公共方法引入的實現方法。

1. 建立外掛程式專案

首先我們需要建立一個外掛程式專案（外掛程式專案和普通uniapp專案基本上相同），在建立專案之後我們需要在專案目錄下建立一個名為「uni_modules 」的資料夾（如果沒有），該資料夾用於存放插件。

2. 將公共方法封裝為插件

在專案中編寫公共方法（以下以toast為例）：

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

將該公共方法封裝為插件，步驟如下：

1. 在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>"
      }
    }
  }
}</your>

其中，version欄位為外掛程式的版本號，provider欄位為外掛程式提供者，需要在外掛程式發佈到npmjs時指定。

2. 在需要使用公共方法的頁面中，執行以下程式碼。

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

Vue.use(yourPlugin);

5. 使用公共方法

引入外掛程式後即可在頁面中使用公共方法，以下以剛剛建立的toast方法為例：

this.$toast('Hello world!')

至此，我們成功實現了uniapp公共方法的引進。

總結一下，將公共方法封裝為外掛程式並推送到npmjs，可以大大提高專案開發的效率和管理的便利性。在實際專案中，我們可以將一些經常使用的方法封裝為插件，以以上的方式引入即可。

以上是探討一下uniapp公共方法引進的實作方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！