1. ページ間ナビゲーション機能

サンプルコード:

 <navigator url="/pages/product/list" open-type="navigate">商品リストへ</navigator>
 <navigator url="/pages/category/main" open-type="navigate">商品カテゴリへ</navigator>
 <navigator url="/pages/product/list" open-type="redirect">商品リストへ（リダイレクト）</navigator>
 <navigator url="/pages/category/main" open-type="redirect">商品カテゴリへ（リダイレクト）</navigator>
 <navigator url="/pages/product/list" open-type="switchTab">商品リストへ（タブ切替）</navigator>
 <navigator url="/pages/category/main" open-type="switchTab">商品カテゴリへ（タブ切替）</navigator>
 <navigator url="/pages/product/list" open-type="reLaunch">商品リストへ（再起動）</navigator>
 <navigator url="/pages/category/main" open-type="reLaunch">商品カテゴリへ（再起動）</navigator>

パラメータ渡しの実装：

<navigator url="/pages/product/list?productId=10&categoryName=hua">商品リストへパラメータ付き</navigator>
<navigator url="/pages/category/main?categoryId=10&categoryName=hua" open-type="switchTab">商品カテゴリへ</navigator>

パラメータ受け取り処理：

ナビゲーション時の留意点：

戻る機能の実装：

<navigator open-type="navigateBack" delta="1">前のページに戻る</navigator>

2. スクロールコンテナの実装

コード例：

<scroll-view class="horizontal-scroll" scroll-x>
    <view class="product-card">
      <image src="../../assets/20181009230933_ihcpp.jpg"></image>
      <text>花束ローズ</text>
      <text>66円</text>
    </view>
    <view class="product-card">
      <image src="../../assets/20181009230933_ihcpp.jpg"></image>
      <text>花束ローズ</text>
      <text>66円</text>
    </view>
    <view class="product-card">
      <image src="../../assets/20181009230933_ihcpp.jpg"></image>
      <text>花束ローズ</text>
      <text>66円</text>
    </view>
    <view class="product-card">
      <image src="../../assets/20181009230933_ihcpp.jpg"></image>
      <text>花束ローズ</text>
      <text>66円</text>
    </view>
  </scroll-view>

実行結果：

画面録画 2026-03-25 162651

3. アイコンの統合

手順：

https://www.iconfont.cn/で必要なアイコンを検索・ダウンロードし、カートに追加してプロジェクトに含めます。Font classを選択しスタイルコードをコピーします。開発環境でiconfontフォルダを作成し、iconfont.cssファイルを作成してスタイルコードを貼り付けます。最後にapp.scssでスタイルファイルをインポートします。

注意点1：

@import"./iconfont/iconfont.scss";

注意点2：

開発時はネットワーク画像の使用を推奨 base64は冗長になるため非推奨

4. イベントバインディング機能

コード例：

