Let’s talk about how Uniapp calls other pages

With the rapid development of mobile applications, we are increasingly using H5 to develop cross-platform applications. As a popular framework for front-end cross-platform development, Uniapp is favored by more and more developers for its powerful functions and easy-to-use features. In Uniapp development, we often need to call methods on other pages to implement some functions. This article will introduce how Uniapp calls other pages.

1. Calling through vuex

vuex is a tool for managing data in Uniapp. It stores data in global state and can be called in any component. We can make method calls on other pages through vuex. The following is a simple example:

// store.js
const store = new Vuex.Store({
  state: {
    someData: 'Hello World'
  },
  mutations: {
    changeData(state, newData) {
      state.someData = newData
    }
  }
})

In the component that needs to call this method, we can use the this.$store.commit() method to call:

// otherComponent.vue
export default {
  methods: {
    changeData(newData) {
      this.$store.commit('changeData', newData)
    }
  }
}

2. Calling through uni.$emit

In fact, there is also a good component communication method in Vue: event delivery, Uniapp also supports this method. We can use the uni.$emit() method to trigger a custom event in one component, and use $on() to listen to the event and perform corresponding operations in another component.

In the source component:

// sourceComponent.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

In the target component:

// targetComponent.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

In this way, we can call the method of another component in one component to achieve Cross-component functional interactions.

3. Calling through uni.navigateTo

In the actual development process, we often need to jump from one page to another page and perform certain operations in another page. We can use the uni.navigateTo method to jump to the page and perform corresponding operations in the target page.

In the source page:

// sourcePage.vue
export default {
  methods: {
    navigateToTarget() {
      uni.navigateTo({
        url: '/pages/targetPage/targetPage',
        success() {
          console.log('跳转成功')
        }
      })
    }
  }
}

In the target page, we can use the onLoad() function to perform the corresponding operations when the page is loaded:

// targetPage.vue
export default {
  onLoad(options) {
    console.log(options)
  }
}

4. Through uni- The app event bus is called

Uni-app provides the event bus function, which can be used to achieve communication between various pages. The method of use is very simple. We can import uni on any page and use its publish-subscribe function.

In the source page, we use $emit to trigger a custom event:

// sourcePage.vue
export default {
  methods: {
    emitEvent(data) {
      uni.$emit('eventName', data)
    }
  }
}

In the target page, we can use $on to listen to the event and perform the corresponding operation:

// targetPage.vue
export default {
  created() {
    uni.$on('eventName', this.handleEvent)
  },
  methods: {
    handleEvent(data) {
      console.log(data)
    }
  }
}

Summary

When developing Uniapp, we often need to call methods on other pages to implement some functions. Through Vuex, event delivery, page jumps and Uni-app event bus, we can implement cross-page calling methods to facilitate development and improve application scalability.

The above is the detailed content of Let’s talk about how Uniapp calls other pages. For more information, please follow other related articles on the PHP Chinese website!