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

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

小程序前端如何到后端服务器上获取数据,主要是通过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对应的数据是:开启

结果如下:

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