Beispielcode für das WeChat-Applet Jiugongge-Mini-Programmentwicklung-php.cn

Beispielcode für das WeChat-Applet Jiugongge

高洛峰

Freigeben： 2017-02-13 11:01:33

Original

2507 Leute haben es durchsucht

In diesem Artikel werden hauptsächlich relevante Informationen zum Beispielcode des WeChat Mini-Programms Jiugongge vorgestellt. Freunde in Not können sich auf die Implementierungsdarstellungen des

WeChat Mini-Programms Jiugongge

beziehen.

微信小程序九宫格实例代码

Das Miniprogramm wurde auf WeChat entwickelt und ist eine mobile Schnittstelle. Um die Verwendung komfortabler zu gestalten, möchten wir häufig die Neun-Quadrat-Raster-Schnittstelle verwenden Navigation. Wie erreicht man das?

Basierend auf einer einfachen Überlegung besteht das Jiugong-Raster aus drei Zeilen und drei Spalten. Wenn die Zeile als Einheit betrachtet wird und jede Zeile in drei Spalten unterteilt ist, ist das in Ordnung? Lass es uns üben.

Betrachten Sie zunächst die Generierung von Neun-Gitter-Daten. Jedes Gitter benötigt ein Symbol, einen Titel und eine Route für den einfachen Sprung. Wir haben jetzt neun Seiten, also definieren Sie ein eindimensionales Array das ist Can. Um die nachfolgende Konfiguration besser durchführen zu können, trennen wir dieses Array in eine Datei „routes.js“, verweisen dann auf der Seite „index.js“ darauf und legen Routen im Indexverzeichnis ab.

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

Nach dem Login kopieren

Auf der Seite „index.js“ verweisen wir auf „routes.js“ und rufen dann die Daten von „PageItems“ ab, aber „PageItems“ ist ein ein- dimensionales Array, und wir Die vorherige Idee besteht darin, eine Zeile und drei Spalten zu verwenden, um eine Gruppe zu bilden. Daher muss dieses eindimensionale Array neu organisiert werden. Die direkteste Methode besteht darin, ein Array zu generieren, und die Elemente jedes Arrays enthalten a eindimensionales Array mit nur drei Elementen, der Code lautet wie folgt:

//index.js 
//获取应用实例 
var app = getApp() 
var routes = require(&#39;routes&#39;); 
Page({ 
 data: { 
  userInfo: {}, 
  cellHeight: &#39;120px&#39;, 
  pageItems: [] 
 }, 
 //事件处理函数 
 onLoad: function () { 
  var that = this 
  console.log(app); 
  //调用应用实例的方法获取全局数据 
  app.getUserInfo(function (userInfo) { 
   wx.setNavigationBarTitle({ 
    title: &#39;全新测试追踪系统-&#39; + 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 
     }) 
    } 
   }) 
  }) 
 } 
})

Nach dem Login kopieren

In index.wxml legen wir die Schnittstelle fest. Da jedes Raster gleich ist, sind die Daten unterschiedlich. Deshalb habe ich mir überlegt, eine Vorlage zu verwenden, um sie darzustellen. Dazu erstellen wir zunächst eine Zellvorlage cell.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>

Nach dem Login kopieren

Hier sehen Sie zwei geschweifte Klammern. Es handelt sich um Daten, die von übergeben wurden nach außen, und dann können im Inneren einfache logische Urteile zur besseren Darstellung getroffen werden. Wenn beispielsweise text==null ist, möchten wir ein Raster mit einem leeren Hintergrund darstellen. Wenn Daten vorhanden sind, möchten wir ein Raster mit einem Hintergrund darstellen, also „{{text==null||text.length==.“ 0? 'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}".

Ein weiterer Punkt, da wir diese Schnittstellendatei als Vorlage verwenden, müssen wir verwenden Umschließen Sie es mit dem Template-Tag und geben Sie ihm einen Namen, damit der Aufruf dort identifiziert werden kann, wo auf die Vorlage verwiesen wird.

Jetzt referenzieren wir diese Vorlage in index.wxml

<!--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>

Nach dem Login kopieren

Die Vorlage wird mithilfe von import referenziert. Verwenden Sie die Vorlage und befinden Sie sich am Ort des Aufrufs, wobei der Name in cell.wxml angegeben wird. item[0], item[1] und item[2] sind die in der Schleife übergebenen Daten, und cellHeight sind die in den Daten von index.js gespeicherten Daten. Wenn Daten an die Vorlage übergeben werden, erweitert das Framework diese in Form von Feldern, also Schlüssel-Wert-Paaren. Wenn Sie sich also die Datei cell.wxml noch einmal ansehen, werden Sie feststellen, dass Schlüssel intern direkt als Daten verwendet werden .

Nachdem wir die Daten der Schnittstelle präsentiert haben, benötigen wir einen bestimmten Stil, der dazu passt. Der index.wxss-Code lautet wie folgt.

/**index.wxss**/ 
 
.pages-container { 
 height: 100%; 
 display: flex; 
 flex-direction: column; 
 box-sizing: border-box; 
 padding-top: 10rpx; 
 padding-bottom: 10rpx; 
} 
 
.pages-title-bg { 
 width: 100%; 
} 
 
.pages-wrapper { 
  
} 
 
 
.pages-row { 
 width: 100%; 
 display: flex; 
 flex-direction: row; 
 justify-content: space-around; 
} 
 
.pages-item { 
 position: relative; 
 padding: 10rpx; 
 width: 33%; 
 background-color: #fff; 
 border: #ddd solid 1px; 
} 
 
.pages-icon-wrapper { 
 display: flex; 
 justify-content: space-around; 
 align-items: center; 
 margin: 10rpx; 
 border-radius: 30%; 
 height: 75%; 
 background:#00CD0D; 
} 
 
.pages-icon-wrapper-no-bg { 
 display: flex; 
 justify-content: space-around; 
 align-items: center; 
 margin: 10rpx; 
 height: 75%; 
} 
 
.pages-icon { 
 width: 100rpx; 
 height: 100rpx; 
} 
 
.pages-text-wrapper { 
 text-align: center; 
} 
 
.pages-text { 
 font-weight: bolder; 
}

Nach dem Login kopieren

Wir verwenden das Navigatorelement in unserer Vorlage, um das Raster darzustellen, sodass in jedem Raster natürlich navigiert werden kann.

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Weitere Artikel zum Beispielcode des WeChat-Applets Jiugongge finden Sie auf der chinesischen PHP-Website!