Démarrez le développement d'applets WeChat en huit minutes

Enregistrez le mini programme WeChat

Si vous n'avez pas de compte sur la plateforme publique WeChat, veuillez entrer la plateforme publique WeChat d'abord. Sur la page d'accueil, cliquez sur le bouton « S'inscrire maintenant » pour vous inscrire. Les types de comptes enregistrés peuvent être des comptes d'abonnement, des comptes de service, des mini-programmes et WeChat d'entreprise. Nous pouvons sélectionner « mini-programme ».

Remplissez ensuite les informations du compte. A noter que l'adresse e-mail renseignée doit être une adresse e-mail qui n'a pas été enregistrée sur la plateforme publique WeChat ou liée à un compte WeChat personnel, et chaque adresse e-mail ne peut postuler que pour un seul mini-programme.

Après avoir activé l'e-mail, sélectionnez le type d'objet comme « Type personnel » et enregistrez les informations sur l'objet comme requis. Les informations sur le sujet ne peuvent pas être modifiées après la soumission. Le sujet deviendra le seul sujet juridique et partie contractante pour que vous puissiez utiliser les services et fonctions de la plateforme publique WeChat, et elles ne seront pas changées ou modifiées lors de l'ouverture ultérieure d'autres fonctions commerciales.

Si tout va bien, vous pouvez accéder directement à la mini plateforme de gestion de programme. Si le saut direct échoue, vous pouvez également vous connecter manuellement depuis la plateforme publique WeChat. Remplissez les informations de base du mini programme, y compris le nom, l'icône, la description, etc. Une fois la soumission réussie, ajoutez le développeur. Le développeur est l'administrateur par défaut. Nous pouvons également ajouter et lier des développeurs à partir d'ici. Il s'agit d'une opération que seuls les administrateurs sont autorisés à effectuer.

Cliquez ensuite sur « Paramètres » dans la barre de navigation de gauche, recherchez les paramètres de développement et obtenez l'AppID du mini programme.

Outils de développement WeChat

Téléchargez les outils de développement Web WeChat et téléchargez le package d'installation correspondant en fonction de votre système d'exploitation et installez-le.

Ouvrez les outils de développement, utilisez WeChat pour scanner le code QR pour vous connecter aux outils de développement et préparez-vous à développer votre premier mini-programme !

Le premier mini programme

Nouveau projet

Ouvrez les outils de développement, sélectionnez « Mini programme projet » et cliquez sur le « + » dans le coin inférieur droit Créez un nouveau projet.

Sélectionnez un dossier vide comme répertoire du projet, remplissez l'AppID tout à l'heure, puis remplissez un nom de projet, par exemple, il s'appelle ici GoZeroWaster. Cliquez sur "OK" pour accéder à l'interface principale de l'outil.

Structure du répertoire du projet

La structure de base des fichiers et la structure du répertoire du projet de l'applet WeChat sont décrites comme suit :

    .
    ├── app.js     # 小程序的逻辑文件
    ├── app.json   # 小程序的配置文件
    ├── app.wxss   # 全局公共样式文件
    ├── pages      # 存放小程序的各个页面
    │   ├── index  # index页面
    │   │   ├── index.js     # 页面逻辑
    │   │   ├── index.wxml   # 页面结构
    │   │   └── index.wxss   # 页面样式表
    │   └── logs   # logs页面
    │       ├── logs.js      # 页面逻辑
    │       ├── logs.json    # 页面配置
    │       ├── logs.wxml    # 页面结构
    │       └── logs.wxss    # 页面样式表
    ├── project.config.json
    └── utils
        └── util.js

Répertoire racine Il y a trois fichiers ci-dessous : app.js, app.json et app.wxss Le mini programme doit avoir ces trois fichiers décrivant l'APP et les placer dans le répertoire racine. Ces trois fichiers sont des fichiers au niveau de l'application, et parallèlement à eux se trouve un dossier pages, qui est utilisé pour stocker chaque page du mini-programme.

On peut faire une analogie avec la technologie de développement web front-end :

• wxml est similaire à un fichier HTML, utilisé pour écrire les balises et le squelette de la page, mais uniquement des composants pouvant être encapsulés par de petits programmes ;
• wxss est similaire aux fichiers CSS, utilisés pour écrire des styles de page, mais les fichiers css sont remplacés par des fichiers wxss ; les fichiers sont similaires à la programmation front-end Le fichier JavaScript est utilisé pour écrire la logique de page du mini programme ; le fichier
• json est utilisé pour configurer le style et le comportement de la page.
• Résultats cibles

