1、APICloud组件 openwin 打开新窗口组件，本案例中用于二级分类打开商品列表页
官方文档地址
https://docs.apicloud.com/Client-API/api#33
（1）示例代码
api.openWin({
name: 'page1',
url: './page1.html',
pageParam: {
name: 'test'
}
});
2、二级分类及跳转到对应分类商品列表
（1）html代码
<html class="">
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
<link rel="stylesheet" href="../../css/dangdang-app.css?2016051117">
<style>
.main_box .class_list_nav_box ul li {
font-size: 13px;
border-left: 3px solid #fafafa;
border-right: 1px solid #e6e6e6;
height: auto !important;
line-height: 20px;
text-align: center;
color: #4d525d;
padding: 15px 0px;
border-bottom: 1px solid #e6e6e6;
}
</style>
</head>
<body>
<section class="main">
<div class="main_box">
<div id="app">
<nav class="class_list_nav">
<div class="class_list_nav_box" id="class_list_nav_box" dd_name="一级分类" style="overflow: hidden;">
<ul style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) scale(1) translateZ(0px);">
<template v-for="(vo,index) in list">
<li @click="init_children_list(index)" v-bind:class="{ on: index==cun_index }">
{{ vo.cate_name }}
</li>
</template>
</ul>
</div>
</nav>
<div class="class_box">
<div class="class_box_inner" id="class_box_inner" dd_name="二级分类" style="overflow: hidden;">
<div class="class_box_over" style="transition-property: transform; transform-origin: 0px 0px 0px; transform: translate(0px, 0px) translateZ(0px);">
<div id="cate_lev2_div_0" style="transform-origin: 0px 0px 0px; opacity: 1; transform: scale(1, 1);">
<ul class="clearfix ">
<li v-for="(vo,index) in children_list" @click="open_cate_goodslist(index)" v-if="children_list.length>0">
<div>
<a href="javascript:void(0)">
<img class="cate_icon_img" :src="vo.url">
<span>{{ vo.cate_name }}</span>
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
（2）js部分
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common.js" ></script>
<script type="text/javascript" src="../../script/vue.js" ></script>
<script type="text/javascript">
var vm = new Vue({
el: '#app',
data: {
cun_index:0, //主分类选中下标
list: [], //主分类
children_list:[], //子分类
},
methods: {
init: function () {
vm.list = [];
api.ajax({
url: cate_list_url, //引用common.js里面定义url的实际地址
method: 'post',
timeout: 30,
dataType: 'json',
returnAll: false,
}, function (ret, err) {
if (ret) {
vm.list = ret.data;
console.log(JSON.stringify(vm.list));
vm.init_children_list(vm.cun_index); //打开分类页面，默认子分类=cun_index（其实就是0）
} else {
console.log(JSON.stringify(err));
}
});
},
//二级分类页面方法//
init_children_list:function (index) {
console.log(index);
vm.cun_index = index; //当前选中的主分类标记
var cate_id = vm.list[index].id; //当前选中的主分类id并定义成变量cate_id
vm.children_list = []; //声明一个空数组，用于存放数据
api.ajax({
url: children_cate_list_url, //引用common.js里面定义url的实际地址
method: 'post',
timeout: 30,
dataType: 'json',
returnAll: false,
data: {
values: {
cate_id: cate_id //把主分类的id传给api接口交给后台进行处理
}
}
}, function (ret, err) {
if (ret) {
vm.children_list = ret.data; //把接口获取的数据赋给vm.children_list
} else {
api.alert(JSON.stringify(err));
}
});
},
//打开对应分类商品列表
open_cate_goodslist:function (index) {
var cate_id = vm.children_list[index].id;
console.log(cate_id);
api.openWin({
name: 'goods_list',
url: 'widget://html/index/goods_list.html',
pageParam: {
cate_id: cate_id
}
});
}
}
});
apiready = function () {
vm.init();
};
</script>
（3）效果
image.png
打开商品详情页
image.png
3、关于ajax页面访问api接口向后端传值理解
（1）api接口数据，postman模拟传值
image.png
（2）前段ajax请求，传值到api接口
image.png
（3）后端接口方法，接收传值
image.png
网友评论