Exemple de code de l'applet WeChat Jiugongge-Développement de mini-programmes-php.cn

Exemple de code de l'applet WeChat Jiugongge

高洛峰

Libérer： 2017-02-13 11:01:33

original

2509 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes sur l'exemple de code du programme WeChat Mini Jiugongge. Les amis qui en ont besoin peuvent se référer à la mise en œuvre du

WeChat Mini Program Jiugongge

. rendus :

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

Le mini programme est développé sur WeChat et est une interface côté mobile Afin de le rendre plus pratique à utiliser, nous souhaitons souvent utiliser le neuf. -interface de grille carrée comme navigation. Comment y parvenir ?

Basé sur une réflexion simple, la grille de Jiugong est composée de trois lignes et trois colonnes. Si la ligne est considérée comme une unité et que chaque ligne est divisée en trois colonnes, est-ce que ça va ? Pratiquons-le.

Tout d'abord, considérons la génération de données sur neuf grilles. Chaque grille a besoin d'une icône, d'un titre et d'un itinéraire pour faciliter le saut. Nous avons maintenant neuf pages ce jour-là, alors définissez-en un. tableau unidimensionnel qui est Can. Afin de mieux effectuer la configuration ultérieure, nous séparons ce tableau dans un fichier routes.js, puis le référençons dans la page index.js et mettons les routes dans le répertoire d'index.

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 
}

Copier après la connexion

Dans la page index.js, nous faisons référence à routes.js, puis obtenons les données PageItems, mais PageItems est un- tableau dimensionnel, et nous avons pensé précédemment à utiliser une ligne et trois colonnes pour former un groupe, donc ce tableau unidimensionnel doit être réorganisé. La méthode la plus directe est de générer un tableau, et les éléments de chaque tableau contiennent un. tableau unidimensionnel avec seulement trois éléments, le code est le suivant

//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 
     }) 
    } 
   }) 
  }) 
 } 
})

Copier après la connexion

Dans index.wxml, nous disposons l'interface. Puisque chaque grille est la même, les données sont différentes, j'ai donc pensé à utiliser un modèle pour les présenter. Pour ce faire, nous créons d'abord un modèle de cellule 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>

Copier après la connexion

Ici, vous voyez deux accolades entre elles. Ce sont des données transmises par l'extérieur, puis des jugements logiques simples peuvent être formulés à l'intérieur pour une meilleure présentation. Par exemple, lorsque text==null, nous voulons présenter une grille avec un arrière-plan vide. Lorsqu'il y a des données, nous voulons présenter une grille avec un arrière-plan, donc "{{text==null||text.length== 0? 'pages-icon-wrapper-no-bg':'pages-icon-wrapper'}}".

Autre point, puisque nous utilisons ce fichier d'interface comme modèle, nous devons utiliser Enveloppez-le avec la balise de modèle et donnez-lui un nom afin que l'appel puisse être identifié là où le modèle est référencé.

Maintenant, nous référençons ce modèle dans 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>

Copier après la connexion

Le modèle est référencé à l'aide de import , utilise un modèle et se trouve au lieu d'appel, où est spécifié le nom dans cell.wxml. item[0], item[1] et item[2] sont les données transmises dans la boucle et cellHeight sont les données stockées dans les données d'index.js. Lorsque les données sont transmises au modèle, le framework les développera sous forme de champs, c'est-à-dire de paires clé-valeur, donc si vous regardez à nouveau le fichier cell.wxml, vous constaterez que les clés sont utilisées directement comme données en interne. .

Après avoir présenté les données à l'interface, nous avons besoin d'un certain style pour y correspondre. Le code index.wxss est le suivant.

/**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; 
}

Copier après la connexion

Nous utilisons l'élément navigateur dans notre modèle pour présenter la grille, afin que chaque grille puisse être parcourue naturellement.

Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !

Pour plus d'articles liés à l'exemple de code de l'applet WeChat Jiugongge, veuillez faire attention au site Web PHP chinois !