微信小程序:调用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 */

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/37666.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信小程序开发调用接口

今天我们自己调用自己商城中的接口 以下是简单的示例 这是自己的目录结构&#xff0c;我选择的是index1来开发 首先在 index.js中想写逻辑代码 其中page里面的data里面是前台展示时的一些数据&#xff0c;而onload里面是调用的接口&#xff0c;调用的方式为get调用&#xff…

微信小程序调用api接口实例

页面效果&#xff1a; 1、首先在微信开发者工具中开启http域名 2、然后回到开发者工具中&#xff0c;找到详情》项目配置&#xff0c;进行刷新或者重新编译 3、在index.wxml页面中写一个button: <view><button bindTap"test">测试</button> <…

GPT-4 发布:在考试中击败 90% 的人类;谷歌开放大语言模型 PaLM API;FireFox 111 发布|极客头条

「极客头条」—— 技术人员的新闻圈&#xff01; CSDN 的读者朋友们早上好哇&#xff0c;「极客头条」来啦&#xff0c;快来看今天都有哪些值得我们技术人关注的重要新闻吧。 整理 | 梦依丹 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 一分钟速览新闻点&…

.net应用程序和TW3的ADS之间通讯

Beckhoff ADS (Automation DeviceSpecification)提供一个应用程序之间互相通信的接口&#xff0c;在TW3系统中&#xff0c;TwinCAT PLC&#xff0c;TwinCAT NC等被设计成虚拟的自动化设备&#xff0c;类似于实际的物理设备与设备之间通过基于TCP协议的路由来交换信息&#xff0…

基于CTP的期货集中管理系统之登录篇

上一篇是说要做这个管理系统&#xff0c;还没开始做&#xff0c;就头皮发麻了。想想要实现那么多功能&#xff0c;已经想放弃了。但是呢&#xff0c;我们是日拱一卒的时间主义者&#xff0c;小小的抵触情绪是无法打到我们的。 前端使用VUE,后端使用C来做分布式交易管理总控系统…

仿QQ即时通信系统

这学期学了网络编程&#xff0c;课设是让做一个通信系统&#xff0c;就模仿腾讯的产品设计一个仿QQ的通信系统。PS&#xff1a;用的时候&#xff0c;背景可以改一下&#xff0c;XX公司需要一个内部通信系统… 话不多说&#xff0c;先上图片&#xff0c;再慢慢讲原理吧。 效果示…

基于nchan打造百万用户的聊天室

大家好&#xff0c;我是烤鸭&#xff1a; 这次介绍下nchan&#xff0c;nginx的一个module。 nchan 源码: https://github.com/slact/nchan 官网: https://nchan.io/ nginx 配置说明文档: https://nchan.io/documents/nginxconf2016-slides.pdf 测试环境搭建 4 台linux cent…

基于MT5的沪深股票回测二 导入历史数据

回测的基础是是历史数据 以导入日线数据为例 1.打开交易品种 2. 找到目标合约 3.选择要处理的数据周期&#xff0c;日线选择daily 然后导入处理后的日K线数据 注意历史数据需要符合MT5的数据格式 此次有一个不是bug的显示&#xff0c;最多显示2000条记录&#xff0c;实际更多…

探索 Google Bard 的 10 大令人兴奋的新功能

这家科技巨头开发的人工智能聊天机器人 Google Bard 最初发布时,收到的评价平平。然而,随着最近在 Google I/O 2023 开发者大会上发布其改进版本,Google Bard 的情况发生了重大变化。全新改进的 Google Bard AI 具有许多令人兴奋的功能。让我们仔细看看谷歌吟游诗人的特点:…

万众瞩目,谷歌的反击来了!全新PaLM 2反超GPT-4,办公全家桶炸裂升级,Bard史诗进化...

Datawhale干货 最新&#xff1a;谷歌 PaLM 2&#xff0c;来源&#xff1a;量子位 万众瞩目&#xff0c;谷歌的反击来了。 现在&#xff0c;谷歌搜索终于要加入AI对话功能了&#xff0c;排队通道已经开放。 当然这还只是第一步。 大的还在后面&#xff1a; 全新大语言模型PaLM …

