【星海随笔】微信小程序(三)

网络数据请求

1.小程序中网络数据请求的限制

出于安全性方面的考虑,小程序官方对 数据接口的请求 做出了如下
两个限制:
① 只能请求 HTTPS 类型的接口
② 必须将 接口的域名 添加到 信任列表 中
微信小程序只能请求 https 类型的接口
且需要请求的域名必须提前进行设置后,才可以通过微信小程序访问该请求

https://www.escook.cn/
配置方式: 登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名.

配置 request 合法域名

注意事项

  • 域名只支持 https 协议
  • 域名不能使用 IP 地址 或 localhost
  • 域名必须经过 ICP 备案
  • 服务器域名一个月最多可申请 5 次修改
发起 GET 请求

JSONPlaceholder 是一个提供免费的在线 REST API 的网站，我们在开发时可以使用它提供的 url 地址测试下网络请求以及请求参数。或者当我们程序需要获取一些假数据、假图片时也可以使用它。
网站地址：http://jsonplaceholder.typicode.com/

嘿嘿 重要的事情说三遍
注：如果不在wx官网网站上设置自己要用到的网站地址，在微信开发者工具里是没办法使用的。
所以需要在第三方区域有一个后端接口服务，这里暂时使用的是一个免费的API 接口网址进行测试，注:每月只能修改5次网址接口地址
注：如果不在wx官网网站上设置自己要用到的网站地址，在微信开发者工具里是没办法使用的。
所以需要在第三方区域有一个后端接口服务，这里暂时使用的是一个免费的API 接口网址进行测试，注:每月只能修改5次网址接口地址
注：如果不在wx官网网站上设置自己要用到的网站地址，在微信开发者工具里是没办法使用的。
所以需要在第三方区域有一个后端接口服务，这里暂时使用的是一个免费的API 接口网址进行测试，注:每月只能修改5次网址接口地址

微信小程序中有个顶级对象是 wx
调用微信小程序提供的 wx.request() 方法, 可以发起 GET 数据请求,示例代码如下:

<!--pages/home/home.wxml--><text></text>
<view>作者: 王鑫</view>
支持商业活动相关合作
<view>电话: 15135151098</view>
<button bindtap="getInfor">发起GET</button>

要和data处于同一级
data 为发送到服务器的数据

xxx {xxx
},
getInfor: function() {wx.request({url: 'https://example/api/get',  method: 'GET',data: {name: 'zs',age: 20},success: (res) => {console.log('请求成功'),console.log(res.data)},fail(err) {console.log('请求错误'),console.error('Error',err);},complete(res) {console.log("请求完成")}})},xxx {xxx},

method: 'POST'
请求方式
在页面刚加载时请求数据

在很多情况下，需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数，示例代码如下：
当页面一加载，一开始，这个函数就会执行

/**
* 生命周期函数 -- 监听页面数据
*/onLoad: function (options) {this.getSwiperList()this.getGridList()this.getInfor()},// 获取轮播图的数据getSwiperList() { ...},// 获取九宫格的数据getGridList() { ...}
}}

如果后端没有https接口，仅提供http请求，也可以进行测验
详情-> 本地设置->点击（不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS 证书 ）

注意：
跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

网络数据请求

关于 跨域 和 Ajax 的说明
跨域问题，只存在于 基于浏览器的 Web开发中。由于 小程序的宿主环境 不是浏览器，而是微信客户端
所以小程序不存在跨域的问题。

Ajax技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信小程序，所以小程序中 不能叫做 “发起Ajax请求” , 而是叫做 “发起网络数据请求”。

案例实现：

首页效果以及实现
① 新建项目并梳理项目结构
② 配置导航栏效果
③ 配置tabBar效果
④ 实现轮播图效果
⑤ 实现九宫格效果
⑥ 实现图片布局

导航栏

app.json -> window

页面配置中常用的配置项

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000当前页面导航栏背景颜色,如 #000000
navigationBarTextStyleStringwhite当前页面导航栏标题颜色,仅支持 black/white
navigationBarTitleTextStringWeixin当前页面导航栏标题文字内容
backgroundColorHexColor#ffffff当前页面窗口的背景色
backgroundTextStyleStringdark当前页面下拉 loading 的样式,仅支持 dark/light
enablePullDownRefreshBooleanfalse是否 为当前页面开启下拉刷新的效果
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为 px
配置tabBar

