WeChatウィジェットカスタムコンポーネントtabBar、navBarを実現

長い間文章を書かなかったので,手が少し生々しいので,お許しください.
最近Appプロジェクトでは、モジュールの1つを抽出してウィジェットを作成します.機能には、下部のTabバー、上部のタイトルバーが含まれています.
ここでカスタマイズを選択した理由は2つあります.

narBar微信原生は戻りアイコンの設定をサポートせず、Androidではタイトルが左に表示され、iOSでは中央に表示されます.

の下部にあるtabBarではクリックジャンプページはサポートされておらず、アイコンレイアウトではtabBarを超える高さはサポートされていません.

次の2枚の図は簡単に実現できる効果です.
分析ソースアドレスの実装
インプリメンテーション分析
以上の効果は私も参考にしたネット上の例を実現して、この効果の原作の分析を見ることができます.あるいは次の私の理解を見てみましょう.
WeChatウィジェットカスタムコンポーネント
公式ドキュメントアドレスweixin.qq.com/miniprogram…
カスタムコンポーネントの説明

は、異なるページで繰り返し使用するために、ページ内の機能モジュールをカスタムコンポーネントとして抽象化することができる.

はまた、コードメンテナンスを容易にするために、複雑なページを複数の低結合モジュールに分割することもできる.

カスタムコンポーネントの作成
最新の開発ツールでは、直接コンポーネントの作成がサポートされています.componentsディレクトリを作成し、ここでtabbarディレクトリを作成し、右クリックして Componentディレクトリを選択し、コンポーネント名を入力します.たとえば、ここでtabbarと入力します.
コンポーネントテンプレートとスタイル
公式文書weixin.qq.com/miniprogram…
ページと同様に、カスタムコンポーネントには独自のwxmlテンプレートとwxssスタイルがあります.
コンポーネントテンプレートには、コンポーネント参照時に提供されるサブノードを担持するためのノードを提供することができる.このノードは、コンポーネントプレースホルダに相当する.
デフォルトのwxmlでは、1つのノードのみがサポートされており、複数のノードをサポートするように設定できます.
レイアウトが作成されてからスタイルの設定が開始され、ページではwxssで定義してもよいし、コンポーネントのclass名を設定してから、そのコンポーネントのwxssでスタイルを定義するように呼び出すようにしてもよい.
コンポーネントのwxssは、デフォルトではapp.wxssスタイルはサポートされていませんが、複数のを設定するように設定できます.
テンプレートデータバインド
Componentコンストラクタを呼び出すと、コンポーネントのプロパティ、データ、メソッドなどを指定できます.developers.weixin.qq.com/miniprogram…

Component({
  //        
  behaviors: [],

  properties: {
    myProperty: { //    
      type: String, //   （  ），         ：String, Number, Boolean, Object, Array, null（      ）
      value: '', //      （  ），               
      observer(newVal, oldVal, changedPath) {
        //            （  ），      methods           ,  ：'_propertyChange'
        //    newVal         ， oldVal     
      }
    },
    myProperty2: String //        
  },
  data: {}, //     ，       

  lifetimes: {
    //       ，     ，    methods        
    attached() { },
    moved() { },
    detached() { },
  },

  //       ，     ，    methods        
  attached() { }, //   attached     lifetimes        
  ready() { },

  pageLifetimes: {
    //              
    show() { },
    hide() { },
    resize() { },
  },

  methods: {
    onMyButtonTap() {
      this.setData({
        //                       
      })
    },
    //             
    _myPrivateMethod() {
      //     data.A[0].B    'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange(newVal, oldVal) {

    }
  }

})

上記のコードでは、propertiesとsetDataを組み合わせて動的設定データを実現することができ、methodsでは、外部呼び出し、すなわちコンポーネント間の通信のための方法を定義することができる.
コンポーネント間通信
方法および属性は、コンポーネントtriggerEventの例をthis.selectComponentまたは直接取得することによって呼び出すことができる.

triggerEvent

親コンポーネントは、thisを介してもよい.selectComponentメソッドは、サブコンポーネントインスタンスオブジェクトを取得し、コンポーネントの任意のデータとメソッドに直接アクセスできます.

コンポーネントの使用開始
ページのjsonファイルにコンポーネントのパスを設定します.

{
  "usingComponents": {
    "navbar": "/components/navbar/index",
    "tabbar": "/components/tabbar/tabbar"
  }
}

ページのwxmlレイアウトに次のように追加します.

//     
'{{nvabarData}}'>
//   
"home-page">
  'margin-top: {{height}}px;margin-bottom:10px;'>

//     
"{{tabbar}}">

カスタムtabBarコンポーネント分析
文章の上部の原作者の分析を見る.いくつかの穴を紹介します.

コンポーネントのjsファイルにはtabbarが設定されていますが、app.jsonではtabbarを構成する必要があります.詳細な構成は、文書上部のgithubリンクを参照してください.

ページのonloadにもう一度

を設ける必要がある.

wx.hideTabBar({
    })

共有ページから左上のトップページアイコンをクリックしてトップページに戻るとtabbarが2つ現れるので、トップページにはtabbarをもう一度隠す必要があります.

パスの問題に注意してください.新しい開発ツールcomponentsファイルはminiprogramで、pagesと同じレベルでなければなりません.そうしないと、コンポーネントを導入するパスでエラーが発生する可能性があります.

カスタムnavBarコンポーネント分析
ウィジェットで共有されたページには戻るボタンはありません.ユーザーが再び私たちのウィジェットに戻るために、navbarで戻るボタンとトップページに戻るボタンをカスタマイズしました.
ここでは、ウィジェットのシーン値と、グローバル変数shareを用いて、共有ページから入ってきたか否かを判断する.app.jsで処理されました.

//             
    if (options.scene == 1007 || options.scene == 1008) {
      this.globalData.share = true
    } else {
      this.globalData.share = false
    };

上部の高さに適合するために、wxmlレイアウトには、システムのステータスバーの高さを取得することによって得られるmargin-topの高さも動的に設定される.

 getSystemInfo: function () {
    let t = this;
    wx.getSystemInfo({
      success: function (res) {
        //     
        t.globalData.height = res.statusBarHeight;
      }
    });
  },

次に、ページのdataにコンポーネントのデータとステータスバーの高さを設定します.

data: {
    //        
    nvabarData: {
      showCapsule: 0, //            1        0     
      title: '     ', //         
    },
    //                
    height: app.globalData.height * 2 + 20,
    // tabbar
    tabbar: {},
  },

原作者は実装アイコンの表示と非表示の一部の論理が私の予想と一致していないので、私が実装したいのは共有ページから入ってから左上隅の戻りトップページアイコンを表示し、通常は戻りボタンだけを表示することです.修正点後のwxmlは以下の通りです.

      '_navback' wx:if='{{!share}}'>
        '/images/back.png' mode='aspectFill' class='back-pre'>
      
//     share     
      'navbar-v-line' wx:if='{{share}}'>
//      share     
      '_backhome'  wx:if='{{share}}'>
        '/images/icon/icon_home.png' mode='aspectFill' class='back-home'>
      

本文が終わったら、好きならいいね.