### wx.request(OBJECT)
OBJECT参数说明：
success返回参数说明：
data 数据说明：
最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String 。转换规则如下：
对于 header['content-type'] 为 application/json 的数据，会对数据进行 JSON 序列化
对于 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换成 query string （encodeURIComponent(k)=encodeURIComponent(v)&encodeURIComponent(k)=encodeURIComponent(v)...）
示例代码：
//获取应用实例
var app = getApp()
Page({
data: {
indicatorDots:true,
autoplay:true,
interval:5000,
duration:1000,
banner: []
},
onLoad: function () {
var that = this
//调用应用实例的方法获取全局数据
reda(this,'banner');
}
})
function reda(_self,type){
wx.request({
url: 'http://127.0.0.1/demo/demo.php?type='+type, //仅为示例，并非真实的接口地址
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data);
_self.setData({
"banner":res.data.results,
});
}
})
}
返回值：
## 接口规则：
使用PHP来传送数据，转换为json数据：
<?php
if(!isset($_GET['id']) || empty($_GET['id'])) {
echo jsonFormat(array('error_code'=>300,'info'=>'请求失败'));
}
if($_GET['id']=='1') {
$detail = array(
'id'=>'1',
'title'=>"详情1",
'img'=>"http://*******.jpg",
'content'=>"框架的视图层"
);
}
$detail = array('error_code'=>200,'results'=>$detail);
echo json_encode($detail);
?>
基础库 1.4.0 开始支持，低版本需做兼容处理
返回一个 requestTask 对象，通过 requestTask，可中断请求任务。
requestTask 对象的方法列表：
示例代码：
const requestTask = wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
requestTask.abort() // 取消请求任务
Bug & Tip
tip: content-type 默认为 'application/json';
tip: url 中不能有端口；
bug: 开发者工具 0.10.102800 版本，header 的 content-type 设置异常；
使用setData需注意
商品分类功能 示例：
有数据：
无数据：
logs.js
Page({
data: {
navLeftItems: [],
navRightItems: [],
curNav: 1,
curIndex: 0
},
onLoad: function () {
// 加载的使用进行网络访问，把需要的数据设置到data数据对象
var that = this
wx.request({
url: 'http://huanqiuxiaozhen.com/wemall/goodstype/typebrandList',
method: 'GET',
data: {},
header: {
'content-type': 'application/json'
},
success: function (res) {
console.log(res)
that.setData({
navLeftItems: res.data,
navRightItems: res.data
})
}
})
},
//事件处理函数
switchRightTab: function (e) {
console.log(e);
// 获取item项的id，和数组的下标值
let id = e.target.dataset.id,
index = parseInt(e.target.dataset.index);
// 把点击到的某一项，设为当前index
this.setData({
curNav: id,
curIndex: index
})
}
})
## 模版调用：
logs.wxml
<!--主盒子-->
<view class="container">
<!--左侧栏-->
<view class="nav_left">
<block wx:for="{{navLeftItems}}">
<!--当前项的id等于item项的id，那个就是当前状态-->
<!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
<view class="nav_left_items {{curNav == item.id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.id}}">{{item.tree.desc}}</view>
</block>
</view>
<!--右侧栏-->
<view class="nav_right">
<!--如果有数据，才遍历项-->
<view wx:if="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
<block wx:for="{{navRightItems[curIndex].tree.nodes[1].tree.nodes}}">
<view class="nav_right_items">
<navigator url="../list/index?brand={{item.tree.id}}&typeid={{navRightItems[curIndex].id}}">
<!--用view包裹图片组合，如果有图片就用，无图片提供就使用50x30的这个默认图片-->
<view>
<block wx:if="{{item.tree.logo}}">
<image src="{{item.tree.logo}}"></image>
</block>
<block wx:else>
<image src="http://temp.im/50x30"></image>
</block>
</view>
<!--如果有文字，就用文字；无文字就用其他-->
<view wx:if="{{item.tree.desc}}">
<text>{{item.tree.desc}}</text>
</view>
<view wx:else>
<text>{{item.tree.desc2}}</text>
</view>
</navigator>
</view>
</block>
</view>
<!--如果无数据，则显示数据-->
<view style='text-align:center' wx:else>暂无数据。。。</view>
</view>
</view>
logs.wxss
page{
background: #f5f5f5;
}
/*总体主盒子*/
.container {
position: relative;
width: 100%;
height: 100%;
background-color: #fff;
color: #939393;
}
/*左侧栏主盒子*/
.nav_left{
/*设置行内块级元素（没使用定位）*/
display: inline-block;
width: 25%;
height: 100%;
/*主盒子设置背景色为灰色*/
background: #f5f5f5;
text-align: center;
}
/*左侧栏list的item*/
.nav_left .nav_left_items{
/*每个高30px*/
height: 30px;
/*垂直居中*/
line-height: 30px;
/*再设上下padding增加高度，总高42px*/
padding: 6px 0;
/*只设下边线*/
border-bottom: 1px solid #dedede;
/*文字14px*/
font-size: 14px;
}
/*左侧栏list的item被选中时*/
.nav_left .nav_left_items.active{
/*背景色变成白色*/
background: #fff;
}
/*右侧栏主盒子*/
.nav_right{
/*右侧盒子使用了绝对定位*/
position: absolute;
top: 0;
right: 0;
flex: 1;
/*宽度75%，高度占满，并使用百分比布局*/
width: 75%;
height: 100%;
padding: 10px;
box-sizing: border-box;
background: #fff;
}
/*右侧栏list的item*/
.nav_right .nav_right_items{
/*浮动向左*/
float: left;
/*每个item设置宽度是33.33%*/
width: 33.33%;
height: 80px;
text-align: center;
}
.nav_right .nav_right_items image{
/*被图片设置宽高*/
width: 50px;
height: 30px;
}
.nav_right .nav_right_items text{
/*给text设成块级元素*/
display: block;
margin-top: 5px;
font-size: 10px;
/*设置文字溢出部分为...*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
- 商城api接口
- 首页数据获取
- 分类接口
- 购物车接口
- 商品信息接口
- 搜索接口
- 订单列表接口
- 店铺接口
- 收藏接口
- 收货地址接口
- 生成订单接口
- 支付接口
- 会员中心接口
- 登录注册接口
- 关于我们
- 图片上传
- 分销中心
- 分销明细
- 代金券
- 平台红包列表
- 分销申请列表
- 我的推广
- 微信小程序
- 简介
- 开发前准备
- 目录结构介绍
- 发起请求
- 网络请求提交表单
- 代码及开发所遇到问题总结
- 导航跳转时所遇到的问题
- 缓存数据与数据取得的问题
- 如何引入外部css
- 如何定义与使用全局变量
- 如何定义新的界面
- 微信小程序支付
- 小程序的手机验证码登录
- 上传，下载
- 提示框
- app.json配置
- 配置demo
- pages
- window
- tabBar
- networkTimeout
- debug
- page.json
- 缓存
- 特效
- 滑动方式
- 城市切换
- 五星好评
- Switch
- 上拉加载
- wxml 标签
- 视图容器
- 基础内容
- 表单组件
- 导航
- 媒体组件
- 自定义提示框
- 小程序内访问网页
- 倒计时显示
- 微信小程序，如何在返回前一个页面时，执行前一个页面的方法
- 在本地可以请求到数据，但手机上是请求不到的
- curl请求失败
- 代码同步
- 短信平台更换