微信小程序:调用API接口

article/2025/8/22 0:10:48

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


http://chatgpt.dhexx.cn/article/DtFnrofr.shtml

相关文章

api接口如何有效对接

一、背景 在平时工作中&#xff0c;经常会遇到的一种场景是&#xff1a;A公司要对接B公司的API方法&#xff0c;这时&#xff0c;A公司就要阅读B公司的接口文档&#xff0c;从接口文档中找到自己需要对接的API&#xff0c;并根据接口文档的要求&#xff0c;完成编码工作&#…

API接口怎么使用(教你使用api接口获取数据)

API是应用程序的开发接口&#xff0c;在开发程序的时候&#xff0c;我们有些功能可能不需要从到到位去研发&#xff0c;我们可以拿现有的开发出来的功能模块来使用&#xff0c;而这个功能模块&#xff0c;就叫做库(libary)。比如说&#xff1a;要实现数据传输的安全&#xff0c…

request调用API接口

通过requests请求api接口&#xff0c;返回的数据为一串字典&#xff0c;可使用字典的方式进行操作 import requests url https://api.github.com/search/repositories?qlanguage:python&sortstars r requests.get(url) print(status code:,r.status_code,verifyFalse) p…

调用api接口

我们平常是怎么调用接口的呢&#xff1f;在Vue中我们平常通过axios这个库来调用就接口&#xff0c;但是在uniapp进行开发&#xff0c;那么就要借用uniapp的库来进行开发&#xff0c;接下来我们一起来探究下。 一.uni.request(OBJECT) 作用:发送网络请求 OBJECT参数说明&#…

api 接口简单调用

互联网的资源是很丰富了&#xff0c;我又发现了个网站&#xff0c;提供api ,供我们联系用 https://www.showapi.com/ 我注册好之后 注册完之后&#xff0c;提供了 appid和 key <!DOCTYPE html> <html lang"en"><head><meta charset"UT…

调用第三方API(接口)

1&#xff1a;选用一个提供API的第三方&#xff08;这里推荐极速数据&#xff09; 2&#xff1a;使用 using Newtonsoft.Json; 如果没有需要先安装 3&#xff1a;定义API方法具体代码如下&#xff1a; public static string API(string url) { HttpWebRequest re W…

如何调用API接口获取数据

下面以调用丁香园的API接口获取新冠疫情数据为例。 丁香园提供的API接口及说明如下&#xff1a; 调用该API接口获取数据的代码如下&#xff1a; import requests import json import pandas as pd #以requests.get方式调用API接口&#xff0c;获取JSON格式的数据 datarequest…

如何调用api接口获取其中的数据

part1.API接口可以运用到的场景&#xff0c;主要包括以下几个方面&#xff1a; 1. 应用程序集成&#xff1a;API可以使不同的应用程序相互之间进行集成&#xff0c;比如将某个应用程序的数据传递给另一个应用程序&#xff0c;或者调用另一个应用程序的功能。 2. 数据共享&#…

API接口是什么?API接口怎么调用?

part1.API接口是什么&#xff1f; API&#xff08;Application Programming Interface&#xff0c;应用程序编程接口&#xff09;是软件系统之间互相访问和交换信息的一种方式。它定义了在一个应用程序中调用另一个应用程序的方式&#xff08;或服务&#xff09;。API接口可以…

API接口调用演示

本文以深圳市政府数据开放平台为素材对象&#xff0c;演示如何调用其开放的API接口&#xff0c;主要目的在于以直观的视角&#xff0c;熟悉API接口的格式及调用方式。 在首页数据菜单中有数据目录、数据集、数据接口和数据地图4个菜单。 选择数据集&#xff0c;选择教育局&…

API接口的调用方式

API接口的调用方式分为以下几种&#xff1a; 1.RESTful API 这是一种基于HTTP协议的API调用方式&#xff0c;通常使用HTTP协议的POST、GET、DELETE、PUT等方法进行调用。使用RESTful API的优点是简单易懂、易于扩展和利于缓存。常见的RESTful API有Twitter API、Facebook API…

api接口的获取调用方式是什么?

API接口的获取调用方式&#xff0c;通常分为以下几个步骤&#xff1a; 1.注册账号并申请API Key&#xff1a;在API服务提供商的官方网站上注册账号&#xff0c;并申请API Key&#xff08;包括通行证ID和密钥&#xff09;&#xff0c;以便后面的API调用验证。 2.查看API接口文档…

MySQL分库分表相关面试知识点

基础概念 分表 能够解决单表数据量过大带来的查询效率下降的问题 分库 面对高并发的读写访问&#xff0c;当数据库master服务器无法承载写操作压力时&#xff0c;不管如何扩展slave服务器&#xff0c;此时都没有意义。此时&#xff0c;则需要通过数据分库策略&#xff0c;提…

MySQL分库分表及中间件Mycat

文章目录 一、前言1.1 垂直切分1.2 垂直切分的优缺点&#xff1a;1.3 水平切分1.3.1 水平分表1.3.2 水平分库 1.4 水平切分优缺点 二、Mycat 中间件实现读写分离2.1 mycat2.2 mycat安装2.3 利用mycat实现mysql的读写分离 三、Mysql高可用 一、前言 刚开始我们的系统只用了单机…

Mysql - 分库分表

介绍 问题分析 随着互联网及移动互联网的发展&#xff0c;应用系统的数据量也是成指数式增长&#xff0c;若采用单数据库进行数据存储&#xff0c;存在以下性能瓶颈&#xff1a; IO瓶颈&#xff1a;热点数据太多&#xff0c;数据库缓存不足&#xff0c;产生大量磁盘IO&#x…

MySQL分库分表原理

前言 ❤Java学习路线个人总结-博客 ❤欢迎点赞&#x1f44d;收藏⭐留言 &#x1f4dd;分享给需要的小伙伴 文章目录 前言1、为什么要分库分表02、分库分表03、不停机分库分表数据迁移4、分库分表实现5、读写分离实现 1、为什么要分库分表 分库分表目的&#xff1a;解决高并发&a…

mysql分库分表(二)

微信搜索&#xff1a;“二十同学” 公众号&#xff0c;欢迎关注一条不一样的成长之路 一种可以避免数据迁移的分库分表scale-out扩容模式 一种可以避免数据迁移的分库分表scale-out扩容方式 目前绝大多数应用采取的两种分库分表规则 mod方式dayofweek系列日期方式&#xff…

Mysql分库分表方案

相关文章&#xff1a; 1、 使用Spring AOP实现MySQL数据库读写分离案例分析 2、MySQL5.6 数据库主从&#xff08;Master/Slave&#xff09;同步安装与配置详解 3、MySQL主从复制的常见拓扑、原理分析以及如何提高主从复制的效率总结 4、使用mysqlreplicate命令快速搭建 Mysql 主…

mysql-分库分表

1、为什么要分库分表 1、为什么要分库分表 出现数据库瓶颈&#xff0c;比如IO瓶颈&#xff0c;CPU瓶颈 1、IO瓶颈 &#xff08;1&#xff09;磁盘读IO瓶颈- 数据体积比较大&#xff1a;大量的写操作&#xff0c;磁盘IO读写必然慢&#xff0c;效率低大量的读操作&#xff0c;…

mysql分库分表(一)

微信搜索&#xff1a;“二十同学” 公众号&#xff0c;欢迎关注一条不一样的成长之路 数据库分库分表策略的具体实现方案 相关文章&#xff1a; 1、 使用Spring AOP实现MySQL数据库读写分离案例分析 2、MySQL5.6 数据库主从&#xff08;Master/Slave&#xff09;同步安装与…