Programme WeChat Mini : utilisation de base des composants

高洛峰
Libérer: 2017-03-01 11:32:06
original
2116 Les gens l'ont consulté

Aujourd'hui, nous allons vous présenter en détail l'utilisation de base des composants du mini-programme WeChat.
Tout d'abord, créez une nouvelle page. Si vous n'êtes pas clair sur la structure de base des répertoires de l'applet WeChat, vous pouvez la consulter dans notre série de didacticiels. 1) Créez un nouveau répertoire (nommé newvip) ;
2) Ajoutez newvip.js et newvip.wxml sous le projet (Nous l'avons présenté dans le tutoriel précédent : .js et .wxml sont indispensables pour créer des pages deux fichiers) .
3) Enregistrez notre page nouvellement ajoutée dans app.json, comme suit :

  "pages":[
    "pages/newvip/newvip",
    "pages/index/index",
    "pages/logs/logs"
  ],
Copier après la connexion

4) Si elle est compilée à ce moment-là, elle échouera certainement. (Vous voudrez peut-être l'essayer, l'impression sera plus profonde). Nous devons également accéder à la page newvip.js pour écrire le contenu de base de la page. Bien sûr, il nous suffit de saisir la page et elle apparaîtra automatiquement. Nous pouvons d'abord utiliser le contenu de la page par défaut.

Page({
  data:{
    String1
  },
  onLoad:function(options){
    // 生命周期函数--监听页面加载
    String2
  },
  onReady:function(){
    // 生命周期函数--监听页面初次渲染完成
    String3
  },
  onShow:function(){
    // 生命周期函数--监听页面显示
    String4
  },
  onHide:function(){
    // 生命周期函数--监听页面隐藏
    String5
  },
  onUnload:function(){
    // 生命周期函数--监听页面卸载
    String6
  },
  onPullDownRefresh: function() {
    // 页面相关事件处理函数--监听用户下拉动作
    String7
  },
  onReachBottom: function() {
    // 页面上拉触底事件的处理函数
    String8
  },
  onShareAppMessage: function() {
    // 用户点击右上角分享
    return {
      title: 'title', // 分享标题
      desc: 'desc', // 分享描述
      path: 'path' // 分享路径
    }
  }
})
Copier après la connexion

5) La modification sera passée à ce moment-là. Nous saisissons simplement du texte sur la page newvip.wxml pour le vérifier, comme le montre la figure ci-dessous :

Programme WeChat Mini : utilisation de base des composants

Deuxièmement, nous pouvons aller sur le site officiel de WeChat pour avoir la compréhension la plus élémentaire des composants du mini-programme WeChat Apprenez : https://mp.weixin.qq.com/debug/wxadoc/dev/component/
Nous pouvons voir que WeChat comporte de nombreux composants. Dans l'article précédent, WeChat. Mini programme : conteneur de vue de mini programme (conteneur de vue) Nous avons également brièvement présenté les composants des mini programmes. En fait, le code utilisé par tous les composants a été donné dans la documentation officielle du composant applet WeChat. Nous pouvons l'utiliser en le copiant et en le modifiant simplement. Prenons le bouton comme exemple. Nous copions le contenu suivant de la documentation officielle du mini programme :

<button type="default" size="{{defaultSize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="default" hover-class="other-button-hover"> default </button>
<button type="primary" size="{{primarySize}}" loading="{{loading}}" plain="{{plain}}"
        disabled="{{disabled}}" bindtap="primary"> primary </button>
Copier après la connexion

Bien sûr, certains d'entre eux ne nous conviennent pas pour le moment, nous supprimerons donc et conserverons le contenu le plus basique . Après compilation, cela se présente comme le montre la figure ci-dessous :

Programme WeChat Mini : utilisation de base des composants

Prenons le composant Text comme exemple. Nous copions le contenu suivant de la documentation officielle du mini programme :

<text>{{text}}</text>
Copier après la connexion

Notre effet de démonstration compilé est présenté ci-dessous :

Programme WeChat Mini : utilisation de base des composants

Plus de mini programmes WeChat : Pour les articles liés à l'utilisation de base des composants, faites attention au site PHP chinois !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal