微信小程序：调用API接口

首先去果创云之类的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 */

微信小程序：调用API接口相关推荐

微信小程序调用支付接口支付（tp5、小程序）
微信小程序调用支付接口支付今天记录一下学习的小程序调用微信支付接口一.先理清一下调起微信支付的整个流程. 1.就是先调用微信的支付统一下单api获取到prepay_id 2.然后后端再将这个pre ...
微信小程序调用PHP接口,微信小程序调用PHP后台接口教程
微信小程序调用PHP后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/Home/Xia ...
java微信小程序调用支付接口
简介:微信小程序支付这里的坑还是有的,所以提醒各位在编写的一定要注意!!! 1.首先呢,你需要准备openid,appid,还有申请微信支付后要设置一个32位的密钥,需要先生成一个sign,得到pre ...
微信小程序之 ----API接口
1. wx.request 接口可在文件 wxs中操作,连接服务器处理数据参数 ① url ② data ③ header ④ method ⑤ dataType 回调 success, fail ...
微信小程序—调用imgSecCheck接口实现多张图片鉴黄，敏感过滤
之前写过单张图片调用微信小程序-智能鉴黄.敏感识别的文章,突然有客户要求批量上传图片时实现这个功能,以为很简单,结果发现还是有很大差别的. 效果如下: 体验路径: 客户端代码: // miniprog ...
微信小程序—调用API获取天气情况
1.在微信开发者工具中的.js文档参考wx.getLocation函数获取当前地理位置,注意在app.json文件中permission授权. "permission": {&qu ...
微信小程序商标查询API接口源码
最近很多人要微信商标查询小程序. 小程序前端开发是很简单的事情,2天搞定,不能多了. 但后端的东西比较麻烦,单靠个人开发到上线至少需要半年以上时间. 关商标的数据包格式错乱就整了1个月,这个错乱不是统 ...
微信小程序调用地图接口，实现定位
1. demo01.wxml  <view><button type="default" bindtap="get_l ...
微信小程序调用支付接口返回订单号
一.获取支付参数准备调用支付api wx.request({ url: 'http://localhost:8010/pay/createOrder', //上线的话必须是https,没有appId的 ...
微信小程序服务器api接口的路径,微信小程序-封装请求基准路径、接口API 和使用...
1.在文件夹utils下新建 request.js文件 2.封装请求代码 // 基准路径 //路径仅为举例 const baseurl ='https://127.0.0.1' //get请求 fun ...

微信小程序：调用API接口

微信小程序：调用API接口相关推荐

最新文章

热门文章