小程序网络数据请求

发起网络请求，需要注意以下几点：

服务器域名配置

每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信，包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、下载文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

从基础库 2.4.0 开始，网络接口允许与局域网 IP 通信，但要注意 不允许与本机 IP 通信

配置流程

服务器域名请在 「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置

域名只支持 https ( wx.request、 wx.uploadFile、 wx.downloadFile) 和 wss ( wx.connectSocket) 协议；
域名不能使用 IP 地址（小程序的 局域网 IP 除外）或 localhost；
可以配置端口，如 https://myserver.com:8080，但是配置后只能向 https://myserver.com:8080 发起请求。如果向 https://myserver.com、 https://myserver.com:9091 等 URL 请求则会失败。
如果不配置端口。如 https://myserver.com，那么请求的 URL 中也不能包含端口，甚至是默认的 443 端口也不可以。如果向 https://myserver.com:443 请求则会失败。
域名必须经过 ICP 备案；
出于安全考虑， api.weixin.qq.com 不能被配置为服务器域名，相关 API 也不能在小程序内调用。 开发者应将 AppSecret 保存到后台服务器中，通过服务器使用 getAccessToken 接口获取 access_token，并调用相关 API；
不支持配置父域名，使用子域名

DNS预解析域名

小程序一般会依赖一些网络请求（如逻辑层的wx.request、渲染层的图片等网络资源），优化请求速度将会提升用户体验，而网络请求耗时中就包括 DNS 解析。DNS预解析域名，是框架提供的一种在小程序启动时，提前解析业务域名的技术

配置流程

DNS域名配置请求「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置，配置时需要注意：
预解析域名无需填写协议头
预解析域名最多可添加 5 个
其他安全策略同服务器域名配置策略

网络请求

超时时间

默认超时时间和最大超时时间都是 60s；
超时时间可以在 app.json 或 game.json 中通过 networktimeout 配置

使用限制

网络请求的 referer header 不可设置。其格式固定为 https://servicewechat.com/{appid}/{version}/page-frame.html，其中 {appid} 为小程序的 appid，{version} 为小程序的版本号，版本号为 0 表示为开发版、体验版以及审核版本，版本号为 devtools 表示为开发者工具，其余为正式版本；
wx.request、 wx.uploadFile、 wx.downloadFile 的最大并发限制是 10 个；
wx.connectSocket 的最大并发限制是 5 个。
小程序进入后台运行后，如果 5s 内网络请求没有结束，会回调错误信息 fail interrupted；在回到前台之前，网络请求接口调用都会无法调用

返回值编码

建议服务器返回值使用 UTF-8 编码。对于非 UTF-8 编码，小程序会尝试进行转换，但是会有转换失败的可能。
小程序会自动对 BOM 头进行过滤（只过滤一个 BOM 头）

跳过域名校验

在服务器域名配置成功后，建议开发者关闭此选项进行开发，并在各平台下进行测试，以确认服务器域名配置正确

get+post请求

wx.request({
      url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search',
      data:{
        query:"TCL"
      },
      success:(res)=>{
        console.log(res);
      }
 })

视图导航

页面导航就是页面之间的跳转，小程序中页面之间的导航有两种方式：

• 声明式导航：通过点击 navigator 组件实现页面跳转的方式

• 编程式导航：通过调用小程序的 API 接口实现跳转的方式

非tabbar导航效果

<navigator url="/pages/logs/logs">
    <button>跳转到日志</button>
</navigator>

tabbar导航效果

<navigator open-type="redirect" url="/pages/logs/logs">
<button type="primary" size="mini">日志</button>
</navigator>
<navigator open-type="switchTab" url="/pages/cart/index"><button type="warn" size="mini">购物车</button></navigator>

路由导航传参

声明式导航传参

navigator组件的url属性用来指定导航到的页面路径，同时路径后面还可以携带参数，参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔

<navigator open-type="redirect" url="/pages/logs/logs?id=1000">
<button type="primary">日志</button>
</navigator>

注意：前面是路径，后面是参数

编程式导航传参

wx.navigateTo(Object object) 方法的 object 参数中，url 属性用来指定需要跳转的应用内非 tabBar 的页面的 路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔

jump(){
    wx.redirectTo({
      url: '/pages/logs/logs?name=鹏章',
    })
  },

接收传递的参数

不论是声明式导航还是编程式导航，最终导航到的页面可以在onLoad 生命周期函数中接收传递过来的参数

onLoad(options){
    console.log(options);//接受传递过来的参数。
}