WeChat開発におけるビュー層(xx.xml)とロジック層(xx.js)の詳細説明

この記事では主に、WeChat アプレットのビュー層 (xx.xml) とロジック層 (xx.js) の詳細な紹介に関する関連情報を紹介します。必要な友人は参照してください。

WeChat アプレットは次のように理解できます。クラウド OS の概念 WeChat エコシステム自体が OS です。さらに、WeChat パブリック プラットフォームと WeChat 開発プラットフォーム自体はすでに非常に成熟した構造となっており、アプリの機能と完全に一致すると同時に、究極のインタラクティブ エクスペリエンスを実現することができ、アプリを置き換える可能性を秘めています。 Apple App Store モデルの重要性は、サードパーティ ソフトウェア プロバイダーに便利で効率的なソフトウェア販売プラットフォームを提供することです。ユーザーがアプリを購入するために支払う料金は、Apple とアプリ開発者が 3:7 で折半します。 WeChatミニプログラムモールも同様の手数料モデルを採用すれば、8億人を超えるユーザーは非常に大きな無形資産となり、テンセントにとってゲーム、メンバーシップ、広告に次ぐ新たな金源となるだろう。

WeChat ミニプログラムを使用すると、アプリをダウンロードしたりインストールしたりせずに使用できます。ユーザーは WeChat で QR コードをスキャンしてプログラムを開くことができます。 WeChat アプレット自体は Web サイトのページに似ているため、Android や iOS などのさまざまなシステムに適用でき、さまざまなプラットフォームで共有することもできます。

ミニプログラムビュー層(xx.xml)とロジック層(xx.js)

システム全体は、ビュー層(View)とロジック層(App Service)の2つの部分に分かれています

フレームワークでは、データをビューと非常に簡単に同期させることができます。データを変更する場合は、論理レイヤー内のデータを変更するだけでよく、それに応じてビュー レイヤーも更新されます。

この簡単な例を見てください:

<!-- This is our View -->
<view> Hello {{name}}! </view>
<button bindtap="changeName"> Click me! </button>
// This is our App Service.
// This is our data.
var helloData = {
 name: &#39;WeChat&#39;
}

// Register a Page.
Page({
 data: helloData,
 changeName: function(e) {
  // sent data change to view
  this.setData({
   name: &#39;MINA&#39;
  })
 }
})

1. 開発者はフレームワークを通じてロジック層データの名前をビュー層の名前にバインドするので、ページが開かれると Hello WeChat! が表示されます!

2. ボタンがクリックされると、ビュー層はchangeNameイベントをロジック層に送信し、ロジック層は対応するイベント処理関数を見つけます

3. ロジック層はsetData操作を実行し、名前をWeChatからMINAに変更します。データはビューレイヤーにバインドされているので、ビューレイヤーは自動的にHello MINA!に変わります。

ビュー層はxx.xmlです

ロジック層はxx.jsです

読み込み時には、まずロジック層の初期データを見てビュー層を埋めていきます。ロジック層でイベントをトリガーします。 ロジック層に戻って、ビュー層の内容を変更します。

ロジック層 (App Service)

アプレット開発フレームワークのロジック層は JavaScript によって記述されます。

ロジック層はデータを処理してビュー層に送信し、同時にビュー層からのイベントフィードバックを受け取ります。 JavaScript をベースに、小さなプログラムの開発を容易にするためにいくつかの変更を加えました。

1. プログラムとページを登録するためのアプリとページのメソッドを追加します。

2. スキャン、支払い、その他の WeChat 固有の機能など、豊富な API を提供します。

3. 各ページには独立したスコープがあり、モジュール機能を提供します。

4. フレームワークはブラウザーでは実行されないため、JavaScript の一部の機能 (ドキュメント、ウィンドウなど) は Web では使用できません。

5. 開発者によって書かれたすべてのコードは、最終的に JavaScript にパッケージ化され、ミニ プログラムの開始時に、ミニ プログラムが破棄されるまで実行されます。 ServiceWorker に似ているため、ロジック層は App Service とも呼ばれます。
   

初期化データ

初期化データは、ページの最初のレンダリングとして使用されます。データはロジック層からレンダリング層に JSON 形式で送信されるため、データは JSON に変換できる形式 (文字列、数値、ブール値、オブジェクト、配列) である必要があります。

レンダリングレイヤーは、WXMLを通じてデータをバインドできます。

サンプルコード:

<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
 }
})

Page.prototype.setData()

setData 関数は、対応する this.data の値を変更しながら、ロジック層からビュー層にデータを送信するために使用されます。

注:

1. this.data を直接変更することは無効であり、ページの 状態 を変更することはできず、データの不整合も発生します。
2. 一度に設定するデータは 1024kB を超えることはできません。

setData() パラメータ形式

の形式で this.data を表します。 keyとvalueのキーに対応する値がvalueに変更されます。

キーは非常に柔軟で、array[2].message、a.b.c.d などのデータ パスの形式で指定でき、this.data で事前に定義する必要はありません。

サンプルコード:

<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
//index.js
Page({
 data: {
  text: &#39;init data&#39;,
  array: [{text: &#39;init data&#39;}],
  object: {
   text: &#39;init data&#39;
  }
 },
 changeText: function() {
  // this.data.text = &#39;changed data&#39; // bad, it can not work
  this.setData({
   text: &#39;changed data&#39;
  })
 },
 changeItemInArray: function() {
  // you can use this way to modify a danamic data path
  this.setData({
   &#39;array[0].text&#39;:&#39;changed data&#39;
  })
 },
 changeItemInObject: function(){
  this.setData({
   &#39;object.text&#39;: &#39;changed data&#39;
  });
 },
 addNewField: function() {
  this.setData({
   &#39;newField.text&#39;: &#39;new data&#39;
  })
 }
})

ビューレイヤー

フレームワークのビューレイヤーはWXMLと

WXSSで記述され、コンポーネントによって表示されます。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

WXML(WeiXin Markup language)用于描述页面的结构。

WXSS(WeiXin Style Sheet)用于描述页面的样式。

组件(Component)是视图的基本组成单元。

什么是事件

1. 事件是视图层到逻辑层的通讯方式。

2. 事件可以将用户的行为反馈到逻辑层进行处理。

3. 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。

4. 事件对象可以携带额外信息，如id, dataset, touches。
   

事件的使用方式

在组件中绑定一个事件处理函数。

如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。

<view id="tapTest" data-hi="MINA" bindtap="tapName"> Click me! </view>
在相应的Page定义中写上相应的事件处理函数，参数是event。
Page({
 tapName: function(event) {
  console.log(event)
 }
})

基础组件

框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。

什么是组件：

1. 组件是视图层的基本组成单元。

2. 组件自带一些功能与微信风格的样式。

3. 一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内。

<tagname property="value">
 Content goes here ...
</tagename>

注意：所有组件与属性都是小写，以连字符-连接

【相关推荐】

1. 微信小程序之页面传值详解

2. 微信小程序开发样式常见的问题整理

3. 利用组件开发微信小程序日历的详细方法

4. 小程序开发之利用co处理异步流程的实例教程

以上がWeChat開発におけるビュー層(xx.xml)とロジック層(xx.js)の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。