WeChat アプレット Jiugongge サンプル コード

この記事は主に WeChat ミニ プログラム Jiugongge のサンプル コードに関する関連情報を紹介します。必要な友人はそれを参照できます

WeChat ミニ プログラム Jiugongge

実装レンダリング:

ミニ プログラムは WeChat で成長します。はモバイル インターフェイスなので、より使いやすくするために、9 マス目のグリッド インターフェイスをナビゲーションとして使用することがよくあります。

単純に考えると、九公グリッドは3行3列で、行を単位として各行を3列に分割すれば大丈夫でしょうか？実践してみましょう。

まず、9 グリッド データの生成を考えてみましょう。各グリッドには、簡単にジャンプできるようにアイコン、タイトル、ルートが必要なので、1 次元配列を定義するだけです。後続の構成をより適切に実行するために、この配列をファイル Routes.js に分割し、index.js ページでそれを参照し、インデックス ディレクトリにルートを配置します。

var PageItems = 
 [ 
  { 
   text: '格子1', 
   icon: '../../images/c1.png', 
   route: '../c1/c1', 
  }, 
  { 
   text: '格子2', 
   icon: '../../images/c2.png', 
   route: '../c2/c2', 
  }, 
   { 
   text: '格子3', 
   icon: '../../images/c3.png', 
   route: '../c3/c3', 
  }, 
  { 
   text: '格子4', 
   icon: '../../images/c4.png', 
   route: '../c4/c4', 
  }, 
  { 
   text: '格子5', 
   icon: '../../images/c5', 
   route: '../c5/c5', 
  }, 
  { 
   text: '格子6', 
   icon: '../../images/c6.png', 
   route: '../c6/c6', 
  }, 
  { 
   text: '格子7', 
   icon: '../../images/c7.png', 
   route: '../c7/c7', 
  }, 
  { 
   text: '格子8', 
   icon: '../../images/c8', 
   route: '../c8/c8', 
  }, 
  { 
   text: '格子9', 
   icon: '../../images/c9.png', 
   route: '../c9/c9', 
  } 
 ]; 
module.exports = { 
 PageItems: PageItems 
}

index.js ページでは、routes.js を参照し、データ PageItems を取得しますが、PageItems は 1 次元配列であり、以前の考え方では 1 行 3 列を次のように使用することでした。この 1 次元配列を再結合する最も直接的な方法は、各配列要素に 3 つの要素のみを含む 1 次元配列を生成することです。コードは次のとおりです。
Index.wxml で、インターフェイスをレイアウトしましょう。各グリッドは同じですが、データは異なるため、テンプレートを使用してそれを提示することを考えました。このために、まずセルテンプレートサーフェスの cell.wxml を作成します。

//index.js 
//获取应用实例 
var app = getApp() 
var routes = require('routes'); 
Page({ 
 data: { 
  userInfo: {}, 
  cellHeight: '120px', 
  pageItems: [] 
 }, 
 //事件处理函数 
 onLoad: function () { 
  var that = this 
  console.log(app); 
  //调用应用实例的方法获取全局数据 
  app.getUserInfo(function (userInfo) { 
   wx.setNavigationBarTitle({ 
    title: '全新测试追踪系统-' + userInfo.nickName, 
    success: function (res) { 
     // success 
    } 
   }) 
   that.setData({ 
    userInfo: userInfo 
   }) 
   var pageItems = []; 
   var row = []; 
   var len = routes.PageItems.length;//重组PageItems 
   len = Math.floor((len + 2) / 3) * 3; 
   for (var i = 0; i < len; i++) { 
    if ((i + 1) % 3 == 0) { 
     row.push(indexs.PageItems[i]); 
     pageItems.push(row); 
     row = []; 
     continue; 
    } 
    else { 
     row.push(indexs.PageItems[i]); 
    } 
   } 
   wx.getSystemInfo({ 
    success: function (res) { 
     var windowWidth = res.windowWidth; 
     that.setData({ 
      cellHeight: (windowWidth / 3) + &#39;px&#39; 
     }) 
    }, 
    complete: function () { 
     that.setData({ 
      pageItems: pageItems 
     }) 
    } 
   }) 
  }) 
 } 
})

ここでは、外部から渡されるデータが 2 つの中括弧で囲まれていることがわかり、内部で簡単なロジックを実行できます。より良いプレゼンテーションのために。たとえば、text==null の場合、空の背景を持つグリッドを表示したいとします。データがある場合、背景のあるグリッドを表示したいので、「{{text==null||text.length==」となります。 0? 'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}".

もう一つのポイントは、このインターフェイス ファイルをテンプレートとして使用するため、テンプレート タグでラップする必要があります。同時に、テンプレートが参照される呼び出しを識別できるように名前を付けます。

ここで、index.wxml でこのテンプレートを参照します

<template name="cell"> 
 <navigator url="{{route}}" class="pages-item" style="height:{{cellHeight}}"> 
  <view class="{{text==null||text.length==0?&#39;pages-icon-wrapper-no-bg&#39;:&#39;pages-icon-wrapper&#39;}}" > 
   <image src="{{icon}}" class="pages-icon"></image> 
  </view> 
  <view class="pages-text-wrapper"> 
   <text class="pages-text">{{text}}</text> 
  </view> 
 </navigator> 
</template>

このテンプレートは import を使用して参照され、 template と is は呼び出しが行われる場所で使用されます。ここで is は cell.wxml 内の名前を指定します。 item[0]、item[1]、item[2]はループ内で渡されるデータ、cellHeightはindex.jsのデータに格納されているデータです。データがテンプレートに渡されると、フレームワークはそれをフィールド、つまりキーと値のペアの形式で展開します。そのため、cell.wxml ファイルをもう一度見ると、キーが内部でデータとして直接使用されていることがわかります。 。

データをインターフェースに提示した後、それに一致する特定のスタイルが必要です。index.wxss コードは次のとおりです。

<!--index.wxml--> 
<import src="cell.wxml" /> 
<view class="pages-container"> 
 <scroll-view scroll-y="true" class="pages-wrapper"> 
  <view wx:for="{{pageItems}}" wx:key="{{text}}"> 
   <view class="pages-row"> 
    <template is="cell" data="{{...item[0],cellHeight}}" /> 
    <template is="cell" data="{{...item[1],cellHeight}}" /> 
    <template is="cell" data="{{...item[2],cellHeight}}" /> 
   </view> 
  </view> 
 </scroll-view> 
</view>

テンプレートのナビゲーター要素を使用してグリッドを表示するので、各グリッドを自然にナビゲートできます。

読んでいただきありがとうございます、皆さんのお役に立てれば幸いです、このサイトをサポートしていただきありがとうございます!

WeChat アプレット Jiugongge サンプル コードに関連するその他の記事については、PHP 中国語 Web サイトに注目してください。