微信小程序前端如何从后端服务器获取数据

今天写这篇文章主要是想记录一下，小程序学习的过程，怕久了就忘记了。一直就很不理解为何后端的数据能传到前端，毕竟我也是新手一个。

小程序前端如何到后端服务器上获取数据，主要是通过wx.request这个去接口获取数据。

首先要在服务器上上传一个test.php用json的格式存储一下数据，一会前端将会获取这些数据，第一个例子比较简单，就获取单个字段的数据

例1：

test.php代码：

<?php $arr =array ("title" );echo json_encode($arr); ?>

我们可以访问下接口：

部分前端.js的文件中代码：onLoad: function(e) { var lds = this wx.request({ url: 'https://cs.1314ym.cn/test.php',

// 仅为示例，需填写自己服务器的地址 data: { cs:"" }, header: { 'content-type': 'application/json'

// 默认值       

   }, success(res) { console.log(res.data);

//打印到控制台

lds.setData({ cs: res.data //发送到wxml

}) } }) },

前端wxml文件中代码：

<view class="container" wx:if="{{cs!=''}}"><view class="form" ><view class="form-item"><view class="field">姓名</view><input bindinput="infoInput" data-key="realname" placeholder="请输入姓名" placeholderStyle="color:#9C9C9C;" value="{{info.realname}}"></input></view><view class="form-item"><view class="field">手机号</view><input bindinput="infoInput" data-key="mobile" placeholder="请输入手机号" placeholderStyle="color:#9C9C9C;" value="{{info.mobile}}"></input></view><view class="form-item"><view class="field">微信号</view><input bindinput="infoInput" data-key="wxid" placeholder="请输入微信号" placeholderStyle="color:#9C9C9C;" value="{{info.wxid}}"></input></view></view><view bind:tap="doSave" class="sabebtn {{fillCompleted?'save':'no-save'}}">保存信息</view></view>

当我们把后端的 "title" 删除后：

此时接口就没有数据了

接着看前端效果，数据就被隐藏起来了

例2：数组获取

服务器后端tset.php文件代码：

<?php $arr = array ( [ array( 'title'=>'', 'title2'=>'开启' ) ], ); echo json_encode($arr); ?>

显示如下：

部分前端js文件中代码：onLoad: function(e) { var lds = this wx.request({ url: 'https://cs.1314ym.cn/test.php', // 仅为示例，需填写自己服务器的地址

data: { cs:[] //数组必须加上[]

}, header: { 'content-type': 'application/json' // 默认值     

     },  success(res) {

console.log(res.data); //打印到控制台 lds.setData({ cs: res.data //发送到wxml

}) } }) },

wxml中的文件代码：

<view class="test" wx:for="{{cs[0]}}"><view class="container" wx:if="{{item.title!=''}}"><view class="form" ><view class="form-item"><view class="field">姓名</view><input bindinput="infoInput" data-key="realname" placeholder="请输入姓名" placeholderStyle="color:#9C9C9C;" value="{{info.realname}}"></input></view><view class="form-item"><view class="field">手机号</view><input bindinput="infoInput" data-key="mobile" placeholder="请输入手机号" placeholderStyle="color:#9C9C9C;" value="{{info.mobile}}"></input></view><view class="form-item"><view class="field">微信号</view><input bindinput="infoInput" data-key="wxid" placeholder="请输入微信号" placeholderStyle="color:#9C9C9C;" value="{{info.wxid}}"></input></view></view><view bind:tap="doSave" class="sabebtn {{fillCompleted?'save':'no-save'}}">保存信息</view></view></view>

前端显示如下：

当我把title改成title2时，此时title2对应的数据是：开启

结果如下：

写的有错误的地方还请见谅，多多指教，因为我也是个新手。