유니앱 기본정보 불러오는 방법

모바일 인터넷의 급속한 발전으로 인해 점점 더 많은 개발자가 프로젝트 적용 범위와 사용자 경험을 개선하기 위해 여러 플랫폼을 동시에 개발하기를 희망하고 있습니다. 이때 Uniapp(풀네임: Universal Application)이 탄생했습니다. DCloud에서 출시한 Vue.js 기반의 크로스 플랫폼 개발 도구로, 한 번 작성하면 동시에 여러 플랫폼에 게시할 수 있습니다.

유니앱에서는 데이터가 매우 중요한 컨텐츠이고, 데이터 로딩이 꼭 필요합니다. 예를 들어 사용자 정보, 제품 정보 등과 같은 페이지 콘텐츠를 표시하려면 일부 기본 데이터를 페이지에 로드해야 합니다. 그렇다면 Uniapp에서 이러한 기본 정보의 로딩을 처리하는 방법은 무엇입니까?

1. 페이지 로딩 전 기본 데이터 처리

유니앱에서는 페이지 로딩 전 기본 데이터 처리가 가능합니다. 구체적인 방법은 페이지의 라이프 사이클 함수에서 uni.showLoading() 함수를 사용하여 로딩 애니메이션을 표시하는 동시에 데이터 요청을 시작하는 것입니다. 요청이 성공한 후 데이터가 데이터에 할당됩니다. 페이지의 속성입니다. 샘플 코드는 다음과 같습니다.

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

<text>{{userInfo.nickname}}</text>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
내보내기 기본값 {

data() {
  return {
    userInfo: {}
  }
},
onShow() { //页面显示时触发
  uni.showLoading({ //显示加载动画
    title: '正在加载...'
  });
  //发起数据请求
  uni.request({
    url: 'http://xxx.com/getUserInfo',
    success: (res) => {
      this.userInfo = res.data; //将数据赋值给data属性
      uni.hideLoading(); //隐藏加载动画
    }
  });
}

}
3fa3f474cbb4b6d948eebecb1be5dde4

위 코드는 페이지가 로딩되기 전 기본 데이터를 처리하는 예시입니다.

2. Vuex를 사용하여 글로벌 데이터 관리

프로젝트에서 글로벌 데이터를 사용해야 한다면 Vuex를 사용하여 관리해야 합니다. Vuex는 Vue.js의 공식 상태 관리 라이브러리로, 전역 데이터를 포함하여 애플리케이션의 모든 상태를 효과적으로 관리할 수 있습니다.

Uniapp에서는 store.js 파일에 Vuex 스토어 객체를 생성하고 commit() 메소드를 통해 mutations에 메소드를 제출하여 상태를 변경할 수 있습니다. 샘플 코드는 다음과 같습니다.

// store.js 파일
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
state : {

userInfo: {} //定义全局数据

},
mutations: {

setUserInfo(state, userInfo) { //设置全局数据的方法
  state.userInfo = userInfo;
}

}
})

export default store;

//페이지 모듈 파일
d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

<text>{{userInfo.nickname}}</text>

de5f4c1163741e920c998275338d29b2
028402f0d1e2c7f0a5739e0164ec6833

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { mapState } from 'vuex';

export default {

computed: mapState(['userInfo']), //映射state中的全局数据到页面data属性中
onShow() {
  uni.showLoading({
    title: '正在加载...'
  });
  //发起数据请求
  uni.request({
    url: 'http://xxx.com/getUserInfo',
    success: (res) => {
      this.$store.commit('setUserInfo', res.data); //通过Vuex改变全局数据
      uni.hideLoading();
    }
  });
}

}
2cacc6d41bbb37262a98f745aa00fbf0

위 코드는 Vuex를 통해 전역 데이터를 관리하는 예입니다. .

3. 데이터를 혼합하고 처리하려면 minix를 사용하세요

Uniapp에서는 데이터 처리에도 minix를 사용할 수 있습니다. 믹스인은 구성 요소 간 코드를 공유하기 위한 일반적인 솔루션입니다. 일반적으로 사용되는 일부 데이터 요청 처리 방법을 추출하여 페이지에 혼합하여 코드 재사용성을 향상시킬 수 있습니다.

구체적인 방법은 minix 파일에 데이터 요청 처리 방법을 정의한 후 mixins 속성을 이용하여 페이지에 소개하는 것입니다. 샘플 코드는 다음과 같습니다:

//userInfoMixin.js file
export default {
data() {

return {
  userInfo: {}
}

},
메소드: {

getUserInfo() { //定义数据请求方法
  uni.request({
    url: 'http://xxx.com/getUserInfo',
    success: (res) => {
      this.userInfo = res.data;
    }
  });
}

}
}

//페이지 모듈 파일
6600ab65906a5d165c30c216af2667f1

<text>{{userInfo.nickname}}</text>

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
'./userInfoMixin.js'에서 userInfoMixin 가져오기;

기본값 내보내기 {

mixins: [userInfoMixin], //在页面中混入minix文件
onShow() {
  uni.showLoading({
    title: '正在加载...'
  });
  this.getUserInfo(); //通过minix文件获取数据
  uni.hideLoading();
}

}
9429d6e1efad07153846e528605c447e

위 코드는 minix 믹싱을 사용하여 데이터를 처리하는 예입니다.

일반적으로 유니앱에서는 기본 데이터를 처리하는 방법이 다양하며, 프로젝트의 실제 상황에 따라 적절한 방법을 선택하는 것이 가장 좋습니다.

위 내용은 유니앱 기본정보 불러오는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!