Comment charger les données de la base de données dans l'applet WeChat

Cet article présente la méthode par laquelle l'applet WeChat charge des données réelles à partir de la base de données, principalement en configurant le serveur de noms de domaine et en écrivant l'API backend, ainsi qu'en écrivant le code pour envoyer des requêtes dans l'applet WeChat. J'espère que cela sera utile. aux amis qui apprennent le développement d'applets !

Comment l'applet WeChat charge-t-elle les données de la base de données ?

Pour charger les données réelles dans la base de données du site Web, le WeChat L'applet a du mal. L'exigence est que le nom de domaine de votre site Web soit conforme au protocole https, sinon vous ne pourrez pas passer la première étape de configuration du nom de domaine du serveur. Vous pouvez en faire la demande vous-même. Je n'entrerai pas dans les détails. introduction ici. Ensuite, j'utiliserai les 6 dernières données chargées dans le matériel de mon blog comme exemple d'analyse. Voici les étapes détaillées.

1. Entrez l'arrière-plan du mini programme pour configurer le nom de domaine du serveur https

2. appeler des données dans le programme. Et renvoyer le format json

//Obtenir l'interface de la liste de matériaux, cette méthode se trouve dans ApplicationHomeControllerWeixinController.class.php

  public function getdownList(){
    $data=M('Material')->field('id,title,path,date,down,description,view')->order('date desc')->limit(6)->select();
    echo json_encode($data);
  }

3. Données d'appel

Parce que mon modèle de téléchargement est dans l'index, tous les codes logiques doivent être écrits dans index.js. Voici le code spécifique

/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    console.log('onLoad')
    var that = this
    wx.request({
      url: 'https://www.100txy.com/weixin/getdownlist', //真实的接口地址
      data: {},
      header: {
        'content-type': 'application/json'
      },
      success: function (res) {
 
        console.log(res.data)
        that.setData({  
          Industry: res.data //设置数据
        })  
      },
      fail: function (err) {
        console.log(err)
      }
    })
  },

<. 🎜>

4. Dans les données de rendu du modèle de liste

Entrez index.wxml pour charger les données, le code spécifique est le suivant

<view class="newsInfo">
   <block wx:for="{{Industry}}" >
    <view class="newsList" wx:for-index="idx"  bindtap="showDetail" id="{{item.id}}">
      <view class="pic">
        <image style="width:110px;height:80px;" src="https://www.100txy.com/{{item.path}}"></image>
      </view>
      <view class="news_title">
        <text class="title_subject">{{item.title}}\n</text>
        <text class="title">{{item.description}}</text><text class="dianping">浏览 {{item.view}}  下载 {{item.down}}</text>
      </view>
      </view>
    <view class="hr"></view>
   </block>
</view>

L'effet final est le suivant suit : Ce sont les 6 dernières données de mon blog, j'ai mis le code source de ce petit programme sur github. Les amis qui en ont besoin peuvent le télécharger et y jeter un œil.

Pour plus de tutoriels WeChat

développement de mini-programmes , veuillez faire attention au site Web PHP chinois ! !

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!