随着移动互联网的发展,开发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
});
}
};将该公共方法封装为插件,步骤如下:
- 在
uni_modules文件夹下创建一个.npmignore文件,添加.vscode、.git等文件夹或文件不进行打包。 - 在
uni_modules文件夹下创建一个名为your-plugin的文件夹,your-plugin为插件的名称。 - 在
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。
- 在
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即可供其他项目引用,步骤如下:
刚开始接触模版引擎的 PHP 设计师,听到 Smarty 时,都会觉得很难。其实笔者也不例外,碰都不敢碰一下。但是后来在剖析 XOOPS 的程序架构时,开始发现 Smarty 其实并不难。只要将 Smarty 基础功练好,在一般应用上就已经相当足够了。当然基础能打好,后面的进阶应用也就不用怕了。 这篇文章的主要用意并非要深入探讨 Smarty 的使用,这在官方使用说明中都已经写得很完整了。笔
- 在[npmjs官网](https://www.npmjs.com/)上注册账号(如果已有账号则略过该步骤)。
- 在终端使用
npm adduser命令登录。 - 在
your-plugin文件夹下使用命令npm init初始化。
npm init
- 发布插件,使用命令
npm publish。
npm publish
- 如果需要更新插件,修改版本后再次发布即可。
4. 引入插件
在需要使用公共方法的项目中,引入推送到npmjs的插件,步骤如下:
- 在项目目录下创建一个名为
manifest.json的文件,添加如下代码。
{
"app-plus": {
"plugins": {
"@uni/your-plugin": {
"version": "^1.0.0",
"provider": ""
}
}
}
} 其中,version字段为插件的版本号,provider字段为插件提供者,需要在插件发布到npmjs时指定。
- 在需要使用公共方法的页面中,执行如下代码。
import yourPlugin from "@uni/your-plugin"; Vue.use(yourPlugin);
5. 使用公共方法
引入插件后即可在页面中使用公共方法,以下以刚刚创建的toast方法为例:
this.$toast('Hello world!')至此,我们成功实现了uniapp公共方法的引入。
总结一下,将公共方法封装为插件并推送到npmjs,可以极大地提高项目开发的效率和管理的便捷性。在实际项目中,我们可以将一些经常使用的方法封装为插件,依照以上的方式引入即可。