LaTeX插入图片

基本语法 常用选项[htbp]是浮动格式&#xff08;参考《LaTeX2e插图指南》16.2节和《Ishort》3.9节&#xff09;&#xff1a; 『h』当前位置。将图形放置在正文文本中给出该图形环境的地方。如果本页所剩的页面不够&#xff0c;这一参数将不起作用。『t』顶部。将图形放置在页…

chatgpt赋能python:Python抓取电脑应用软件数据

Python抓取电脑应用软件数据 随着互联网技术的不断发展&#xff0c;我们的生活方式也在发生着巨大变化&#xff0c;如今&#xff0c;我们已经可以依靠计算机应用软件对生活的各个方面进行掌控。而如何获取这些软件的数据&#xff0c;以及对这些数据进行分析&#xff0c;也成为…

chatgpt赋能python:Python程序如何变成电脑程序

Python程序如何变成电脑程序 简介 Python是一种高级编程语言&#xff0c;它在数据科学、人工智能、Web开发、机器学习、AI等领域非常流行。在Python中编写的程序需要转化为计算机程序才能执行。在这篇文章中&#xff0c;我们将解释Python编写的程序如何变成电脑程序。 什么是…

chatgpt赋能python:Python可以入侵别人电脑吗?

Python可以入侵别人电脑吗&#xff1f; Python自从诞生以来便一直以来备受关注&#xff0c;其简单易学、高效实用的特点让无数人喜爱并成为了开发人员的首选编程语言。但是&#xff0c;你可能会想知道&#xff1a;Python能够入侵别人电脑吗&#xff1f;今天我们就来探讨一下这…

chatgpt赋能python:如何使用Python绕过电脑开机密码?

如何使用Python绕过电脑开机密码&#xff1f; 随着科技的发展&#xff0c;计算机已经成为我们生活和工作中必不可少的工具。当然&#xff0c;在使用计算机时保护自己的隐私也是非常重要的。电脑开机密码是最基本的保护措施之一&#xff0c;但是如果忘记了密码该怎么办呢&#…

chatgpt赋能python:Python模拟操作电脑

Python模拟操作电脑 介绍 Python是一个强大的编程语言&#xff0c;自从引入以来&#xff0c;被广泛地使用在各种领域。其中一个重要的应用场景是模拟操作电脑。这里所说的模拟操作电脑&#xff0c;是指用Python编写程序来模拟用户在计算机上的日常操作&#xff0c;例如键盘输…

chatgpt赋能python:如何用Python阻止电脑关机

如何用Python阻止电脑关机 在使用电脑的过程中&#xff0c;我们经常会遇到电脑因为各种原因自动关机的情况&#xff0c;这给我们的工作和生活带来了很多麻烦。但是&#xff0c;有了Python编程技能&#xff0c;我们可以很容易地使用Python代码来阻止电脑关机。 在本文中&#…

chatgpt赋能python:Python如何打开电脑摄像头

Python如何打开电脑摄像头 Python是一种易于学习和使用的编程语言&#xff0c;因其灵活性和强大的功能而备受欢迎。其中&#xff0c;许多人使用Python来处理图像处理和计算机视觉&#xff0c;这样&#xff0c;了解如何打开电脑摄像头是非常重要的。 在这篇文章中&#xff0c;…

基金投资咨询

针对投资者风险偏好程度高、中、低3种假设情况相应做出了投资建议&#xff1a; 假设情况1&#xff1a;投资者风险偏好程度较高 2021年12月21日&#xff0c;客户小王来到银行&#xff0c;寻求银行的理财经理推荐一款适合自己的基金&#xff0c;来完成自己100万元的投资&#x…

chatgpt赋能python:Python简化手机短信发送

Python 简化手机短信发送 作为一名有10年 Python 编程经验的工程师&#xff0c; 我们经常需要向手机发送提醒短信&#xff0c;例如验证码、通知等。通常情况下&#xff0c;我们需要使用平台 API 或自己的短信网关&#xff0c;这些方式既麻烦又不安全。在本文中&#xff0c;我将…