微信请求tp5框架数据 及渲染数据至页面

tp模型数据：

namespace app\xcx\model;

use think\Model;

class XcxModel extends Model
{
    //链接数据库表名
    protected $table = 'users';
//    数据库查找数据
    public static function listData()
    {
    return self::select();
    }

}

tp 控制层：

    public function index()
    {
        //模型：：模型方法名
       $data= XcxModel::listData();
//       返回json格式
       return  json(['code'=>200,'data'=>$data,'message'=>'success']);
    }

小程序页面

wxjs页面

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {
// 函数名称：相当于ajax
wx.request({
  // 请求的网址，method：默认get
       url: 'http://www.day.com/xcx/xcx/index',
      //  返回的结果
      success:(result) => {
        // 将结果逻辑层数据渲染至视图层，这里是渲染至data{  xcx:[] }
      this.setData({
        // 键（key）:值（value）
       xcx:result.data.data
})
  },
})
    },

data层：

Page({

    /**
     * 页面的初始数据
     */
    data: {

           xcx:[]

    },

wxml：

<!-- for循环wxjs data 的数据  -->
<block wx:for="{{xcx}}" wx:key="index">
<!-- 值展示 -->
<view>
{{item.id}}
</view>
<view>
{{item.username}}
</view>
<view>
{{item.password}}
</view>
</block>

效果图：