How to introduce external methods in uni-app

In the process of using uni-app development, we often encounter situations where we need to use external methods. At this time, we can expand the functionality by introducing external methods. This article will introduce how uni-app introduces external methods.

1. Introduction of JS files

We can create a new js file in the pages directory of the uni-app project, write the external methods we define in this file, and then when needed Just introduce it into the page that references the external method. For example, we created a new file named test.js in the pages directory and defined a method in it:

function testFunc() {
  console.log("这是一个测试方法");
}

Then introduce this js file in the page that needs to use this method:

import { testFunc } from "@/pages/test.js"

After importing, we can call this method in the page:

testFunc();

2. Introducing plug-ins

In addition to introducing self-defined JS files, we can also import Plug-ins are used to extend functionality. uni-app supports declaring plug-ins in the manifest.json file and introducing them in the page where the plug-in needs to be used. Take the introduction of the uni-popup plug-in as an example:

1. Declare the plug-in in the manifest.json file:

"plugins": {
  "uniPopup": {
    "version": "^1.0.0",
    "provider": "dascom",
    "path": "uni-popup/uni-popup.vue"
  }
}

2. Introduce the plug-in into the page where the plug-in needs to be used:

import uniPopup from "@/uni-popup/uni-popup.vue"
Vue.component("uni-popup", uniPopup);

3. Use plug-ins in the page:

<uni-popup v-model="isShow"></uni-popup>

It should be noted that if we introduce unofficial third-party plug-ins, we need to add them in manifest.json Add the "npm" field to the file to declare the package name and version number, for example:

"dependencies": {
  "uni-popup": "0.0.1"
},
"plugins": {
  "uniPopup": {
    "version": "^1.0.0",
    "provider": "npm",
    "path": "uni-popup/uni-popup.vue",
    "npm": {
      "name": "uni-popup",
      "version": "^0.0.1"
    }
  }
}

3. Introduce uni-simple-router

In addition to the above two methods, we can also use uni- simple-router to implement routing control and jump. The introduction method is as follows:

1. Introduce uni-simple-router in main.js:

import router from '@/common/router.js';
Vue.use(router);

2. Configure routing in the router.js file:

import Vue from 'vue'
import Router from 'uni-simple-router'

Vue.use(Router)

const router = new Router({
    routes: [...]
})
router.beforeEach((to, from, next) => {
    ...
    next()
})
router.afterEach((to, from) => {
    ...
})

export default router

3. Quote in the page that needs to use routing:

import router from "@/common/router.js"

Through the above introduction, we can find that it is very simple to introduce external methods in uni-app , you only need to choose an appropriate way to introduce it to achieve functional expansion. Hope this article is helpful to you.

The above is the detailed content of How to introduce external methods in uni-app. For more information, please follow other related articles on the PHP Chinese website!