Cas d'entrée frontal à base zéro du mini-programme WeChat

1. Conditions préalables

Si vous souhaitez l'utiliser pendant une longue période, il est recommandé de créer un compte personnel sur le site officiel, ce qui est un processus compliqué. Mais le cas d'introduction est relativement simple : vous n'avez pas besoin de créer un compte personnel auprès du mini-programme officiel WeChat. Il vous suffit d'installer les outils de développement officiels de WeChat pour créer et exécuter le mini-programme sur votre ordinateur local.
Lien de téléchargement : https://pan.baidu.com/s/1A2ngDV-LguBBNyhvGjF8kQ?pwd=4qi5

2. Affichage des résultats

3. Créez un projet d'applet WeChat

3.1 Le processus de téléchargement est insensé et l'étape suivante consiste à ouvrir les outils de développement et à cliquer sur le signe + pour créer un nouveau projet.

3.2 Cliquez sur OK selon la configuration suivante,

Si l'image enfreint les règles, lisez simplement la description textuelle. Le nom et le répertoire du projet sont personnalisés. L'AppID se trouve dans le compte personnel officiel demandé. Le mien est wx87c1988b028cb1c1. Le mode de développement est un petit programme, aucun service cloud n'est utilisé et le modèle de base JavaScript est utilisé.

4. Écrivez du code

4.1 Double-cliquez pour ouvrir app.json. Le code est le suivant :

app.json est un fichier de configuration global, où pages représente le chemin de la page, window représente la configuration de la page entière et tabBar est la barre tactile, qui peut être en haut ou en bas. Notez que les fichiers d'index et de logs dans le répertoire pages à gauche de la zone d'édition peuvent être supprimés. Après avoir copié le code et ctrl+s pour l'enregistrer, le code sera automatiquement compilé et trois dossiers apparaîtront sur le côté gauche. , à savoir domicile, message et à propos.

{
  "pages":[
    "pages/home/home",
    "pages/message/message",
    "pages/about/about"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#2b4b6b",
    "navigationBarTitleText": "生活服务",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/images/tabs/home.png",
      "selectedIconPath": "/images/tabs/home-active.png"
    },{
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "/images/tabs/message.png",
      "selectedIconPath": "/images/tabs/message-active.png"
    },{
      "pagePath": "pages/about/about",
      "text": "关于",
      "iconPath": "/images/tabs/contact.png",
      "selectedIconPath": "/images/tabs/contact-active.png"
    }]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

4.2 Sous l'accueil des pages, double-cliquez pour ouvrir home.js. Le code est le suivant :

Sous le dossier pages, il y a quatre xx.js, xx.json, xx.wxml, xx.wxss dans chaque dossier. Les fichiers avec le suffixe js enregistrent les données et les méthodes, qui sont des codes logiques, json Le fichier avec le suffixe enregistre la configuration de cette page (non utilisé pour l'instant au démarrage), le fichier avec le suffixe wxml enregistre le HTML similaire à celui du navigateur, et wxss est équivalent au style CSS du navigateur.

// pages/home/home.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    SwiperList:[],
    GridList:[]
  },
  getSwiperList(){
    wx.request({
      url: 'https://www.escook.cn/slides',
      method: 'GET',
      success: (res) =>{
        console.log(res.data);
        this.setData({
          SwiperList: res.data
        })
      }
    })
  },
  getGridList(){
    wx.request({
      url: 'https://www.escook.cn/categories',
      method: 'GET',
      success:(res)=>{
        console.log(res.data);
        this.setData({
          GridList: res.data
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getSwiperList();
    this.getGridList();
  },
})

4.3 Double-cliquez pour ouvrir home.wxml, le code est le suivant :

swiper est l'étiquette du carrousel, view est équivalent à div, image est équivalent à img, src dans l'image est équivalent à href, wx:for est équivalent à v-for dans vue, wx:key est équivalent à v-key,

<!--pages/home/home.wxml-->
<swiper class="swiperlist" indicator-dots="true" circular="true" autoplay="true" interval="1000">
  <swiper-item wx:for="{
   
   {SwiperList}}" wx:key="id">
    <image src="{
   
   {item.image}}" mode="heightFix"></image>
  </swiper-item>
</swiper>
<view class="gridList">
  <view class="gridItem" wx:for="{
   
   {GridList}}" wx:key="id">
    <image src="{
   
   {item.icon}}"></image>
    <text>{
   
   {item.name}}</text>
  </view>
</view>
<view class="images">
  <image src="/images/link-01.png" mode="widthFix"></image>
  <image src="/images/link-02.png" mode="widthFix"></image>
</view>

4.4 Double-cliquez pour ouvrir home.wxss. Le code est le suivant :

Equivalent au même effet que le style CSS

/* pages/home/home.wxss */
.gridList{
  display: flex;
  flex-wrap: wrap;
  border-left: 1px solid gray;
  border-top: 1px solid gray;
}
.gridItem{
  width: 33.33%;
  height: 200rpx;
  display: flex;
  flex-direction: column;
  border-right: 1px solid gray;
  border-bottom: 1px solid gray;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}
.gridItem image{
  width: 60rpx;
  height: 60rpx;
}
.gridItem text{
  font-size: 24rpx;
  text-align: center;
  margin-top: 10rpx;
}
.images{
  display: flex;
  padding: 20rpx 10rpx;
  justify-content: space-around;
}
.images image{
  width: 45%;
}

5. Exécuter l'affichage

Après avoir copié le code, j'ai constaté que certaines images de page ne pouvaient pas être chargées. N'oubliez pas de vérifier les options suivantes, Détails->Paramètres locaux->Aucune vérification..., et toutes les images seront chargées une fois les paramètres terminés.

6. Code source et sources

Cliquez ici pour obtenir le code source , référez-vous à la vidéo pédagogique d'une station Horse B