ミニプログラムの基本的な使用方法の知識ポイント（非常に包括的で、お勧めです！）

<テンプレート名="コンポーネント">
<view>ハハハ</view>
  <text>やあ、やあ、やあ</text>
  <テキスト>{{名前}}</テキスト>
  <テキスト>{{年齢}}</テキスト>
</テンプレート>
<テンプレートは="コンポーネント"/>
<テンプレートは="コンポーネント"/>
<テンプレートは="コンポーネント"/>
<template is="compoent" data="{{name: '小屏', age:'123'}}" />

{
  "コンポーネントの使用": {
    "my-cut":"/pages/compent/my-cut" }
}

  // コンポーネントのオプションの styleIsolation を設定すると: "apply-shared" により、ページ設定のスタイル属性がコンポーネントのスタイルに影響します // コンポーネントのオプションの styleIsolation を設定すると: "shared" により、ページ設定のスタイル属性がコンポーネントのスタイルに影響しますComponent({
	オプション:{
    スタイル分離: "apply-shared"
  },
})

成分（{
プロパティ:
    // タイトル: 文字列
    タイトル：{
      タイプ: 文字列、
      値: "私はデフォルト値です",
      //新しい値と古い値を監視するオブザーバー: function(newVal,oldVal){
        コンソールログ(新しい値、古い値)
      }
    },
    
  },
    // コンポーネントでは、このプロパティを使用して CSS スタイルを動的に設定できます externalClasses: ["tltleclass"]

})

<my-cut title="ハハ" tltleclass="red"></my-cut>
<my-cut title="やあやあ" tltleclass="green" />
<マイカット/>

。赤{
  色: 赤;
}
。緑{
  色: 緑;
}

<view class="contention">
  <block wx:for="{{titled}}" wx:key="index">
    <view class="tit"> <text class="intext {{index == increat? 'active' : ''}}" data-count="{{index}}" bindtap="targetTap">{{item}}</text> </view>
  </ブロック>
</ビュー>

メソッド: {
    ターゲットタップ(e){
      定数インデックス = e.currentTarget.dataset.count
      this.setData({
        増加:インデックス
      })
        this.triggerEvent("ターゲットカウント"、{})
    },
    修正する（）{
      this.setData({
        タイトル: ["政治学", "数学", "英語"]
      })
    }

  }

<switch titled="{{list}}" bind:targetCount="targetCount" class="sw-class"></switch>

  ターゲットカウント(){
  //コンポーネントオブジェクトを取得します。const content = this.selectComponent('.sw-class') 
    コンソール.log(コンテンツ)
    // コンテンツ.setData({
    // titled:["政治学", "数学", "英語"]
    // })
    // オープン仕様では、一般的に関数を直接変更するこの方法は推奨されていません。コンポーネント内のメソッドを使用してメソッドを変更し、ページで content.amend() を呼び出すことをお勧めします。
  },

<表示>
  私はタイトルです</view>
<スロット></スロット>
<表示>
  私はコンテンツです</view>

<私のスロット>
<button size="mini"> ボタン</button>
</my-slot>
<私のスロット>
 <画像 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg2.woyaogexing.com%2F2021%2F04%2F26%2F1b402c98095d452486508b8250b21f3f%21360x640.jpeg&refer=http%3A%2F%2Fimg2.woyaogexing.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1625711145&t=d9d310d5e9c878a9d4b7bc7057f2b754"/>
</my-slot>
<私のスロット>
  <スライダー値="20"></スライダー>
</my-slot>

<view>私はマルチスロットのタイトルです</view>
<ビュー> <スロット名="スロット1" ></スロット> </ビュー>
<view> <スロット名="slot2" ></スロット> </view>
<view> <スロット名="slot3" ></スロット> </view>
<view>私はマルチスロットの末尾です</view>

成分（{
  /**
   * コンポーネントプロパティのリスト */
  オプション:{
    複数スロット:true
  }
  )}

<!-- 複数のスロットの使用 -->
<!-- 注記:
各スロットに名前を付ける必要があります。コンポーネントオブジェクトのオプションオブジェクトの下にある multipleSolts プロパティを true に設定する必要があります -->
<私のスロット>
<button slot="slot3">415461</button>
<スライダースロット="スロット1" 値="20"></スライダー>
<text slot="slot2">ヘヘヘヘ</text>
</my-mslot>

