Comment créer une page dans le développement d'applets WeChat

Nous avons deux pages, la page d'index et la page des logs, à savoir la page d'accueil et la page d'affichage du log de démarrage du mini programme. Elles sont toutes les deux dans le répertoire des pages. Le [chemin + nom de la page] de chaque page du mini-programme WeChat doit être écrit dans les pages de app.json, et la première page dans les pages est la page d'accueil du mini-programme.

Chaque mini page de programme est composée de quatre fichiers de suffixes différents portant le même nom dans le même chemin, tels que : index.js, index.wxml, index.wxss, index.json. Les fichiers avec le suffixe .js sont des fichiers de script, les fichiers avec le suffixe .json sont des fichiers de configuration, les fichiers avec le suffixe .wxss sont des fichiers de feuille de style et les fichiers avec le suffixe .wxml sont des fichiers de structure de page.

index.wxml est le fichier de structure de la page :

<font size="3" face="微软雅黑" style=""><!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view></font>

Dans cet exemple, , , sont utilisés pour construire la structure de la page, lier les données et les fonctions de traitement interactif.

index.js est le fichier de script de la page. Dans ce fichier, nous pouvons surveiller et traiter les fonctions de cycle de vie de la page, obtenir des mini-instances de programme, déclarer et traiter des données, répondre aux événements d'interaction de la page, etc.

<font size="3" face="微软雅黑" style="">//index.js
// 获取应用实例
var app = getApp()
Page({
  data: {
    motto: &#39;Hello World&#39;,
    userInfo: {}
  },
  // 事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: &#39;../logs/logs&#39;
    })
  },
  onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var that = this
    // 调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      // 更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})</font>

index.wxss 是页面的样式表：
<font size="3" face="微软雅黑" style="">/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}
.usermotto {
  margin-top: 200px;
}</font>

Copier le code

La feuille de style de la page est facultative. Lorsqu'il existe une feuille de style de page, les règles de style de la feuille de style de la page se répercuteront sur les règles de style de app.wxss. Si vous ne précisez pas la feuille de style de la page, vous pouvez également utiliser directement les règles de style spécifiées dans app.wxss dans le fichier de structure de la page.

index.json est le fichier de configuration de la page :

Le fichier de configuration de la page n'est pas nécessaire. Lorsqu'il existe un fichier de configuration de page, les éléments de configuration de la page écraseront les mêmes éléments de configuration dans la fenêtre de app.json. S'il n'y a pas de fichier de configuration de page spécifié, la configuration par défaut dans app.json sera utilisée directement sur la page.

La structure de la page des journaux

<font size="3" face="微软雅黑" style=""><!--logs.wxml-->
<view class="container log-list">
  <block wx:for-items="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view></font>

La page des journaux utilise des balises de contrôle pour organiser le code, utilise wx:for-items pour lier les données des journaux et boucle les données des journaux pour les développer. nodes

<font size="3" face="微软雅黑" style="">//logs.js
var util = require(&#39;../../utils/util.js&#39;)
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync(&#39;logs&#39;) || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})</font>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Développement d'un mini programme WeChat pour obtenir des informations utilisateur de base

Comment créer un projet pour WeChat mini développement de programmes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!