ミニプログラム開発の基礎 - データバインディング パート 1 (7)

前のチュートリアルで書いたように、WeChat アプレット フレームワークはプログラムを論理層 (.js ファイル) とビュー層 (.wxml ファイル) に分割します。これは、UI とロジックを分離する一般的なプログラミング方法であり、開発されたプログラムはより柔軟で拡張しやすくなります。

このプログラミング方法は通常 2 つの問題を解決します:

UI 層はロジック層のロジックとデータの変更に応答します
UI 層はユーザー操作をロジック層にフィードバックします

一般的に言えば、UI 層とロジックは次のことができます。各層は相互にインターフェイスを公開しますが、柔軟性とスケーラビリティを考慮して、管理用に中間層が導入されます。これにより、UI 層とロジック層の間の直接の依存を回避できます。

WeChat アプレット フレームワークは、このモデルに基づいて設計されており、.wxml ファイルには UI レイヤー (WeChat の正式名は ビュー レイヤー であり、チュートリアルの名前も ビュー レイヤー にちなんで付けられます) と . js ファイルが来る ロジック層が処理され、WeChat のフレームワークは 2 つの間の通話を管理する中間層として機能します。

開発者が WeChat アプレットを開発できるようにするために、WeChat は開発者がビュー層とロジック層を接続するのに役立ついくつかの構文とルールを定義しています。

データバインディング

文字列の内容を表示

//page.wxml
<text class="user-motto">{{motto}}</text>

//page.js
 data: {
    motto: &#39;Hello World&#39;,
  },

ビューレイヤーのコードに「{{motto}}」を埋め込むと、インターフェイスに「Hello World」が表示されます

文字列の内容を変更します

setData({
  motto:'Hello My World'
  })

上記のコードを実行すると、インターフェースに「Hello My World」が表示されます

上記の部分で説明するポイントは2つあります:

1: ビューレイヤーは{{motto}}で埋め込まれています> {{data.motto}} の代わりに、WeChat フレームワークはデフォルトで、ビュー レイヤーにバインドされた変数を Page オブジェクトの {{motto}}而不是{{data.motto}}，微信框架默认设定视图层绑定的变量定义在Page对象的data属性中，也就是说，如果变量需要绑定到视图层，一定要定义data属性中

2: 通过调用Page对象的setData(Page对象预定义)方法，可以更新界面数据，但是直接设置变量是无效的，因此对于绑定到视图层的变量，要永远使用setData方法来设置变量值

显示图片
在开发工具默认生成的程序首页，显示了用户的头像，相关代码如下:

//index.wxml
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

//index.js
onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }

image标签的src属性绑定了userInfo.avatarUrl变量，并在onLoad方法中通过调用setData方法设置userInfo。

属性绑定

可以将变量绑定到视图组件的属性值上(如上面image标签的src属性)，注意在绑定到属性时，需要在外面加入一对双引号。

src="{{userInfo.avatarUrl}}"

除了用于显示图片外，属性绑定还有许多作用。

关联数据

假设要做一个学生管理程序，页面使用列表来展示用户数据，当用户点击某一学生信息时，进入该学生的详情页页面。
当获取到用户的点击事件时，必须要知道点击的是哪一个学生的数据，这时可以将学生的id绑定到视图组件的id属性中来进行数据关联。

控制视图的隐藏/显示

可以将变量绑定到视图组件的hidden属性中，通过更改组件hidden属性的值，可以控制组件是否显示。

控制属性
上面说到可以通过属性绑定的方法来控制视图组件是否显示，还可以通过控制属性来实现这一功能。

//Page.wxml
<view wx:if="{{condition}}"> </view>

//Page.js
Page({
  data: {
    condition: true
  }
})

通过绑定数据到wx:if属性，可以控制该组件是否显示。
框架还提供了wx:elif和wx:else属性，用法如下:

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

如果想同时控制多个视图组件，可以使用block wx:if

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

