ホームページ >ウェブフロントエンド >uni-app >uniappの基本情報の読み込み方法

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

王林
王林オリジナル
2023-05-22 10:23:07963ブラウズ

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

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

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

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

d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

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

de5f4c1163741e920c998275338d29b2
21c97d3a051048b8e55e3c8f199a54b2

4926b8d38581f25312e76f084e17ebc0

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

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;
}

}
})

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

//ページ モジュール ファイル
d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

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

de5f4c1163741e920c998275338d29b2
9aef2673226c7cf7798f7b019dd771ab

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import { mapState } from 'vuex';

export デフォルト {

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 ファイル
export デフォルト {
data() {

return {
  userInfo: {}
}

},
メソッド: {

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

}
}

//ページ モジュール ファイル
d477f9ce7bf77f53fbcf36bec1b69b7a
89c662c6f8b87e82add978948dc499d2

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

de5f4c1163741e920c998275338d29b2
< ;/template> ;

3f1c4e4b6b16bbbd69b2ee476dc4f83a
import userInfoMixin from './userInfoMixin.js';

export デフォルト {

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

}
9429d6e1efad07153846e528605c447e

上記のコードは、minix ミキシングを使用してデータを処理する例です。

一般に、Uniapp での基本データの処理方法は数多くありますが、プロジェクトの実際の状況に応じて適切な方法を選択するのが最善です。

以上がuniappの基本情報の読み込み方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。