uniapp基礎資訊載入怎麼處理

隨著行動互聯網的快速發展，越來越多的開發者希望能夠同時開發多個平台，以提高專案的覆蓋率和使用者體驗。這時，Uniapp（全名為：Universal Application）應運而生，它是由DCloud推出的一款基於Vue.js的跨平台開發工具，可以一次編寫，同時發佈到多種平台。

在Uniapp中，資料是非常重要的內容，而資料的載入是必須的。例如，我們需要在頁面中載入一些基礎資料以顯示頁面的內容，例如使用者資訊、商品資訊等。那麼，在Uniapp中，如何處理這些基礎資訊的載入呢？

一、在頁面載入前處理基礎資料

在Uniapp中，我們可以在頁面載入前處理基礎資料。具體的做法是在頁面的生命週期函數中使用uni.showLoading()函數顯示載入動畫，同時發起資料請求，請求成功後將資料賦值給頁面的data屬性。範例程式碼如下：

<script><br></template></p><p><script&gt ;<br> export default {</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) =&gt; { this.userInfo = res.data; //将数据赋值给data属性 uni.hideLoading(); //隐藏加载动画 } }); }</pre><div class="contentsignin">登入後複製</div></div><p>}</p></script>

在Uniapp中，我們可以在store.js檔案中建立Vuex的store對象，透過commit()方法來提交mutations中的方法，從而改變state中的狀態。範例程式碼如下：

import Vue from 'vue'

Vue.use(Vuex)

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

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

},
mutations: {

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

}

export default store;

<script></p> import { mapState } from 'vuex';<p><br>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) =&gt; { this.$store.commit('setUserInfo', res.data); //通过Vuex改变全局数据 uni.hideLoading(); } }); }</pre><div class="contentsignin">登入後複製</div></div><p>}</p></script>

具體的做法是在minix檔案中定義資料請求處理方法，然後在頁面中使用mixins屬性引入。範例程式碼如下：

export default {
data() {

return {
  userInfo: {}
}

},
methods: {

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

}
}