同样，控制属性绑定时也需要添加双引号

wx:if vs hidden

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden
更好，如果在运行时条件不大可能改变则 wx:if 较好。

关键字
框架提供了两个关键字来表示真和假
true：boolean 类型的 true，代表真值。
falsedata 属性

で定義するように設定します。変数をビューレイヤーにバインドする必要がある場合は、

data 属性の定義で

2 にする必要があります

: Page オブジェクトの setData (事前定義された Page オブジェクト) メソッドを呼び出すことで、インターフェイスデータは更新できますが、

変数を直接設定することは無効

なので、バインディングの場合は、ビューレイヤーの変数については、常に setData メソッドを使用して変数値を設定します

画像を表示

🎜オンデフォルトでは、開発ツールによって生成されたプログラムのホームページに、ユーザーのアバターが表示されます。 関連するコードは次のとおりです。🎜

<checkbox checked="{{false}}"> </checkbox>

🎜 image タグの src 属性がバインドされています。 userInfo.avatarUrl 変数に追加され、setData メソッドを呼び出すことで onLoad メソッドに渡され、 userInfo が設定されます。 🎜🎜🎜属性バインディング🎜🎜🎜ビュー コンポーネントの属性値 (上記の image タグの src 属性など) に変数をバインドできます。 , 🎜バインディングに注意する 属性にアクセスするときは、外側に二重引用符のペアを追加する必要があります。 🎜🎜rrreee🎜 画像を表示するだけでなく、属性バインディングには多くの機能があります。 🎜🎜🎜関連データ🎜🎜🎜 このページでは、リストを使用してユーザー データを表示するとします。ユーザーが特定の生徒情報をクリックすると、生徒の詳細ページが表示されます。 🎜ユーザーのクリックイベントを取得する際には、どの生徒のデータがクリックされたのかを知る必要があります。このとき、生徒のIDをビューコンポーネントのID属性にバインドしてデータを紐付けることができます。 🎜🎜🎜ビューの非表示/表示を制御する🎜🎜🎜 ビューコンポーネントのhidden属性に変数をバインドでき、コンポーネントのhidden属性の値を変更することで、コンポーネントを表示するかどうかを制御できます。 🎜🎜🎜属性の制御🎜🎜 前述のように、属性バインディングを通じてビューコンポーネントを表示するかどうかを制御できますが、属性を制御することによってこの機能を実現することもできます。 🎜rrreee🎜 データを wx:if 属性にバインドすることで、コンポーネントを表示するかどうかを制御できます。 🎜フレームワークは wx:elif 属性と wx:else 属性も提供します。使用法は次のとおりです:🎜rrreee🎜 複数のビュー コンポーネントを同時に制御したい場合は、block wx:if を使用できます。 🎜rrreee🎜🎜同様に、制御属性もバインドするときに二重引用符を追加する必要があります🎜🎜🎜🎜wx:if vs hidden🎜🎜🎜🎜一般的に言えば、wx:ifはスイッチングコストが高く、hiddenは初期レンダリングコストが高くなります。したがって、頻繁に切り替える必要がある場合はhidden🎜を使用し、実行時に条件が変化する可能性が低い場合はwx:ifを使用するのが良いでしょう。 🎜🎜🎜🎜キーワード🎜🎜 フレームワークは、🎜true🎜 と 🎜false🎜🎜true を表す 2 つのキーワードを提供します: ブール型 true、true 値を表します。 🎜false: ブール型の false。偽の値を表します。 🎜🎜コード例🎜rrreee🎜🎜 特記事項:checked="false"を直接記述しないでください。計算結果は文字列となり、真の値を表すブール型に変換されます。 🎜🎜🎜データ バインディングの詳細については、しばらくお待ちください🎜 ミニ プログラム開発の基礎 - データ バインディング (パート 8)🎜🎜

以上がミニプログラム開発の基礎 - データバインディング パート 1 (7)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。