[WeChat ミニ プログラム] 6 日間の正確な紹介 (2 日目: ミニ プログラムのビュー層、ロジック層、イベント システム、ページのライフ サイクル)

モバイル 2023-10-27 18:26:01 訪問数: null

1. ビューレイヤービュー

1. ビューレイヤーとは何ですか?

  • フレームワークのビュー層はWXMLとWXSSで記述され、コンポーネントによって表示されます。
  • 論理層のデータをビューに反映し、ビュー層のイベントを論理層に送信します。
  • ページの構造を記述するにはWXML (WeiXin Markup language) が使用されます。
  • WXS (WeiXin Script) は小さなプログラム用のスクリプト言語のセットで、WXMLと組み合わせることでページの構造を構築できます。
  • WXSS (WeiXin Style Sheet) は、ページのスタイルを記述するために使用されます。
  • コンポーネントはビューの基本単位です。

2、wxml

WXML (WeiXin Markup Language) はフレームワークによって設計された一連のタグ言語であり、基本コンポーネントやイベント システムと組み合わせることで、ページの構造を構築できます。構文の詳細については、公式 Web サイトのWXML | WeChat オープン ドキュメントを参照してください。

2.1. データバインディング

<!--wxml-->
<view> {
   
   {message}} </view>

// page.js
Page({
  data: {
    message: 'Hello!页面一'
  }
})

2.2. リストのレンダリング

<!-- 列表渲染1 -->
<view wx:for="{
   
   {array}}"> {
   
   {item}} </view>
<!-- 列表渲染2 -->
<view wx:for="{
   
   {array2}}">编号：{
   
   {item.id}}; 姓名：{
   
   {item.name}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5],
    array2: [{id:1,name:'王德法'},{id:2,name:'王老五'},{id:3,name:'西门庆'}]
  }
})

2.3. 条件付きレンダリング

<!-- 条件渲染 -->
<view wx:if="{
   
   {view == '1'}}"> 我是1 </view>
<view wx:elif="{
   
   {view == '2'}}"> 我是2 </view>
<view wx:else="{
   
   {view == '3'}}"> 我是3</view>
// page.js
Page({
  data: {
    view: 2
  }
})

2.4. テンプレート

<!-- 模板 -->
<template name="staffName">
  <view>
    FirstName: {
   
   {firstName}}, LastName: {
   
   {lastName}}
  </view>
</template>

<template is="staffName" data="{
   
   {...staffA}}"></template>
<template is="staffName" data="{
   
   {...staffB}}"></template>
<template is="staffName" data="{
   
   {...staffC}}"></template>
// page.js
Page({
  data: {
    staffA: {firstName: '1-1', lastName: '傻逼'},
    staffB: {firstName: '1-2', lastName: '二比'},
    staffC: {firstName: '1-3', lastName: '流弊'}
  }
})

多くのコンテンツについては、データ バインディング、リスト レンダリング、条件付きレンダリング、テンプレート、および参照に関する公式 Web サイトを参照してください。

3、wxss

3.1. 次元単位

  • rpx (応答ピクセル): 画面幅に応じて調整できます。指定した画面幅は750rpxです。たとえば、iPhone6 では、画面幅が 375px で、合計 750 物理ピクセルがある場合、750rpx = 375px = 750 物理ピクセル、1rpx = 0.5px = 1 物理ピクセルとなります。
装置 rpxからpx（画面幅/750） px換算 rpx（750/画面幅）
iPhone 5 1rpx = 0.42px 1px = 2.34rpx
iphone 6 1rpx = 0.5px 1ピクセル = 2rピクセル
iPhone6プラス 1rpx = 0.552px 1px = 1.81rpx

[注意] 画面が小さいと不具合が発生する可能性がありますので、開発中はこの状況を回避するようにしてください。ビジュアルドラフトの標準として iPhone6 を使用できます。

3.2. スタイルのインポート

@importステートメントを使用して外部スタイル シートをインポートし、@importインポートする必要がある外部スタイル シートの相対パスを続けて;ステートメントを終了します。

サンプルコード:

