当前位置: 首页 > news >正文

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

网络数据请求

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.lryc.cn/news/351532.html

相关文章:

  • pip(包管理器) for Python
  • Ubuntu上安装Maven
  • java中使用svnkit实现文件的版本管理
  • 了解 Linux 网络卡绑定:提高网络性能与冗余性
  • 2024年618购物狂欢节即将来袭!精选五款超值入手数码好物!
  • 中国AI独角兽资本大冒险
  • 项目十二:简单的python基础爬虫训练
  • OpenGL学习入门及开发环境搭建
  • three.js能实现啥效果?看过来,这里都是它的菜(08)
  • SpringBoot(九)之整合mybatis
  • 【实战教程】使用Spring AOP和自定义注解监控接口调用
  • 算法学习之:Raft-分布式一致性/共识算法
  • 彩色进度条(C语言版本)
  • C#和C++有什么区别?
  • 微信小程序报错:notifyBLECharacteristicValueChange:fail:nodescriptor的解决办法
  • 富格林:可信攻略阻止遭遇欺诈
  • 搭建淘宝扭蛋机小程序:技术选型与最佳实践
  • 【线性回归】梯度下降
  • GMSL图像采集卡,适用于无人车、自动驾驶、自主机器、数据采集等场景,支持定制
  • docker不删除容器更改其挂载目录
  • K8s Service 背后是怎么工作的?
  • ClickHouse配置与使用
  • 将某一个 DIV 块全屏展示
  • K8S集群再搭建
  • 工具-博客搭建
  • 贪心算法:合并区间
  • DFA 算法
  • Web(数字媒体)期末作业
  • 展现金融科技前沿力量,ATFX于哥伦比亚金融博览会绽放光彩
  • html 根字号 以及 设置根元素font-size:calc(100vw/18.75)、元素rem实现自适应