プロパティ: 
	タイトル: 文字列、
	コンテンツ：{
	タイプ: 配列、
	値:[1,2.3],
	オブザーバー:関数(newVal,oldVal){
        コンソールログ(新しい値、古い値)
      }
	}
}

データ：{
	カウンター: 0
}	

方法:{
関数foo(){
	
}
}

オプション:{
//複数のスロットを使用する必要がある場合はtrueに設定します
	複数スロット:true、
	// スタイルの分離モードを設定します styleIsolation: "apply-shared", // ページで設定されたスタイル属性はコンポーネントのスタイルに影響します //styleIsolation: "shared" ページで設定されたスタイル属性はコンポーネントのスタイルに影響します}

外部クラス:["on","tre"]

観察者:{
	カウンター: function(newVal){
		コンソールログ(新しい値)
	}
}

  ページの存続期間:{
    見せる（）{
      console.log("監視コンポーネントが配置されているページ")
    },
    隠れる（）{
      console.log("監視コンポーネントが配置されているページが非表示の場合")
    },
    サイズ変更(){
      console.log("ページサイズの変更を監視する")
    }
  }

生涯:
    作成された(){
      console.log("コンポーネントが作成されました")
    },
    添付（）{
      console.log("コンポーネントがページに追加されました")
    },
    準備ができて（）{
      console.log("コンポーネントがレンダリングされました")
    },
    移動しました(){
      console.log("コンポーネントはノードツリー内の別の場所に移動されました")
    },
    分離された(){
      console.log("コンポーネント")
    }
  }

onReady: 関数 () {
    wx.リクエスト({
      URL: 'http://httpbin.org/post',
      メソッド:'post',
      データ：{
        名前:"王帥",
        年齢:19
      },
      成功:function(res){
          コンソール.log(res)
      }
    })
  },

デフォルトの関数リクエストをエクスポートする(オプション) {
    新しい Promise を返します (resolve, reject) => {
      wx.リクエスト({
        url: オプション.url、
        メソッド: option.method || 'get',
        データ: オプション.データ || {},
        成功: 関数 (res) {
            解決する
        },
        失敗: 関数 (res) {
          拒否
        }
      })
    })
}

 onReady: 関数 () {
    //ミニプログラムネイティブネットワークリクエスト// wx.request({
    // URL: 'http://httpbin.org/post',
    // メソッド:'post',
    // データ：{
    // 名前:"wangshuai",
    //年齢:19
    // },
    // 成功:function(res){
    // コンソール.log(res)
    // }
    // })
    リクエスト({url: 'http://httpbin.org/post',method:"post"}).then(res=>{
      コンソール.log(res)
    }).catch(エラー =>{
      コンソール.log(エラー)
    })
  },

<button size="mini" bindtap="showToast">showToast</button>
<button size="mini" bindtap="showModal">モーダルを表示</button>
<button size="mini" bindtap="showLoading">読み込み中を表示</button>
<button size="mini" bindtap="showAction">アクションを表示</button>
<button size="mini" open-type="share">共有</button>

ページ（{
	表示トースト(){
    wx.showToast({
      タイトル: 「私はshowToastです」
    })
  },
  表示モーダル(){
    wx.showModal({
      タイトル:「削除」、
      キャンセルカラー: 'キャンセルカラー',
      成功:関数 (パラメータ) {
          console.log(パラメータ)
          パラメータをキャンセルする場合{
              console.log("削除キャンセルをクリックしました")
          } 
      } 
    })
  },
  読み込み中(){
    wx.showLoading({
      タイトル: 「待つ」
      mask: true //他の操作を防ぐためにマスクを指定します})
    タイムアウトを設定します(()=>{
      wx.hideLoading({
        成功: (res) => {},
      })
    },1500)
  },
  表示アクション(){
    wx.showActionSheet({
      itemList: ['写真', 'ファイル'],
    })
  }
})

<navigator url="/pages/home/home">ホームへ移動</navigator>

<navigator url="/pages/home/home">ホームへ移動</navigator>
<navigator url="/pages/home/home" open-type="redirect">ホームへジャンプ（リダイレクト）</navigator>
<navigator url="/pages/home/home" open-type="reLaunch">ホームへジャンプ(再起動)</navigator>
<navigator url="/pages/home/home" open-type="switchTab">ホームへジャンプ (switchTab)</navigator>