前言:前期我们对微信小程序有些基本了解,像标签,样式,组件....等.
今天我们继前期进行继续的了解

一. 网络请求

HTTP(HyperText Transfer Protocol)是一套计算机通过网络进行通信的规则。
计算机专家设计出HTTP，使HTTP客户（如Web浏览器）能够从HTTP服务器(Web服务器)请求信息和服务HTTP
目前协议的版本是1.1.HTTP是一种无状态的协议，无状态是指Web浏览器和Web服务器之间不需要建立持久的连接，这意味着当一个客户端向服务器端发出请求，
然后Web服务器返回响应(response)，连接就被关闭了，在服务器端不保留连接的有关信息.HTTP遵循请求(Request)/应答(Response)模型。
Web浏览器向Web服务器发送请求，Web服务器处理请求并返回适当的应答。所有HTTP连接都被构造成一套请求和应答。

在微信小程序进行网络通信，只能和指定的域名进行通信

普通HTTPS请求(wx.request)
上传文件(wx.uploadFile)
下载文件(wx.downloadFile)
WebSocket通信(wx.connectSocket)

这里以介绍 wx.request, wx.uploadFile wx.dowloadFile三种网络请求为主
普通http:

wx.request({url: '接口地址',data: { //请求的参数x: '',y: ''},header: { //设置请求的 header'content-type': 'application/json' // 默认值},success (res) { //接口调用成功的回调函数console.log(res.data)},fail (err){//接口调用失败的回调函数reject(err)}
})

注意:若你的接口不能使用,报以下错误:

则需要配置:
1.进入小程序页面点击开发管理
2.点击开发设置
3.下滑找到服务器配置,点击开始配置
4.扫码
5.填写域名
例如:https://api-hmugo-web.itheima.net

wx.uploadFile:
上传文件的api为wx.uploadFile，该api会发起一个http post请求，其中的Content-type为multipart/form-data。服务器端需要按照该Content-type类型接收文件,示例代码：

wx.uploadFile({url:  'http://example.com/upload' ,filePath: file,name:  'file' ,formData:data,success:function(res){console. log (res.data)},fail:function(err){console. log (err)}})

下载文件:
下载文件的api为wx.downloadFile,该api会发起一个http get请求，并在下载成功之后返回文件的临时路径，示例代码：

wx.downloadFile({url:url,type:typ,success:function(res){if (success){success(res.tempFilePath)}},fail:function(err){console. log (err)}})
}

二. 生命周期:

分为应用生命周期和页面生命周期

(一).应用生命周期(App.js)

组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。
组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。此时还不能调用 setData 。通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。

定义生命周期方法:

//app.js
App({onLaunch: function () {//应用第一次启动的就会触发的事件       },onShow : function () {// 应用被用户看到 } ,onHidden : function () {// 应用被隐藏 (暂停或清除定时器)}
})

基础属性:

属性	类型	说明
onLaunch	function	应用第一次启动的就会触发的事件
onShow		应用被用户看到 (可在里面对应用数据或页面效果重置)
onHidden		应用被隐藏 (暂停或清除定时器)
onError		应用的代码发生了报错的时候就会触发 (在应用发生代码报错的时候，收集用户的错误信息，通过异步请求将错误的信息发送后台去)
onPageNotFound		页面找不到就会触发,应用第次启动的时候，如果找不到第一个入口页面才会触发(不能跳转tabbar页面)

(二). 页面生命周期:

还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期

定义生命周期方法:

//index.js
Page({data: {text: "This is page data."},onLoad: function(options) {// 页面创建时执行},onShow: function() {// 页面出现在前台时执行},onReady: function() {// 页面首次渲染完毕时执行},onHide: function() {// 页面从前台变为后台时执行},onUnload: function() {// 页面销毁时执行},onPullDownRefresh: function() {// 触发下拉刷新时执行},onReachBottom: function() {// 页面触底时执行},onShareAppMessage: function () {// 页面被用户分享时执行},onPageScroll: function() {// 页面滚动时执行},onResize: function() {// 页面尺寸变化时执行},onTabItemTap(item) {// tab 点击时执行console.log(item.index)console.log(item.pagePath)console.log(item.text)},
})

基础属性:

属性	类型	说明
data	Object	页面初始数据
onLoad	function	监听页面加载 (发送异步请求来初始化页面数据)
onShow		监听页面显示
onReady		监听页面初次渲染完成
onHide		监听页面隐藏
onUnload		监听页面卸载(指关闭当前页面例如:redirect)
onPullDownRefresh		监听用户下拉动作
onReachBottom		页面上拉触底事件的处理函数
onShareAppMessage		用户点击右上角转发
onPageScroll		页面滚动触发事件的处理函数
onResize		页面尺寸改变时触发(如小程序横屏竖屏切换)需要添加配置
onTabltemTap		当前是tab页时，点击tab时触发

注意:

//onResize  单个页面切换json文件中, 若全局放到App全局配置中
{"pageorientation"": “auto"
}

示意图:

总结:

本文章主要讲解小程序里如何使用http接口请求数据以及小程序的生命周期.至此小程序表层内容就学的基本可以了,深层用法还有待探究,若想深层了解.欢迎访问官网微信小程序

微信小程序网络请求接口及生命周期相关推荐

微信小程序学习6：页面生命周期回调函数
微信小程序学习6:页面生命周期回调函数文章目录微信小程序学习6:页面生命周期回调函数 1 生命周期图像 2 生命周期回调函数触发条件 onLoad(Object query) onShow() o ...
5、微信小程序-网络请求和本地存储
文章目录前言一.准备二.网络请求 1.微信小程序请求网络的方法 2.发送网络请求 3.网络请求的封装 4.网络返回请求数据的处理三.本地存储前言这节我们来看下在微信小程序中如何进行网络请求 ...
微信小程序网络请求异常怎么办_解决·微信小程序开发-网络请求报Invalid request 400错误...
今天学习了一下微信小程序的入门开发,在使用网络请求时,发现根据微信官方的API的方法进行操作出现Invalid request 400错误,到底怎么回事呢? 首先我们来看微信API网络请求示例代码: ...
微信小程序网络请求异常怎么办_监控微信小程序wx.request请求失败
在微信小程序里,与后台服务器交互的主要接口函数是wx.request(),用于发起 HTTPS 网络请求.其重要性不言而喻.然而,却经常遇到请求失败的问题,笔者特意谷歌"wx.request ...
微信小程序网络请求配置问题及本地网络请求测试解决方案
本文只针对服务器网站没有备案或只需要做本地网络接口请求一.问题引入在小程序demo.wxml中声明button控件,并设置点击事件,如下: <button bindtap='testSend ...
微信小程序网络请求 - 设置合法域名
微信小程序设置网络请求官方文档为什么要设置合法域名呢 ? 每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信.包括普通 HTTPS 请求(wx.request).上传文件(w ...
微信小程序网络请求之设置合法域名
设置域名登录微信公众号后台小程序中设置→开发设置→服务器设置必须设置域名,微信小程序才能进行网络通讯,不然会报错如果设置好了合法域名,开发工具还提示不在合法域名列表中,因为在微信会有一段时间的 ...
微信小程序网络请求之设置合法域名后不显示oss、cos的图片问题
一.开启oss防盗链设置把此https://servicewechat.com链接加入到防盗链中就可以访问由于网站图片都上传在了腾讯云COS,微信小程序端不显示网站图片原因: 腾讯云COS启用 ...
微信小程序网络请求异常怎么办_微信小程序打开提示“网络异常，请检查网络状态”的解决方法...
症状:打开微信小程序的时候,提示"网络异常,请检查网络状态",无法加载数据. 问题客户端:安卓手机经过测试:IOS和微信桌面版,均正常. 唯独安卓手机不行,如下图所示,这个问题不 ...

微信小程序网络请求接口及生命周期

一. 网络请求

二. 生命周期:

(一).应用生命周期(App.js)

定义生命周期方法:

(二). 页面生命周期:

定义生命周期方法:

总结:

微信小程序网络请求接口及生命周期相关推荐

最新文章

热门文章

微信小程序 网络请求接口 及 生命周期

一. 网络请求

二. 生命周期:

(一).应用生命周期(App.js)

定义生命周期方法:

(二). 页面生命周期:

定义生命周期方法:

总结:

微信小程序 网络请求接口 及 生命周期相关推荐

最新文章

热门文章

微信小程序网络请求接口及生命周期

微信小程序网络请求接口及生命周期相关推荐