WeChat ミニ プログラムに関する共通の知識

---

1. WeChat ミニプログラムの理解

ミニ プログラムはオープンな機能であり、開発者はミニ プログラムを迅速に開発できます。ミニ プログラムは WeChat 内で簡単に取得して配布できると同時に、優れたユーザー エクスペリエンスを提供します。

WeChat ミニ プログラムの利点:

1. 微信助理，容易推广。ミニ プログラムには多くの入り口があり、企業がコンバージョンと収益化のためのトラフィックをより効率的に獲得するのに役立ちます。
2. 使用便捷。ミニプログラムはワンクリックで利用できるため、利便性やスピードを求めるユーザーのニーズに応え、利用者は増え続けています。
3. 体验良好，有接近原生app的体验。。WeChat エコシステムでは、ミニ プログラムは機能とエクスペリエンスの点で H5 ページを即座に無効にする可能性があります。H5 ページはラグ、遅延、読み込みの遅さ、権限の不足などの問題に悩まされることがよくあります。しかし、これらの問題はミニ プログラムでは発生しません。
4. 成本更低。開発コストから運営およびプロモーションのコストに至るまで、ミニ プログラムのコストは APP のコストのわずか 10 分の 1 であり、これは起業家と従来の小売業者の両方にとって大きな利点です。

WeChat ミニ プログラムの欠点:

1. 单个包大小限制为2M,そのため大規模なアプリケーションの開発は不可能であり、下請けの上限は2,000万です（この値は常に変動します。公式Webサイトを参照してください）。
2. 需要像app一样审核上架，これはH5のリリースよりも厄介です。
3. 处处受微信限制。たとえば、モーメントに直接共有することはできません。また、ポイントや仮想トランザクションが関係する場合、ミニ プログラムは許可されません。

2. ミニプログラムにおける wxss と css の類似点と相違点

WXSS は CSS に似ていますが、CSS に基づいていくつかの追加と変更が行われます。

1. サイズ単位 rpx: rpx は、画面の幅に応じて調整できるレスポンシブ ピクセルです。指定した画面幅は750rpxです。さまざまな携帯電話モデルでは、1rpx=画面幅/750となります。(電話 6 では 1rpx = 0.5px)
2. スタイルのインポート: @import して他の wxss をインポートできます
3. スタイルセレクター: クラスセレクター、ID セレクター、要素セレクター、擬似要素セレクター

@import './test_0.wxss'

3. ミニプログラムのテンプレート構文 WXML (ラベル、データ、レンダリング)

1. ラベルの使用

ミニ プログラムには H5 によって提供されるタグがありません。ここでは、ミニ プログラムによって提供されるコンポーネントを使用する必要があります。よく使用されるタグは次のとおりです

1. ビュー: div と同等。
2. テキスト: スパンと同等。
3. 画像: img と同等

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

1. データ定義:
2. データの引用: データは { {}} を通じて引用できます。
   小程序中任何需要获取数据的地方都需要用{ {}},包括标签内的属性。

data:{
   
    
    
	return {
   
    
    
		msg:"hello world",
		num: 18,
	}
  }

3. データレンダリング

1. レンダリングレイヤーはデータに関連しています。
2. ロジック層はデータの生成と処理を担当します。
3. ロジック層は、Page インスタンスの setData メソッドを通じてデータをレンダリング層に渡します。

<view>{
   
    
    {
   
    
     msg }}</view>
Page({
   
    
    
  data:{
   
    
    
	return {
   
    
    
		msg:"hello world",
		num: 18,
	}
  }
  onLoad: function () {
   
    
    
    this.setData({
   
    
     msg: 'Hello World2222' })
  }
})

4. 論理的なレンダリング

wx:if和hidden

1. wx:if : WXML では、wx:if="{ {condition}}" を使用して、コード ブロックをレンダリングする必要があるかどうかを決定します。
   複数のコンポーネント タグを一度に決定したい場合は、1 つのタグを使用して複数のコンポーネントをラップできます。上記の属性を制御するには wx:if を使用します。
2. hidden: 条件付きレンダリングは、hidden属性を通じて実行することもできます。
3. wx:if と hidden の類似点と相違点:
   同じ: どちらも要素の表示と非表示を制御できます。
   相違点: wx:if は、条件が満たされない場合に対応する DOM を削除します。 hidden 属性は、display 属性を設定することで条件付きレンダリングを実行しますなしです。

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

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

<view hidden="{
    
     
     {condition}}">
隐藏
</view>

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

wx:for: コンポーネントの wx:for コントロール属性を使用して配列をバインドすると、配列内の各項目のデータを使用してコンポーネントを繰り返しレンダリングできます。デフォルトでは、配列内の現在の項目の添字変数名はデフォルトで Index に設定され、配列内の現在の項目の変数名はデフォルトで item に設定されます。
wx:for-index、wx:for-item は、インデックスとアイテムのエイリアスを指定するために使用されます。

wx:key: 指定されたリスト内の項目の一意の識別子。
要件: リスト内の唯一の文字列または数値である必要があります; 予約キーワード this: for ループ内の項目自体を表し、項目自体が唯一の文字列または数値です 機能: 再配置の効率を向上させることができ
ます

<!-- array 是一个数组 -->
<view wx:for="{
    
     
     {index in array}}" wx:key="{
    
     
     {index}}">
  {
  
   
   {index}}: {
  
   
   {item.name}}
</view>
<view wx:for="{
    
     
     {array}}" wx:for-index="idx" wx:for-item="itemName">
  {
  
   
   {idx}}: {
  
   
   {itemName.name}}
</view>

对应的脚本文件：
Page({
  data: {
    array: [{
      name: '天亮教育',
    }, {
      name: '尚云科技'
    }]
  }
})

6.テンプレート

WXML は、コード スニペットを定義してさまざまな場所で呼び出すことができるテンプレートを提供します。name 属性をテンプレートの名前として使用します。次に、その中にコード スニペットを定義します。
is 属性を使用して使用するテンプレートを宣言し、テンプレートに必要なデータを渡します。

定义
<template name="msgItem">
  <view>
    <text> {
  
   
   {index}}: {
  
   
   {msg}} </text>
    <text> Time: {
  
   
   {time}} </text>
  </view>
</template>
调用
<!-- msgList:[
      {
        index: 0,
        msg: '这是一段模板',
        time: '2020-10-10'
      }
    ] -->
<view wx:for="{
    
     
     {msgList}}">
  <template is="msgItem" data="{
    
     
     {...item}}"></template>
</view>

7. 引用

WXML は、インポートとインクルードという 2 つのファイル参照方法を提供します。

1. import: ターゲット ファイルで定義されたテンプレートをこのファイルで使用できます。
   インポートにはスコープの概念があることに注意してください。つまり、ターゲット ファイルで定義されたテンプレートのみがインポートされ、テンプレートはターゲットにインポートされます。ファイルはインポートされません。つまり、これはインポートが再帰的ではありません。