/** common.wxss **/
.small-p {
  padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}

3.3. インラインスタイル

フレームワーク コンポーネントは、スタイル属性とクラス属性を使用してコンポーネントのスタイルを制御することをサポートしています。

  • style: 静的スタイルはクラスに均一に書き込まれます。style は動的スタイルを受け取り、実行時に解析します。レンダリング速度への影響を避けるため、静的スタイルを style に書き込むことは避けてください。
<view style="color:{
   
   {color}};" />
  • class: スタイル ルールの指定に使用されます。その属性値は、スタイル ルール内のクラス セレクター名 (スタイル クラス名) のコレクションです。スタイル クラス名を含める必要はなく、スタイル クラス名はスペースで区切られます.。
<view class="normal_view" />

3.4. セレクター

現在サポートされているセレクターは次のとおりです。

セレクタ サンプル サンプル概要
。クラス .intro class="intro" を持つすべてのコンポーネントを選択します
#id #firstname id="firstname" のコンポーネントを選択します
要素 view すべてのビューコンポーネントを選択します
要素、要素 view, checkbox すべてのドキュメント ビュー コンポーネントとすべてのチェックボックス コンポーネントを選択します
：：後 view::after ビューコンポーネントの後にコンテンツを挿入します
：：前に view::before ビューコンポーネントの前にコンテンツを挿入します

3.5. グローバルスタイルとローカルスタイル

app.wxss で定義されたスタイルはグローバル スタイルであり、すべてのページに適用されます。ページの wxss ファイルで定義されているスタイルはローカル スタイルであり、対応するページにのみ適用され、app.wxss 内の同じセレクターをオーバーライドします。

4、WXS

WXS (WeiXin Script) は、WXML のインライン スクリプト セグメントです。WXS を通じて、少数の処理スクリプトをテンプレートにインライン化して、テンプレートのデータ前処理機能を強化できます。さらに、WXS を使用して、単純な WXS イベント応答関数を作成することもできます。

構文的には、WXS は JavaScript に似ていますが、いくつかの制限があります。WXS 構文を完全に理解するには、「WXS 構文リファレンス」を参照してください。

詳細については、公式ウェブサイトWXS | WeChat オープンドキュメントを確認してください。

5. イベントシステム

5.1. イベントとは何ですか?

  • イベントは、ビュー層からロジック層への通信方法です。
  • イベントは、ユーザーの行動をロジック層にフィードバックして処理できます。
  • イベントはコンポーネントにバインドでき、トリガーイベントに達すると、ロジック層の対応するイベント処理関数が実行されます。
  • イベント オブジェクトには、ID、データセット、タッチなどの追加情報を含めることができます。

5.2. イベントの使用方法

  • イベント ハンドラーをコンポーネントにバインドします。

たとえばbindtap、ユーザーがコンポーネントをクリックすると、対応するイベント処理関数がそのページに対応するページ内で見つかります。

<!-- 事件系统 -->
<view id="tapTest" data-id="1" data-name="Weixin" bindtap="tapName"> Click me! </view>
  • 対応するページ定義に対応するイベント処理関数を記述します。パラメータはeventです。
Page({
  tapName: function(event) {
    console.log(event)
  }
})

その他のイベント システムについては、公式 Web サイトの開発ドキュメント - View Layer - Event Systemを確認してください。

2. tabBar -- 設定アプレット -- グローバル設定

ミニ プログラムのルート ディレクトリ内の ファイルapp.json は、WeChat ミニ プログラムのグローバルな構成、ページ ファイルのパスの決定、ウィンドウのパフォーマンス、ネットワーク タイムアウトの設定、複数のタブの設定などに使用されます。

構成項目の詳細な説明については、「ミニ プログラムのグローバル構成」を参照してください。

以下は、いくつかの一般的な構成オプションのリストです app.json 。

