深入解析微信小程序的配置与请求操作指南

全局配置

全局配置文件即常的配置项

  小程序根目录下的 .json 文件是小程序的全局配置文件。它记录了当前小程序中所有页面的存放路径,并全局设置小程序窗口的外观。此外,还可以设置小程序底部的效果,以及是否启用新版的组件样式。

小程序窗口的组成部分

  小程序窗口主要由导航栏、页面内容区域和底部标签栏组成。导航栏用于显示标题和返回按钮,页面内容区域展示具体内容,底部标签栏则用于快速切换不同页面。

节点常用的配置

  • 设置导航栏的标题:通过 navigationBarTitleText 属性设置。
  • 设置导航栏的背景色:使用 navigationBarBackgroundColor 属性。
  • 设置导航栏的标题颜色:通过 navigationBarTextStyle 属性设置(可选值只有 blackwhite)。
  • 全局开启下拉刷新功能:将 enablePullDownRefresh 的值设为 true
  • 设置下拉刷新时窗口的背景颜色:使用 backgroundColor 属性(颜色只能是16进制)。
  • 设置下拉刷新时的样式:通过 backgroundTextStyle 属性设置(可选值只有 darklight)。
  • 设置上拉触底的距离:使用 onReachBottomDistance 属性设置新数值(默认距离是50,设置时不写单位只写数字,没有特殊需求就不改)。

什么是 TabBar

TabBar 是端应用常见的页面效果

  TabBar 用于实现多页面的快速切换,通常位于底部或顶部。在小程序中,TabBar 只能配置最少2个,最多5个页签。当渲染顶部时,不显示图标,只显示文本。

TabBar 的6个组成部分

  TabBar 主要由图标、文本、选中状态、未选中状态、背景色和边框组成。每个部分都可以通过配置文件进行自定义。

节点配置项

  在 app.json 文件中,可以通过 tabBar 节点配置 TabBar 的各项属性。每个项的配置选项包括图标路径、文本内容、选中状态的颜色等。

每个项的配置选项

  在 tabBar 中的 list 属性里,首页配置一定要放置在第一项。这是非常重要的,因为首页通常是用户进入小程序后首先到的页面。

页面配置

页面配置和全局配置的关系

app.json 中的 window 节点,可以全局配置小程序的每个页面的窗口表现。如果某些小程序的页面想要拥有特殊的窗口表现,可以通过“页面级别的 .json 配置文件”来实现。当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。

页面配置项中常用的配置项

  常用的页面配置项包括 navigationBarTitleTextnavigationBarBackgroundColornavigationBarTextStyleenablePullDownRefresh 等。这些配置项可以根据具体页面的需求进行个性化设置。

网络数据请求

请求限制

  在小程序中,网络数据请求有一些限制:

  • 只能请求 HTTPS 类型的接口。
  • 必须将接口的域名添加到信任列表。

配置合法域名

  假设在自己的微信小程序中,希望请求 https://example.com 域名下的接口,配置步骤如下:

  1. 登录微信小程序管理后台。
  2. 进入设置 -> 服务器域名 -> 修改合法域名。

注意

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

发起请求

  调用微信小程序提供的 wx.request() 方法,可以发起数据请求。这个方法支持 GETPOST 等多种请求方式,并且可以设置请求头、请求参数等。

在页面刚加载时请求数据

  很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据。此时需要在页面的 onLoad 事件中调用获取数据的函数。

跳过合法域名校验

  如果后端仅仅提供了 HTTP 协议的接口,暂时没有提供 HTTPS 协议的接口。此时为了不耽误进度,可以在微信者工具中,临时开启“环境不校验请求域名,TLS 版本及证书”选项,跳过合法域名校验。

注意:跳过合法域名校验的选项,仅限在与调试阶段使用。

关于跨域和 Ajax 的说明

  跨域问题只存在于基于浏览器的 Web 应用中。由于小程序的宿主环境不是浏览器,所以小程序不存在跨域问题。Ajax 技术的核心是依赖于浏览器的 XMLHttpRequest 对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起 Ajax 请求”,而是叫做“发起网络数据请求”。

© 版权声明
THE END
分享