uniappの基本情報の読み込み方法

モバイル インターネットの急速な発展に伴い、プロジェクトの範囲とユーザー エクスペリエンスを向上させるために複数のプラットフォームを同時に開発したいと考える開発者が増えています。このとき登場したのが、DCloud が立ち上げた Vue.js ベースのクロスプラットフォーム開発ツールで、一度作成すれば複数のプラットフォームに同時に公開できる Uniapp (正式名称: Universal Application) です。

Uniappではデータは非常に重要なコンテンツであり、データの読み込みが必要です。たとえば、ユーザー情報や製品情報などのページのコンテンツを表示するには、いくつかの基本データをページに読み込む必要があります。では、Uniapp でこれらの基本情報の読み込みを処理するにはどうすればよいでしょうか?

1. ページ読み込み前に基本データを処理する

Uniapp では、ページ読み込み前に基本データを処理できます。具体的な方法は、ページのライフサイクル関数の uni.showLoading() 関数を使用して、読み込みアニメーションを表示すると同時にデータリクエストを開始し、リクエストが成功すると、データがデータに割り当てられます。ページの属性。サンプル コードは次のとおりです。

エクスポート デフォルト {

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

}

上記のコードは、ページが読み込まれる前に基本データを処理する例です。

2. Vuex を使用してグローバル データを管理する

プロジェクトでグローバル データを使用する必要がある場合は、管理に Vuex を使用する必要があります。 Vuex は Vue.js の公式状態管理ライブラリであり、グローバル データを含むアプリケーション内のすべての状態を効果的に管理できます。

Uniapp では、store.js ファイルに Vuex ストア オブジェクトを作成し、commit() メソッドを通じてミューテーション内のメソッドを送信して、状態の状態を変更できます。サンプルコードは次のとおりです。

//store.js file
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
状態: {

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

},
変異: {

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

}
})

デフォルト ストアをエクスポート;

//ページ モジュール ファイル