Page({
  buttonAction(event){
    console.log(event.mark.itemId)
    console.log(event.mark.itemName)

  }

<button type="primary" bind:tap="handleClick">イベントバインド</button>

第二のイベントバインディング方法：bindイベント名

<button type="warn" bindtap="handleClick">イベントバインド</button>

5. イベント処理

コード：

<button bindtap="buttonAction" data-itemId="1" data-itemName="tom">ボタン</button>


Page({
buttonAction(event){
console.log(event.currentTarget.dataset.itemId)
console.log(event.target.dataset.itemName)
}

catchを使用したイベントバブリング防止:

<view class="container" bind:tap="parentAction">
<button catch:tap="buttonAction">ボタン</button>
</view>

 parentAction(){
console.log('親コンポーネントのイベント')
  },
  buttonAction(){
    console.log('子コンポーネントのイベント')
  }

実行結果：

6. イベントパラメータの受け渡し

コード：

<button bindtap="buttonAction" data-itemId="1" data-itemName="tom">ボタン</button>


buttonAction(event){
console.log(event.currentTarget.dataset.itemId)
console.log(event.target.dataset.itemName)
}

実行結果：

留意事項：

7. markによるカスタムデータ

コード：

<button bindtap="buttonAction" mark:itemId="1" mark:itemName="tom">ボタン</button>

buttonAction(event){
    console.log(event.mark.itemId)
    console.log(event.mark.itemName)

  },
  parentAction(event){
    console.log(event.mark.itemId)
    console.log(event.mark.itemName)

  },

8. データ宣言とバインディング

コード：

<view>{{university}}</view>
<view>{{studentInfo.name}}</view>
<view id="{{elementId}}">属性値バインド</view>
<checkbox checked="{{isSelected}}"/>

data:{
    isSelected:false,
    elementId:1,
    university:'尚硅谷',
    studentInfo:{
    name:'tom'
}

実行結果：

留意事項：

{{}}内で可能な簡易演算：

elementId=1

<!-- 算術演算 -->
<view>{{elementId + 1}}</view>
<view>{{elementId - 1}}</view>

<!-- 三項演算 -->
<view>{{elementId===1?'一致':'不一致'}}</view>

<!-- 論理判定 -->
<view>{{elementId > 1}}</view>

実行結果：

9. データ更新処理

留意事項：

<view>{{counter}}</view>
<button bindtap="incrementCounter">counter更新</button>


 incrementCounter(){
// データ取得
// console.log(this.data.counter)
// 代入でデータ変更
// this.data.counter +=1
// console.log(this.data.counter)
this.setData({
  counter:this.data.counter+1
})
  },

10. setData()によるオブジェクトデータの更新

留意事項：

1. 単一/複数プロパティの追加：

 // 単一または複数プロパティ追加
    // this.setData({
    //   'userInfo.userName':'tom',
    //   'userInfo.userAge':10
    // })

2. 単一/複数プロパティの修正：

 // 単一または複数プロパティ修正
    // this.setData({
    //   'userInfo.userName':'jerry',
    //   'userInfo.userAge':18
    // })

3. ES6スプレッド構文による追加と修正：

 // const userInfo ={
    //   ...this.data.userInfo,
    //   userName:'jerry',
    //   userAge:18
    // }
    // this.setData({
    //   userInfo
    // })

4. Object.assignによる追加と修正：

//   const userInfo = Object.assign(this.data.userInfo,{userName:'jerryu'},{userAge:19})
  //   this.setData({
  //     userInfo
  // })

5. 単一プロパティ削除：

 // 単一プロパティ削除
  // delete this.data.userInfo.userName
  // console.log(this.data.userInfo)
  // this.setData({
  //   userInfo : this.data.userInfo
  // })

6. 複数プロパティ削除：

 // 複数プロパティ削除 rest残余パラメータ
const {userAge , testData, ...remaining} = this.data.userInfo
this.setData({
  userInfo:remaining
})

11. setData()による配列データの更新

1. 配列要素追加の3つの方法：

①

// this.data.arrayData.push(4)
  // this.setData({
  //   arrayData:this.data.arrayData
  // })

②

 // const newArray=this.data.arrayData.concat(4)
  // this.setData({
  //    arrayData:newArray
  //   })

③

 // const newArray=[...this.data.arrayData,4]
  // this.setData({
  //   arrayData:newArray
  //    })

2. 配列要素の修正

 // this.setData({
    //   // 'arrayData[1]':6
    //   'arrayData[0].name':'jerry'
    //    })

3. 配列要素の削除

留意事項:

方法：

①

  //  this.data.arrayData.splice(1,1)
    //  this.setData({
    //   arrayData: this.data.arrayData
    //  })

②

  const newArray=this.data.arrayData.filter(element =>element!==2 )
    this.setData({
      arrayData:newArray
    })

12. 双方向データバインディングの簡易実装

留意事項：

<!-- <input type="text" value="{{inputValue}}" /> -->

<!-- <input type="text" model:value="{{inputValue}}" /> -->

<checkbox model:checked="{{isSelected}}"/>この規約に同意する

留意事項：

コード：

<view wx:for="{{numberList}}">{{item}}-{{index}}</view>

<view wx:for="{{objectData}}">{{item}}-{{index}}</view>

留意事項：

コード：

<view wx:for="{{fruitList}}" wx:key="fruitId">{{item.name}}</view>

<view wx:for="{{numberList}}" wx:key="this">{{item}}</view>

13. リストレンダリング-上級編

留意事項：

コード：

<!-- <view wx:for="{{fruitList}}" wx:key="fruitId" wx:for-item="fruitElement" wx:for-index="currentIndex">
<view>名前:{{fruitElement.name}}</view>
<view>価格:{{fruitElement.price}}</view>
</view> -->

コード：

<block wx:for="{{fruitList}}" wx:key="fruitId" wx:for-item="fruitElement" wx:for-index="currentIndex">
<view>名前:{{fruitElement.name}}</view>
<view>価格:{{fruitElement.price}}</view>
</block>

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

コード：

<view wx:if="{{currentNumber ===1}}">currentNumber は{{currentNumber}}</view>
<view wx:elif="{{currentNumber === 2}}">currentNumber は{{currentNumber}}</view>
<view wx:else> currentNumberが2より大きい、現在{{currentNumber}}</view>

留意事項：

コード：

<view hidden="{{showFlag}}">showFlagがtrueの場合表示、それ以外は非表示</view>
<button type="warn" bindtap="incrementCounter">counter更新</button>

実行結果：

wx-ifとhiddenの違い：

15. ミニプログラムの実行メカニズム

留意事項：

16. ミニプログラムライフサイクル

17. アプリケーションライフサイクル

コード：

App({

  /**
   * ミニプログラム初期化完了時にトリガー（グローバルで一度だけ）
   */
  onLaunch: function () {
    console.log('onLaunch ミニプログラム初期化完了時')
  },

  /**
   * ミニプログラム起動、またはバックグラウンドからフォアグラウンド表示時にトリガー
   */
  onShow: function (options) {
    console.log('onShow ミニプログラム起動、またはバックグラウンドからフォアグラウンド表示時')
  },

  /**
   * フォアグラウンドからバックグラウンド移行時にトリガー
   */
  onHide: function () {
    console.log('onHide フォアグラウンドからバックグラウンド移行時')
  },

  /**
   * スクリプトエラーまたはAPI呼び出し失敗時にエラーメッセージと共にトリガー
   */
  onError: function (message) {
    
  }
})

実行結果：

留意事項：

18. ページライフサイクル

1. redirectとnavigateの違い:

コード：

<!-- <navigator url="/pages/product/list" open-type="redirect">リストページへリダイレクト</navigator>

<navigator url="/pages/product/list" open-type="navigate">リストページへナビゲート</navigator> -->

各ライフサイクル関数の留意点：

19. ライフサイクルの詳細設定

コード：

<navigator url="/pages/product/list" open-type="navigate">listページへ移動</navigator>



Page({

  /**
   * ページ初期データ
   */
  data: {
    
  },

  /**
   * ライフサイクル関数--ページロード
   */
  onLoad: function (options) {
    
  },

  /**
   * ライフサイクル関数--ページ初回レンダリング完了
   */
  onReady: function () {
    
  },

  /**
   * ライフサイクル関数--ページ表示
   */
  onShow: function () {
    console.log('cart onShow')
  },

  /**
   * ライフサイクル関数--ページ非表示
   */
  onHide: function () {
    console.log('cart onHide')
  },

  /**
   * ライフサイクル関数--ページアンロード
   */
  onUnload: function () {
    console.log('cart onUnload')
  },

  /**
   * ページ関連イベント処理関数--ユーザーのプルダウン動作監視
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * ページスクロール下部到達イベント処理関数
   */
  onReachBottom: function () {
    
  },

  /**
   * ユーザーが右上隅で共有をクリック
   */
  onShareAppMessage: function () {
    
  }
})

実行結果：

20. ミニプログラムAPI概要

21. ネットワークリクエスト

留意事項：

 wx.request({
    url:'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',
    method:'GET',
    data:{},
    header:{},
    success:(response) =>{
      console.log("リクエスト返却データ：",response)
      if(response.data.code===200){
        this.setData({
          bannerList: response.data.data
        })
        console.log("bannerList割当成功：",this.data.bannerList)
      }
    },
    fail:(error) =>{
      console.log("リクエスト失敗：",error)
    },
    complete:(result) =>{
      console.log("リクエスト完了：",result)
    }
  })

success:(response) =>{
      console.log("リクエスト返却データ：",response)
      if(response.data.code===200){
        this.setData({
          bannerList: response.data.data
        })
        console.log("bannerList割当成功：",this.data.bannerList)
      }
    },

fail:(error) =>{
      console.log("リクエスト失敗：",error)
    },

complete:(result) =>{
      console.log("リクエスト完了：",result)
    }

ドメイン検証スキップの開発設定