和window窗口平级

"tabBar": {"list": [{"pagePath": "pages/home/home","text": "home"// "iconPath": "iconpath",  // 未选中时候的图标。 例如 /image/tabs/home.png// "selectedIconPath": "selectIconpath"   //选中时候的图标},{"pagePath": "pages/contact/contact","text": "text"// "iconPath": "iconpath",// "selectedIconPath": "selectIconpath"}]},
轮播图

https://img-blog.csdnimg.cn
想到一个好主意,免费撸CSDN的羊毛。

<swiper class="swiper-container" indicator-dots indicator-active-color="gray" indicator-active-color="black" autoplay interval="5000" circular><!-- 第1项 --><swiper-item><view class="item">石头</view></swiper-item><!-- 第2项 --><swiper-item><view class="item">剪刀</view></swiper-item><!-- 第3项 --><swiper-item><view class="item">布</view></swiper-item><swiper-item><image src="/images/1.png"  mode="aspectFill"></image></swiper-item>
</swiper>
获取轮播图数据的方法

JS

data: {swiperList: []
},
onLoad: function (option){this.getSwiperList()
},
getSwiperList(){wx.request() {url: 'https://img-blog.csdnimg.cn/xxx',method: 'GET',success: (res) => {console.log(res)this.setData({swiperList: res.data })}}
}

wxml

<swiper indicator-dots circular><swiper-item wx:for="{{swiperList}}" wx:key="id"><image src="{{item.image}}"></image></swiper-item>
</swiper>

wxss

swiper {height: 350rpx;
}swiper image {width: 100%;height: 100%;
}
实现九宫格

https://www.escook.cn/categories

Also Need An List

data: {// 存放九宫格的列表gridList: []
},
onLoad: function (option){this.getSwiperList()this.getGridList()
},
// 定义一个新的函数
// 获取九宫格数据的方法
getGridList() {wx.request({url: 'https://www.escook.cn/categories',method: 'GET',success: (res) => {console.log(res)   //打印了一个对象,里面就是一个九宫格的列表this.setData({gridList: res.data})}})
},

wxml

<view class="grid-list"><view class="grid-item" wx:for="{{gridList}}" wx:key="id"><image src="{{item.icon}}"></image><text>{{item.name}}</text>
</view>

wxss

.grid-list {display: flex;flex-wrap: wrap;border-left: 1rpx solid #efefef;border-top: 1rpx solid #efefef;
}.grid-item {width: 33.33%;height: 200rpx;display:flex;flex-direction: column;align-items: center;justify-content: center;border-right: 1rpx solid #efefef;border-bottom: 1rpx solid #efefef;box-sizing: border-box;
}
.grid-item image {width: 60rpx;height: 60rpx;
}
.grid-item text {font-size: 24rpxmargin-top: 10rpx;
}
实现图片布局
<view class="img=box"><image src="/images/link-01.png" mod="widthFix"></image><image src="/images/link-02.png" mod="widthFix"></image>
</view>

.img-box{display: flex;padding: 20rpx 10rpx;justify-content: space-around;
}.img-box image {width: 45%;
}

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

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

相关文章

DLRover：蚂蚁集团开源的AI训练革命

DLRover：蚂蚁集团开源的AI训练革命

在当前的深度学习领域&#xff0c;大规模训练作业面临着一系列挑战。首先&#xff0c;硬件故障或软件错误导致的停机时间会严重影响训练效率和进度。其次&#xff0c;传统的检查点机制在大规模训练中效率低下&#xff0c;耗时长且容易降低训练的有效时间。资源管理的复杂性也给…
阅读更多...
Codigger编码场景介绍（二）：驾驶舱场景（Cockpit）

Codigger编码场景介绍（二）：驾驶舱场景（Cockpit）

Codigger&#xff0c;一个专为开发人员设计的工具&#xff0c;致力于为不同的开发场景提供最佳的切换体验。Codigger囊括了多种场景&#xff0c;如传统场景、调试场景、设计器场景、驾驶舱场景以及纯净场景等。在上一篇文章中&#xff0c;我们介绍了传统场景模式&#xff0c;今…
阅读更多...
数据结构_栈在括号匹配中的应用_代码

数据结构_栈在括号匹配中的应用_代码

学习笔记 #include<stdio.h> #include<stdlib.h> #include<string.h>#define MaxSize 10 typedef struct{char data[MaxSize];int top; }SqStack;//初始化栈 void InitStack(SqStack &S){S.top 0; } //判断栈是否为空 bool StackEmpty(SqStack S){if (…
阅读更多...
深度学习之基于YoloV5钢材微小缺陷检测系统

深度学习之基于YoloV5钢材微小缺陷检测系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与目标 在钢材生产过程中&#xff0c;由于各种因素&#xff0c;钢材表面可能会出现微小缺陷&#xff…
阅读更多...
DevOps实践：通过云效实现hexo自动构建部署发布

DevOps实践：通过云效实现hexo自动构建部署发布

DevOps&#xff08;Development和Operations的组合词&#xff09;是一组过程、方法与系统的统称&#xff0c;用于促进开发&#xff08;应用程序/软件工程&#xff09;、技术运营和质量保障&#xff08;QA&#xff09;部门之间的沟通、协作与整合。这是一种重视“软件开发人员&a…
阅读更多...
如何科学制定个性化健康方案？

如何科学制定个性化健康方案？

随着现代生活节奏的加快&#xff0c;慢性病已经成为困扰许多人的健康难题。在这个信息爆炸的时代&#xff0c;如何科学、有效地管理个人健康&#xff0c;成为了我们每个人必须面对的问题。今天&#xff0c;我们就来探讨一下如何通过一体化解决方案&#xff0c;科学制定个性化健…
阅读更多...
接口自动化测试工具-----pytest

接口自动化测试工具-----pytest

首先确保安装了Python环境&#xff0c;首先&#xff0c;你需要确保已安装 Python 和 Pip。如果还没有安装&#xff0c;可以从 Python 官方网站下载并安装最新版本的 Python。安装过程中请确保选中“Add Python to PATH”选项。 安装pytest:打开命令提示符&#xff08;Command …
阅读更多...
初见flyway

初见flyway

flyway (一种数据库版本控制工具 document) 两种文件 V 和 R V: V 开头是不可重复执行的文件&#xff0c;每次修改完都该更改名称 R: R 开头是可重复执行的文件&#xff0c;需要保证内部sql都是可以重复执行的 名称格式&#xff1a; V__table_name.sql, R__table_name.sql …
阅读更多...
水面漂浮物生活垃圾识别检测系统

水面漂浮物生活垃圾识别检测系统

水面漂浮物生活垃圾识别检测系统通过现场监控摄像机对河道湖面等水体进行实时监测&#xff0c;水面漂浮物生活垃圾识别检测系统借助智能视频分析技术和YOLO深度学习技术&#xff0c;系统能够自动识别和抓拍水面上的垃圾漂浮物。一旦系统检测到有垃圾漂浮在水面上&#xff0c;立…
阅读更多...
深度学习之基于暗通道算法+卷积神经网络图像去雾可视化系统

深度学习之基于暗通道算法+卷积神经网络图像去雾可视化系统

欢迎大家点赞、收藏、关注、评论啦 &#xff0c;由于篇幅有限&#xff0c;只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景与意义 在图像处理领域&#xff0c;图像去雾技术一直是一个重要的研究方向。由于雾霾等天气条件的影响…
阅读更多...
软件测试/测试开发丨学习笔记之Allure2测试报告

软件测试/测试开发丨学习笔记之Allure2测试报告

Allure2测试报告 1、使用 Allure2 运行方式-Python 1&#xff09;–alluredir 参数生成测试报告。 在测试执行期间收集结果 pytest [测试用例/模块/包] --alluredir./result/ (—alluredir这个选项 用于指定存储测试结果的路径)#生成在线的测试报告 allure serve ./result2…
阅读更多...
解决Ubuntu无法使用root登录的问题

解决Ubuntu无法使用root登录的问题

1、登录普通用户 2、使用vi编辑器打开/etc/pam.d/gdm-autologin并注释掉auth required pam_succeed_if.so user ! root quiet_success 3、使用vi编辑器打开/etc/pam.d/gdm-password并注释掉auth required pam_succeed_if.so user ! root quiet_success 4、注销用户重新用roo…
阅读更多...
Windows部署Jar包到系统服务（Service）

Windows部署Jar包到系统服务（Service）

使用WinSW工具 1、工具下载地址&#xff1a;https://github.com/winsw/winsw/releases 选择最新版本下载 根据机器32位或者64位分别下载exe&#xff0c;再下载sample-minimal.xml文件 2、修改文件名 将两个文件名称修改为服务名&#xff0c;如&#xff1a; test.exe 和 test…
阅读更多...
【誉天618·年中钜惠】无忧卡计算VIP会员上线

【誉天618·年中钜惠】无忧卡计算VIP会员上线

在数字化浪潮汹涌的当下&#xff0c;技术更新迭代的速度令人目不暇接。为了满足广大技术爱好者与专业人士对于最新技术的渴望与追求。2022年我们推出了誉天系列会员卡&#xff0c;受到了学员和企业的一致好评&#xff0c;现在我们又结合当下的热门ICT技术进行了会员卡升级。 誉…
阅读更多...
Manjaro Linux上安装和配置输入法Fcitx5(稳定2014-5-17亲测)

Manjaro Linux上安装和配置输入法Fcitx5(稳定2014-5-17亲测)

在Manjaro Linux上安装和配置输入法&#xff0c;通常会选择Fcitx5或Ibus作为输入法框架。以下是详细步骤&#xff0c;包括安装和配置输入法框架以及安装中文输入法。 安装过程中冲突 卸载老版本 fcitx-4.*即可&#xff0c; 应为全面拥抱Fcitx5 参考文献&#xff1a; Fcitx5 do…
阅读更多...
WinInet 编程：MFC 中的互联网编程

WinInet 编程：MFC 中的互联网编程

目录 概述 MFC WinInet 所包含的类 使用 WinInet 编程的一般步骤 创建 CInternetSession 类对象 头文件包含 对象创建 初始化 WinInet 查询设置 Internet 请求对象 设置代理服务器 设置超时时间 创建 CInternetConnection 类对象 对象创建 连接到服务器 创建 CInt…
阅读更多...
文件中海量数据的排序

文件中海量数据的排序

文件中海量数据的排序 题目&#xff1a; 跟之前堆排序可以解决TopK问题一样&#xff0c;我们来看看归并排序会用来解决什么问题&#xff1f; 思路&#xff1a; 我们说归并排序是外排序。其实就是将数据分成一个个小段&#xff0c;在内存中进行排序&#xff0c;再拿出内存&am…
阅读更多...
【Linux】深入理解 Linux 的 find 指令

【Linux】深入理解 Linux 的 find 指令

我一直都在流浪 可我不曾见过海洋 我以为的遗忘 原来躺在你手上 我努力微笑坚强 寂寞筑成一道围墙 也敌不过夜里 最温柔的月光 &#x1f3b5; 林宥嘉《残酷月光》 find 是 Linux 系统中功能非常强大的文件搜索工具。它可以递归地在指定目录中查找文件和目…
阅读更多...
【Linux001】centos常用命令总结总结（已更新）

【Linux001】centos常用命令总结总结（已更新）

1.熟悉、梳理、总结下centos知识体系。 2.Linux相关知识&#xff0c;在日常开发中必不可少&#xff0c;如一些必知必会的常用命令&#xff0c;如环境搭建、应用部署等。同时&#xff0c;也要谨慎使用一些命令&#xff0c;如rm -rf&#xff0c;防止一些生产事故的发生。 3.欢迎点…
阅读更多...
Mysql8.0离线安装 centos

Mysql8.0离线安装 centos

Mysql8.0离线安装 centos 上传mysql安装包并解压 tar xvf mysql-8.0.37-1.el7.x86_64.rpm-bundle.tar运行安装对应的rpm包&#xff0c;按照一下顺序 rpm -ivh mysql-community-common-8.0.37-1.el7.x86_64.rpm rpm -ivh mysql-community-client-plugins-8.0.37-1.el7.x86_64.rp…
阅读更多...
最新文章

Copyright @ 2022~2023