微信小程序:调用API接口
首先去果创云之类的API调用的网站找到你想调用的API以大学查询接口为例复制API的接口,然后要现在第一个?前面加上appkey,然后name可以换成变量,最后的10是显示的条数,也可以改。最后效果是可以查询你想要查询的学校。并且点击可以进入其官网。效果图:one2.js// pages/one2/one2.jsPage({/*** 页面的初始数据*/data: {schoolInfos:[],.
·
首先去果创云之类的API调用的网站找到你想调用的API
以大学查询接口为例
复制API的接口,然后要现在第一个?前面加上appkey,然后name可以换成变量,最后的10是显示的条数,也可以改。
最后效果是可以查询你想要查询的学校。并且点击可以进入其官网。
效果图:
one2.js
// pages/one2/one2.js
Page({
/**
* 页面的初始数据
*/
data: {
schoolInfos:[],
key:"",
len:-1
},
inputValue(event)
{
console.log(event);
//在方法内定义的变量 属于局部变量
let value=event.detail.value;
console.log(value);
//扩大value这个局部变量的作用域
this.setData({key:value});
},
query()
{
let skey =this.data.key;
console.log(skey);
console.log(typeof skey);
if(skey=="")
{
//提示框,提示用户
wx.showToast({
title: '没有输入查所有',
icon:"loading",
duration:5000
})
}
wx.request({
url: 'http://hn216.api.yesapi.cn/?app_key=0099454C3FF0A9912DE7A0346CCC2CC5&s=App.Common_University.Search&return_data=0&school_name='+skey+'&top_num=50',
success:(resp)=>
{
let arrs=resp.data.data.schools;
console.log(arrs);
let arrLength=arrs.length;
console.log(arrLength);
this.setData({len:arrLength,schoolInfos:arrs});
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
/** wx.request({
url: 'http://hn216.api.yesapi.cn/?app_key=0099454C3FF0A9912DE7A0346CCC2CC5&s=App.Common_University.Search&return_data=0&school_name=科技&top_num=50',
success:(resp)=>
{
let arrs=resp.data.data.schools;
console.log(arrs);
this.setData({schoolInfos:arrs});
}
})**/
},
clickschool(event)
{
let url=event.currentTarget.dataset.url;
console.log(url);
wx.navigateTo({
url: '../school/school?url='+url,
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
one2.json
{
"usingComponents": {}
}
one2.wxml
<!--pages/one2/one2.wxml-->
<view class="pageview">
<view class="sview">
<input class="inputview" type="text" bindinput="inputValue" placeholder="输入你所想要查询的学校的关键词" />
<view class="tvview">
<image bindtap="query" src="../images/jr3.jpg" class="cimg"></image>
</view>
</view>
<view class="infoview">
<block wx:if="{{len==0}}">
<view>请重新查询</view>
</block>
<block wx:if="{{len>0}}">
<block wx:for="{{schoolInfos}}">
<view class="schoolview" bindtap="clickschool" data-url="{{item.school_website}}">
<view class="tv1">学校名称:{{item.school_name}}</view>
<view class="tv2">学校等级:{{item.school_level}}</view>
<view class="tv3">学校地址:{{item.school_province}}{{item.school_city}}</view>
</view>
</block>
</block>
</view>
</view>
one2.wxss
/* pages/one2/one2.wxss */
.pageview{
width: 100%;
height: 100vh;
background-color: burlywood;
}
.schoolview{
width: 42%;
height: 18%;
border:1px solid brown;
margin:10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
background-color: silver;
}
.tv1{
font-family: 宋体;
font-size: 10px;
font-weight: bold;
flex: 1;
width: 100%;
border:1px solid snow;
display: flex;
align-items: center;
}
.tv2{
font-family: 宋体;
font-size: 10px;
font-weight: bold;
flex: 1;
width: 100%;
border:1px solid snow;
display: flex;
align-items: center;
}
.tv3{
font-family: 宋体;
font-size: 10px;
font-weight: bold;
flex: 1;
width: 100%;
border:1px solid snow;
display: flex;
align-items: center;
}
.sview{
width: 100%;
height: 8%;
/**border-bottom: 1px solid black;**/
display: flex;
position: fixed;
left: 0px;
top:0px;
z-index: 999;
background-color: white;
}
.infoview{
width: 100%;
height: 92%;
display: flex;
flex-wrap: wrap;
position: relative;
top:8%;
left:0px;
}
.inputview{
width: 90%;
height: 30px;
border:1px solid black;
text-align: center;
margin-left: 4px;
border-radius: 5px;
font-size: 12px;
}
.tvview{
width: 30px;
height: 30px;
/**border:1px solid black;**/
display: flex;
justify-content: center;
align-items: center;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
margin-left: -35px;
}
.cimg{
width: 100%;
height: 100%;
z-index: 999;
}
school.js
// pages/school/school.js
Page({
/**
* 页面的初始数据
*/
data: {
linkurl:""
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
let url=options.url;
this.setData({linkurl:url});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
school.json
{
"usingComponents": {}
}
school.wxml
<!--pages/school/school.wxml-->
<web-view src="{{linkurl}}"></web-view>
school.wxss
/* pages/school/school.wxss */
更多推荐
所有评论(0)