Jetons d'abord un coup d'œil aux objectifs finaux et aux résultats. C'est très simple. Il y a deux pages au total :

<p></p> <.>

(Afin de permettre aux programmeurs de protéger l'environnement et d'aimer la vie, j'ai spécialement choisi le thème de la "vie zéro déchet" pour la démo)

Détail des étapes<p></p>Code démo télécharger : https://gitee.com/luhuadong/Web_Learning/tree/master/WeChat/GoZeroWaster<p></p>

Résultats cibles ventilés :

Centre personnel

1. Guide de vie
2. Fenêtre contextuelle de simulation
3. Image d'aperçu
4. En-tête et pied de page

Dans l'aperçu des résultats cibles, nous voyons que les deux pages ont une partie commune - l'en-tête et le pied de page. Ainsi, avant de créer le contenu de la page, nous traitons d’abord l’en-tête et le pied de page. On devine facilement que ces deux parties appartiennent à la configuration globale du mini programme, il faut donc modifier le fichier app.json. <p></p>Le contenu original est le suivant : <p></p>

    {
        "pages":[
            "pages/index/index",
            "pages/logs/logs"
        ],
        "window":{
            "backgroundTextStyle": "light",
            "navigationBarBackgroundColor": "#fff",
            "navigationBarTitleText": "WeChat",
            "navigationBarTextStyle": "balack"
        }
    }

L'attribut pages est utilisé pour définir le chemin de la page. Il s'agit d'un tableau et chaque élément est une chaîne pour spécifier de quelles pages se compose le mini-programme. de. Le premier élément du tableau représente la page initiale de l'applet. L'ajout ou la réduction de pages dans l'applet nécessite de modifier le tableau des pages. <p></p>L'attribut window est utilisé pour définir la barre d'état, la barre de navigation, le titre et la couleur d'arrière-plan de la fenêtre du mini programme. <p></p>On modifie le titre et la couleur de l'en-tête. On fait une barre d'onglets en fin de page pour changer de page. Cet attribut s'appelle tabBar Le code est le suivant : <p></p>

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2f2f8f",
    "navigationBarTitleText": "GoZeroWaste",
    "navigationBarTextStyle":"white"
  },
  "tabBar":{
    "color": "#bfc1ab",
    "selectedColor": "#13b11c",
    "backgroundColor": "#1f1f4f",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "image/icon_component.png",
        "selectedIconPath": "image/icon_component_HL.png",
        "text": "个人中心"
      },
      {
        "pagePath": "pages/details/details",
        "iconPath": "image/icon_API.png",
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "生活指南"
      }
    ]
  }}

