当前位置：首页 > uni-app

uniapp如何调用

2026-03-04 23:32:19uni-app

uniapp如何调用

在uniapp中调用方法通常涉及以下几个方面：页面生命周期、组件方法、API调用以及自定义函数。

页面生命周期方法

uniapp的页面生命周期方法与微信小程序类似，可以在页面的script部分直接定义。常用的生命周期方法包括onLoad、onShow、onReady等。

export default {
  onLoad() {
    console.log('页面加载');
  },
  onShow() {
    console.log('页面显示');
  },
  onReady() {
    console.log('页面初次渲染完成');
  }
}

组件方法

在组件中定义方法，可以直接在methods中声明。这些方法可以在模板中通过事件绑定调用。

uniapp如何调用

export default {
  methods: {
    handleClick() {
      console.log('按钮被点击');
    }
  }
}

模板中调用：

<button @click="handleClick">点击</button>

API调用

uniapp提供了丰富的API，可以通过uni对象调用。例如调用网络请求、本地存储等。

uniapp如何调用

uni.request({
  url: 'https://example.com/api',
  success: (res) => {
    console.log(res.data);
  }
});

uni.setStorage({
  key: 'key',
  data: 'value'
});

自定义函数

在script中定义自定义函数，可以在页面或组件中调用。

export default {
  methods: {
    showMessage() {
      this._showToast('Hello');
    },
    _showToast(message) {
      uni.showToast({
        title: message,
        duration: 2000
      });
    }
  }
}

跨页面调用

通过uni.navigateTo或uni.redirectTo跳转页面时，可以通过URL传递参数，目标页面在onLoad中接收。

// 页面A
uni.navigateTo({
  url: '/pages/pageB?param=value'
});

// 页面B
export default {
  onLoad(options) {
    console.log(options.param); // 输出 'value'
  }
}

全局方法

在main.js中定义全局方法，可以在所有页面和组件中调用。

// main.js
Vue.prototype.$showToast = function(message) {
  uni.showToast({
    title: message,
    duration: 2000
  });
};

// 页面或组件中调用
this.$showToast('全局提示');

标签: uniapp