How to load data from the database in WeChat applet

This article introduces the method of WeChat applet loading real data from the database, mainly configuring the domain name server and writing the backend API, as well as writing the request code in the WeChat applet. I hope it will be helpful to friends who are learning applet development. !

How the WeChat applet loads data from the database

There is a rigid requirement for the WeChat applet to load the real data in the website database The requirement is that your website domain name must be https protocol, otherwise you will not be able to pass the first step of server domain name configuration. You can apply by yourself for the specific application steps. I will not go into too much introduction here. Next, I will use the latest 6 pieces of data loaded in my blog material as an example to analyze. The following are the detailed steps.

1. Enter the background of the mini program to configure the https server domain name

2. Write the calling data in the program. And return json format

//Get the material list interface, this method is located in Application\Home\Controller\WeixinController.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. Call data

Because my download template is in index, all logic codes must be written in index.js. The following is the specific code

/**
   * 生命周期函数--监听页面加载
   */
  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. Render data in the list template

Enter index.wxml to load data. The specific code is as follows

<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>

The final effect is as follows: This is my blog material I have put the latest 6 pieces of data and the source code of this applet on github. Friends who need it can download it and take a look.

For more WeChatmini program development tutorials, please pay attention to the PHP Chinese website! !

The above is the detailed content of How to load data from the database in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!