모바일 인터넷의 급속한 발전으로 인해 점점 더 많은 개발자가 프로젝트 적용 범위와 사용자 경험을 개선하기 위해 여러 플랫폼을 동시에 개발하기를 희망하고 있습니다. 이때 Uniapp(풀네임: Universal Application)이 탄생했습니다. DCloud에서 출시한 Vue.js 기반의 크로스 플랫폼 개발 도구로, 한 번 작성하면 동시에 여러 플랫폼에 게시할 수 있습니다.
유니앱에서는 데이터가 매우 중요한 컨텐츠이고, 데이터 로딩이 꼭 필요합니다. 예를 들어 사용자 정보, 제품 정보 등과 같은 페이지 콘텐츠를 표시하려면 일부 기본 데이터를 페이지에 로드해야 합니다. 그렇다면 Uniapp에서 이러한 기본 정보의 로딩을 처리하는 방법은 무엇입니까?
1. 페이지 로딩 전 기본 데이터 처리
유니앱에서는 페이지 로딩 전 기본 데이터 처리가 가능합니다. 구체적인 방법은 페이지의 라이프 사이클 함수에서 uni.showLoading() 함수를 사용하여 로딩 애니메이션을 표시하는 동시에 데이터 요청을 시작하는 것입니다. 요청이 성공한 후 데이터가 데이터에 할당됩니다. 페이지의 속성입니다. 샘플 코드는 다음과 같습니다.
<text>{{userInfo.nickname}}</text><script><br> 내보내기 기본값 {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>data() { return { userInfo: {} } }, onShow() { //页面显示时触发 uni.showLoading({ //显示加载动画 title: '正在加载...' }); //发起数据请求 uni.request({ url: 'http://xxx.com/getUserInfo', success: (res) => { this.userInfo = res.data; //将数据赋值给data属性 uni.hideLoading(); //隐藏加载动画 } }); }</pre><div class="contentsignin">로그인 후 복사</div></div><p>}<br></ script></p> <p>위 코드는 페이지가 로딩되기 전 기본 데이터를 처리하는 예시입니다. </p><p>2. Vuex를 사용하여 글로벌 데이터 관리</p><p>프로젝트에서 글로벌 데이터를 사용해야 한다면 Vuex를 사용하여 관리해야 합니다. Vuex는 Vue.js의 공식 상태 관리 라이브러리로, 전역 데이터를 포함하여 애플리케이션의 모든 상태를 효과적으로 관리할 수 있습니다. </p><p>Uniapp에서는 store.js 파일에 Vuex 스토어 객체를 생성하고 commit() 메소드를 통해 mutations에 메소드를 제출하여 상태를 변경할 수 있습니다. 샘플 코드는 다음과 같습니다. </p><p>// store.js 파일<br>import Vue from 'vue'<br>import Vuex from 'vuex'</p><p>Vue.use(Vuex)</p><p>const store = new Vuex.Store({<br> state : {</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>userInfo: {} //定义全局数据</pre><div class="contentsignin">로그인 후 복사</div></div><p>},<br> mutations: {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>setUserInfo(state, userInfo) { //设置全局数据的方法 state.userInfo = userInfo; }</pre><div class="contentsignin">로그인 후 복사</div></div><p>}<br>})</p><p>export default store;</p><p>//페이지 모듈 파일<br><template><br> <view></p><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><text>{{userInfo.nickname}}</text></pre><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><div class="contentsignin">로그인 후 복사</div></div><p></view><br> </ template></p><p><script><br> import { mapState } from 'vuex';</p><p>export default {</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>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(); } }); }</pre><div class="contentsignin">로그인 후 복사</div></div><p>}<br></script>
위 코드는 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;
}
});
}}
}
//페이지 모듈 파일
<text>{{userInfo.nickname}}</text>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