{
  "pages":[
    "pages/index/index",
    "pages/demo1/demo1",
    "pages/demo2/demo2",
    "pages/demo3/demo3",
    "pages/demo4/demo4",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#00f",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/demo1/demo1",
      "text": "内容"
    }, {
      "pagePath": "pages/demo2/demo2",
      "text": "我的"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. ロジック層

1 はじめに

ミニ プログラム開発フレームワークのロジック層は JavaScript エンジン を使用してJavaScript 、コードを開発するための実行環境と WeChat ミニ プログラムの独自の機能をミニ プログラムに提供します。

ロジック層はデータを処理してビュー層に送信し、同時にビュー層からのイベント フィードバックを受け取ります。

開発者によって書かれたすべてのコードは、最終的に JavaScript ファイルにパッケージ化され、アプレットの開始時にアプレットが破棄されるまで実行されます。この動作は ServiceWorkerに似ているため、ロジック層は App Service とも呼ばれます。

に基づいて JavaScript 、小さなプログラムの開発を容易にするためにいくつかの機能を追加しました。

  • プログラム登録とページ登録 のメソッドApp を 追加します 。Page
  •  インスタンスと現在のページ スタック を取得するメソッド getApp と メソッドをそれぞれ追加します 。getCurrentPagesApp
  • WeChat ユーザー データ、スキャン、支払い、その他の WeChat 固有の機能などの豊富な APIを提供します。
  • モジュール機能を提供し、各ページには独立したスコープがあります。

注: ミニ プログラム フレームワークのロジック層はブラウザーでは実行されないため、 など のJavaScript 一部の機能は Web では使用できません。 windowdocument


 

2. ページルーティング

ミニ プログラム内のすべてのページのルーティングは、フレームワークによって管理されます。

2.1. ページスタック

フレームワークは、現在のすべてのページをスタックの形式で維持します。ルーティングの切り替えが発生すると、ページ スタックは次のように動作します。

ルーティング方法 ページスタックのパフォーマンス
初期化 新しいページがスタックにプッシュされました
新しいページを開く 新しいページがスタックにプッシュされました
ページのリダイレクト 現在のページがスタックからポップアウトされ、新しいページがスタックにプッシュされます。
ページ戻り ターゲットがページに戻るまで、ページはスタックからポップオフされ続けます。
タブスイッチ すべてのページがスタックからポップアウトされ、新しいタブ ページのみが残ります。
リロード すべてのページがスタックからポップアウトされ、新しいページだけが残ります。

開発者は getCurrentPages() 関数を使用して現在のページスタックを取得できます

2.2. ルーティング方法

ルーティングのトリガー方法とページのライフサイクル関数は次のとおりです。

ルーティング方法 トリガー時間 プレルーティングページ ルーティング後のページ
初期化 ミニプログラムによって開かれた最初のページ onLoad、onShow
新しいページを開く コンポーネント <navigator open-type="navigateTo"/>を使用してAPI  wx.navigateToを呼び出します。
 非表示にする onLoad、onShow
ページのリダイレクト コンポーネント <navigator open-type="redirectTo"/>を使用してAPI  wx.redirectToを呼び出します。
 アンロード時 onLoad、onShow
ページ戻り コンポーネント<navigator open-type="navigateBack">を使用してAPI  wx.navigateBackを呼び出します。 ユーザーは左上隅の戻るボタンを押します。

 アンロード時 オンショー
タブスイッチ API  wx.switchTab
を呼び出し、コンポーネント <navigator open-type="switchTab"/>
を使用してタブを切り替えます。		 さまざまな状況に応じて以下の表を参照してください
再起動 コンポーネント <navigator open-type="reLaunch"/>を使用してAPI  wx.reLaunchを呼び出します。
 アンロード時 onLoad、onShow

タブ切り替えに対応するライフサイクル (ページ A と B をタブバー ページとし、C はページ A から開かれたページ、ページ D はページ C から開かれたページです):

現在のページ ルーティング後のページ トリガーのライフサイクル (順番)
あ あ 何も起こらなかった
あ B A.onHide()、B.onLoad()、B.onShow()
あ B（再び開く） A.onHide()、B.onShow()
C あ C.onUnload()、A.onShow()
C B C.onUnload()、B.onLoad()、B.onShow()
D B D.onUnload()、C.onUnload()、B.onLoad()、B.onShow()
D（転送から入る） あ D.onUnload()、A.onLoad()、A.onShow()
D（転送から入る） B D.onUnload()、B.onLoad()、B.onShow()

2.3. 注意事項

  • navigateTo、 redirectTo タブバー以外のページのみ開くことができます。
  • switchTab tabBar ページのみを開くことができます。
  • reLaunch どのページでも開くことができます。
  • ページの下部にある tabBar はページによって決定されます。つまり、ページが tabBar として定義されている限り、下部に tabBar が存在します。
  • 呼び出し元のページ ルートによって取得されるパラメータは、ターゲット ページonLoadから取得できます。

2.4. 練習

        私たちが使用するルーティング方法:練習のために新しいページを開いてタブを切り替えます。

        最初のページのwxmlにボタンを追加し、メソッドを追加します。

<!-- 路由方式 -->
<button bindtap="A2B">A--B</button>
<button bindtap="A2C">A--C</button>

jsでメソッドを書く; [注意]コメントには問題も含まれているので忘れずに確認してください。

// pages/demo1/demo1.js
Page({
  tapName: function(event) {
    console.log(event)
  },
  A2B: function() {
    // tab切换
    wx.switchTab({
      url: '/pages/demo2/demo2',
    })

    // 工具页面不能用navigateTo进行跳转 ---会报错
    // wx.navigateTo({
    //   url: '/pages/demo2/demo2',
    // })
    console.log()
  },
  A2C: function() {
    // navigateTo跳转--跳转下方没有选项卡
    wx.navigateTo({
      url: '/pages/demo3/demo3',
    })
  }
})

3. ページのライフサイクル

公式ウェブサイトの開発ドキュメントから提供された写真をチェックしてみましょう。

新しいプロジェクトを作成するたびに js ファイルが作成され、各 js ファイルには次のライフサイクル メソッドが含まれます。


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log('1.onLoad')
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    console.log('1.onReady')
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    console.log('1.onShow')
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
    console.log('1.onHide')
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log('1.onUnload')
  },

各テスト ページに同じ方法でテストを印刷します。

サブメニューへジャンプ

  • 1 レベルスキップ
  • レベル 1 からレベル 2 にジャンプします
  • レベル 2 ジャンプ レベル 2
  • 第 2 レベルから第 1 レベルへのジャンプ：通常はジャンプできませんが、その際はルーティングが可能です。
  • 世代間のページジャンプ: A > B > C > D > A

次の図に基づいて確認できますが、詳細は自分でテストする必要があります。

自分でテストする必要がある場合は、上記のルーティング方法を確認してください。

2.2. ルーティング方法

要約:

  1. レベル1は破壊されない
  2. 2層目の奥に飛び込んでレベルを下げると破壊されてしまいます。
  3. 2 番目のレベルの奥にジャンプすると、より高いレベルは非表示になるだけです。
  4. 世代途中のページはすべて破棄されます。

発見はここで終わりです！コメント欄で議論してくださった皆さん、ありがとうございました！！！

おすすめ

転載: blog.csdn.net/weixin_74383330/article/details/133839579
おすすめ
ランキング
uni.request在接口状态码403等还是走success
Springboot は mybatisplus を統合しており、ページング クエリによって返される Page オブジェクトの合計は常に 0 です。
System.InvalidOperationExceptionが：「BuildWindowCoreは、子ウィンドウのハンドル搭乗を返しません。」
[Example 08] IPD system advancement: version naming rules for version management
カスタム NavigationBar -- UIView による描画
データとデータの移行を復元します（個人的なメモ、無用リーダー）
4. 2次元配列で検索する
vim的私人订制
Flutterのカスタムルーティング切り替えアニメーション
Javaコンテナの方法の簡単なアプリケーションのArrayList
アーカイブ
もっと
2024-05-12(27)
2024-05-11(31)
2024-05-10(33)
2024-05-09(30)
2024-05-08(18)
2024-05-07(34)
2024-05-06(6)
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)

コードワールド

© 2018 codetd.com