. (Les images utilisées sont placées dans le répertoire d'images du projet, vous pouvez également utiliser vos propres images) <p></p> Plusieurs propriétés tabBar utilisées ici sont color, selectedColor, backgroundColor et list est un tableau, principalement utilisé pour. définir le chemin de navigation. <p></p>CTRL + S Après la sauvegarde, le simulateur se rafraîchira automatiquement et vous pourrez voir l'effet immédiatement. <p></p>

个人中心

简单起见，我们就在 pages/index 目录下实现 “个人中心” 页面好了。双击打开 index.wxml，初始内容如下：

    <!--index.wxml-->
    <view>
      <view>
        <button> 获取头像昵称 </button>
        <block>
          <image></image>
          <text>{{userInfo.nickName}}</text>
        </block>
      </view>
      <view>
        <text>{{motto}}</text>
      </view>
    </view>

这里已经有一些代码了，虽然现在可能还看不懂，但我们知道，这就是现在页面的源代码。我们把 “Hello World” 部分注释掉，增加我们希望显示的内容：

<!--index.wxml--><view>
  <view>
    <button> 获取头像昵称 </button>
    <block>
      <image></image>
      <text>{{userInfo.nickName}}</text>
    </block>
  </view>
   <!-- <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>  -->
  <view>
    <view>
      <text>{{company}}</text>
    </view>
    <view>
      <text>{{position}}</text>
    </view>
    <view>
      <text>{{lesson}}</text>
    </view>
  </view></view>

这里分别使用 {{company}}、{{position}} 和 {{lesson}} 作为占位符，用法类似于 Django 的模板语言。当然也可以直接用相应的字符来替换它，只不过我们想沿用 {{motto}} 的做法，让你知道在哪里修改这些数据。没错，就是在 index.js 文件：

Page({
  data: {
    motto: 'Hello World',
    company: "GoZeroWaste",
    lesson: "21天零垃圾生活指南",
    position: "垃圾魔法师",
    /* ... */
  }

wxml 文件中的 <view></view> 组件类似于网页开发中的 <p></p>，而 <text></text> 组件是用来写文本的，需要注意的是 <text></text> 组件内只支持 <text></text> 嵌套。当然，可用用 <image></image> 插入图片，图片要保存到 image 目录，否则在测试的时候是无法上传的。

    <view>
        <!-- 省略 -->
        <view>
          <text>{{lesson}}</text>
        </view>
        <view>
          <image></image>
        </view>
      </view>

mode=‘widthFix’  表示以宽度不变，高度自动变化，保持原图宽高比不变的方式进行缩放以适应屏幕大小。

接下来还需要修改 index.wxss 文件来设置样式：

/**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;}.ID_Badge {
  padding-top: 20rpx;
  color: blue;}.ID_info {
  display: flex;
  flex-direction: column;
  align-items: center;}.pics {
  width: 400rpx;}

保存刷新，“个人中心” 页面就完成了。

生活指南

原来的项目中 pages 目录下只有 index 和 logs 两个目录，因此我们还需要为第二个页面创建一个目录。

创建页面有两种方法：

• 在目录结构的 pages 图表上，新建目录，然后在目录下逐一创建页面构成文件
• 在 app.json 下，直接添加

建议采用第二种方法，修改 app.json 文件：

    {
      "pages":[
        "pages/index/index",
        "pages/logs/logs",
        "pages/details/details"
      ]

保存刷新之后就会发现，目录结构里自动创建了这一页。对应的，也要修改 app.json 中的 tabBar 的链接（实际上我们已经做了）：

    	{
            "pagePath": "pages/details/details",
            "iconPath": "image/icon_API.png",
            "selectedIconPath": "image/icon_API_HL.png",
            "text": "生活指南"
        }

然后修改 details.wxml 设置这一页的标题：

    <!--pages/details/details.wxml-->
    <view>
      <view>
        <text>21天零垃圾生活指南</text>
      </view>
    </view>

修改 details.wxss 设置样式：

    /* pages/details/details.wxss */
    .title {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-top: 40rpx;
      margin-bottom: 40rpx;
      font-size: 40rpx;
    }

这个页面是一个列表展示的页面，我们先在 details.js 文件中准备好数据：

// pages/details/details.jsPage({

  /**
   * 页面的初始数据
   */
  data: {
    showModalStatus: false,
    list: [
      {
        id: 0,
        name : "写一篇《垃圾日记》",
        introduce: "零垃圾并不是一项宏大的工程，而是由日常生活中一个个小小的习惯和选择组成的。最难的，是迈出第一步。",
        src: '../../image/day01.jpg',
        showModalStatus: false,
        catalog: [
          { section: "1. xxx" },
          { section: "2. xxx" },
          { section: "3. xxx" },
          { section: "4. xxx" },
        ]
      },
      {
        id: 1,
        name: "带上自己的购物袋",
        introduce: "在我们家，当时垃圾桶里最多的就是塑料袋，而这些袋子跟着我回家后，都几乎难逃被丢进垃圾桶的命运。",
        src: '../../image/day02.jpg',
        showModalStatus: false,
        catalog: [
          { section: "1. xxx" },
          { section: "2. xxx" },
          { section: "3. xxx" },
          { section: "4. xxx" },
        ]
      },
      /* 省略 */
    ]
  }

接下来我们要使用列表渲染（wx:for）的方法将这些数据绑定一个数组，并在页面上重复渲染。修改 details.wxml 文件：

      <view>
        <view>
          <view>
            <image></image>
            <view>{{item.name}}</view>
            <view>{{item.introduce}}</view>
          </view>
        </view>
      </view>

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。

修改 details.wxss 文件添加样式：

    .lesson {
      height: 190rpx;
      padding-left: 20rpx;
    }
    
    .lessonPic {
      position: absolute;
      height: 150rpx;
      width: 150rpx;
    }
    
    .lessonName {
      position: absolute;
      margin-left: 220rpx;
      font-size: 35rpx;
    }
    
    .lessonIntroduce {
      position: absolute;
      margin-left: 220rpx;
      margin-top: 60rpx;
      margin-right: 20rpx;
      color: rgb(185, 161, 161);
      font-size: 28rpx;
    }

好啦，第二个页面也完成了。

模拟弹窗

接下来我们要在 “生活指南” 页面模拟一个弹窗的效果，正常的时候不显示，只有在点击的时候才出现，摁下面的 “确定” 就会消失。

完了实现这个功能，我们要在组件中绑定一个事件处理函数 bindtap，点击该组件的时候，小程序会在该页面对应的 Page 中找到相应的事件处理函数。

我们先在 details.js 中为每一列数据里引入一个 boolean 变量 showModalStatus 来描述对应的弹窗状态，并且初始值为 false，表示不显示。同时外层也增加一个初始值为 false 的 showModalStatus 变量实现遮罩效果。如下：

       data: {
        showModalStatus: false,
        list: [
          {
            id: 0,
            name : "写一篇《垃圾日记》",
            introduce: "零垃圾并不是一项宏大的工程，而是由日常生活中一个个小小的习惯和选择组成的。最难的，是迈出第一步。",
            src: '../../image/day01.jpg',
            showModalStatus: false,
            catalog: [
              { section: "1. xxx" },
              { section: "2. xxx" },
              { section: "3. xxx" },
              { section: "4. xxx" },
            ]
          }

然后在 details.wxml 中插入弹窗，并用条件渲染（wx:if）来判断是否渲染（显示）弹窗。同时为每一个 item 添加 data-statu 来表示弹窗的状态。如下：

  <view>
    <view>
      <view>
        <image></image>
        <view>{{item.name}}</view>
        <view>{{item.introduce}}</view>
      </view>
        
      <!-- 弹窗 -->
      <view>
        <view>{{item.name}}</view>
        <view>
          <view>
            {{catalog.section}}          </view>
        </view>
        <!-- 确定按钮 -->
        <view>确定</view>
      </view>
    </view>
      
    <!-- 遮罩层 -->
    <view></view>
  </view>

在 details.js 添加 powerDrawer 事件处理，包括显示和关闭事件：

      powerDrawer: function (e) {
        console.log("clicked");
    
        var currentStatu = e.currentTarget.dataset.statu;
        var index = e.currentTarget.id;
    
        // 关闭
        if (currentStatu == 'close') {
          this.data.list[index].showModalStatus = false;
          this.setData({
            showModalStatus: false,
            list: this.data.list,
          });
        }
    
        // 显示
        if (currentStatu == 'open') {
          this.data.list[index].showModalStatus = true;
          this.setData({
            showModalStatus: true,
            list: this.data.list,
          });
        }
      },

最后在 details.wxss  设置一下弹窗和遮罩层的样式：

    .drawer_box {
      width: 650rpx;
      overflow: hidden;
      position: fixed;
      top: 50%;
      z-index: 1001;
      background: #FAFAFA;
      margin: -150px 50rpx 0 50rpx;
    }
    
    .drawer_content {
      border-top: 1.5px solid #E8E8EA;
      height: 210px;
      overflow-y: scroll; /* 超出父盒子高度可滚动 */
    }
    
    .btn_ok {
      padding: 10px;
      font: 20px "microsoft yahei";
      text-align: center;
      border-top: 1.5px solid #E8E8EA;
      color: #3CC51F;
    }
    
    .drawer_screen {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1000;
      background: black;
      opacity: 0.5;
      overflow: hidden;
    }

OK，模拟弹窗也实现了。

预览图片

最后一步就是在第一个页面实现图片预览和图片保存的功能，在 index.wxml 中为图片添加一个点击事件 previewImage。

    <image></image>

在 index.js 中添加 imgalist 项（我们直接把公众号的二维码图片上传到 CSDN 的图片服务器了），并且实现 previewImage 事件处理。如下：

    Page({
      data: {
        motto: 'Hello World',
        company: "GoZeroWaste",
        lesson: "21天零垃圾生活指南",
        position: "垃圾魔法师",
        imgalist: ['https://img-blog.csdnimg.cn/20190109104518898.jpg'],
        userInfo: {},
        hasUserInfo: false,
        canIUse: wx.canIUse('button.open-type.getUserInfo')
      },
      previewImage: function (e) {
        wx.previewImage({
          current: this.data.imgalist,  // 当前显示图片的http链接
          urls: this.data.imgalist      // 需要预览的图片http链接列表
        })
      },

大功告成，点击开发者工具中的 “预览”，使用微信扫描生成的二维码即可在手机端查看。

教程就到这里，希望大家可以对微信小程序有所了解。

本文转自：https://luhuadong.blog.csdn.net/article/details/86181251

推荐教程：《微信小程序》

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!