学习微信小程序day03-配置信息与网络请求

企业开发 2023-12-17 10:54:03 阅读次数: 0

配置信息与网络请求

一、全局配置

1. 全局配置文件以及常用的配置项

1.1 全局配置文件

小程序根目录下的app.json文件是小程序的全局配置文件。常用的配置项如下:

  1. pages
    记录当前小程序所有页面的存放路径
  2. window
    全局设置小程序窗口的外观
  3. tabBar
    设置小程序底部的 tabBar 效果
  4. style
    是否启用新版的组件样式
{
    
    
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",//删掉该配置项就是默认使用旧版本的组件样式（目前不推荐删掉）
  "sitemapLocation": "sitemap.json"
}

1.2 小程序窗口组成部分

在这里插入图片描述


2. 全局配置 - window

window:主要用于全局配置小程序的外观。


2.1 window - 常用节点配置项

在这里插入图片描述


2.2 window - 设置导航栏的标题

设置步骤: app.json -> window -> navigationBarTitleText

{
    
    
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    
    "backgroundTextStyle":"light",//下拉loading的样式，仅支持dark/light
    "navigationBarBackgroundColor": "#fff",//导航栏背景色,不支持文本颜色如"red".仅支持十六进制颜色
    "navigationBarTitleText": "我是导航标题", //导航栏标题
    "navigationBarTextStyle":"black", //导航栏文本颜色
     "enablePullDownRefresh": true,//开启下拉刷新
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

在这里插入图片描述


2.3 全局开启下拉刷新功能

概念:下拉刷新是移动端的专有名词，指的是通过手指在屏幕.上的下拉滑动操作，从而重新加载页面数据的行为。

（这个是全局的）设置步骤: app.json -> window ->把enablePullDownRefresh的值设置为true;
在这里插入图片描述

注意:在app.json中启用下拉刷新功能，会作用于每个小程序页面!


2.4 设置下拉刷新时窗口的背景色

当全局开启下拉刷新功能之后，默认的窗口背景为白色。如果自定义下拉刷新窗口背景色，设置步骤为:
app.json -> window ->为backgroundColor指定16进制的颜色值#efefef。效果如下:

  "window":{
    
    
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我是导航标题",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,//开启下拉刷新
    "backgroundColor": "#efefef",//设置下拉刷新背景色
  },

在这里插入图片描述


2.5 设置下拉刷新时loading的样式

当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading样式的效果，设置步骤为app.json -> window ->为backgroundTextStyle指定dark或light值。

在这里插入图片描述

注意: backgroundTextStyle 的可选值只有light和dark


2.6 设置上拉触底的距离

概念: .上拉触底是移动端的专有名词，通过手指在屏幕上的.上拉滑动操作，从而加载更多数据的行为。
设置步骤: app.json -> window ->为onReachBottomDistance设置新的数值

  "window":{
    
    
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我是导航标题",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100//上拉触底距离
  }

注意:默认距离为50px,如果没有特殊需求，建议使用默认值即可。


3. 全局配置- tabBar

3.1 什么是tabBar

tabBar是移动端应用常见的页面效果,用于实现多页的快速切换。小程序中通常将其分为:

  • 底部tabBar
  • 顶部tabBar

注意:

  • tabBar中只 能配置最少2个、最多5个tab页签.
  • 当渲染顶部tabBar时，不显示icon,只显示文本

在这里插入图片描述


3.2 tabBar的6个组成部分

  • backgroundColor: tabBar的背景色
  • selectedlconPath: 选中时的图片路径
  • borderStyle: tabBar. 上边框的颜色
  • iconPath: 未选中时的图片路径
  • selectedColor: tab. 上的文字选中时的颜色
  • color: tab.上文字的默认(未选中)颜色

在这里插入图片描述


3.3 tabBar节点的配置项

3.3.1 配置项属性列表说明

  • list是必选项，其他的都是可选项！

  • tabBar与window、pages等都是平级的;

在这里插入图片描述


每个tab项的配置选项：

在这里插入图片描述

  • pagePath和text是必选项，其他的是可选项

3.3.2 正常显示tabBar
{
    
    
    //页面创建
  "pages":[
    "pages/home/home",
    "pages/msg/msg",
    "pages/index/index",
    "pages/logs/logs"
  ],
    //小程序窗口设置
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
    //tabBar菜单选项配置
  "tabBar": {
    
    
    "position": "bottom",
    "borderStyle":"black",
    "color": "#75878a",
    "selectedColor": "#f00056",
    "backgroundColor": "#f0f0f4",
    "list": [{
    
    
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/icon/tabBar/home1.png",
      "selectedIconPath": "/icon/tabBar/home2.png"
    },
    {
    
    
      "pagePath": "pages/msg/msg",
      "text": "消息页面",
      "iconPath": "/icon/tabBar/msg1.png",
      "selectedIconPath": "/icon/tabBar/msg2.png"
    }]
  },
    //样式版本
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

//配置项文件中不能有注释

在这里插入图片描述


3.3.3 无法显示tabBar问题

注意：tabBar的页面必须放到所有页面的前面，否则无法显示tabBar

如下列代码,若将"pages/home/home"和"pages/msg/msg"tabbar页面放到 "pages/index/index","pages/logs/logs"之后则无法显示tabBar菜单选项。

{
    
    
    //页面创建
  "pages":[
    //非tabBar页面
    "pages/index/index",
    "pages/logs/logs"
      //tabBar页面
    "pages/home/home",
    "pages/msg/msg",
    
  ],
    //tabBar菜单选项配置
  "tabBar": {
    
    
    "position": "bottom",
    "borderStyle":"black",
    "color": "#75878a",
    "selectedColor": "#f00056",
    "backgroundColor": "#f0f0f4",
    "list": [{
    
    
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/icon/tabBar/home1.png",
      "selectedIconPath": "/icon/tabBar/home2.png"
    },
    {
    
    
      "pagePath": "pages/msg/msg",
      "text": "消息页面",
      "iconPath": "/icon/tabBar/msg1.png",
      "selectedIconPath": "/icon/tabBar/msg2.png"
    }]
  }
}

//配置项文件中不能有注释

在这里插入图片描述



二、页面配置

2.1 页面配置文件的作用

小程序中，每个页面都有自己的json配置文件,用来对当前页面的窗口外观、页面效果等进行配置。


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

小程序中，app.json 中的window节点，可以全局配置小程序中每个页面的窗口表现。如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 .json配置文件”就可以实现这种需求。

注意: 当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。


2.3 页面常用配置项

在这里插入图片描述

如下示例：

{
    
    
  "usingComponents": {
    
    },
  "navigationBarBackgroundColor": "#f2ecde",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "消息页面",
  "backgroundColor": "#f0fcff"
}

在这里插入图片描述


三、网络请求 - GET和POST

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

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制:

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

注意事项:

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

在这里插入图片描述


3.2 配置request合法域名

需求描述:假设在自己的微信小程序中，希望请求https:/ /www.escook.cn/域名下的接口

配置步骤:登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

官方说明的是，一个月只能修改5次，下面是显示错误，谨慎修改！！

在这里插入图片描述
在这里插入图片描述


3.3 发起GET请求

调用微信小程序提供的wx.request()方法，可以发起GET数据请求(下面接口是没有功能的，所以没有东些)，示例代码如下:
在这里插入图片描述


3.4 发起POST请求

调用微信小程序提供的wx.request()方法，可以发起POST数据请求,示例代码如下:

wxml:

<!--pages/index/index.wxml-->
<button bindtap="getInfo" type="primary">发起GET请求</button>
---
<button bindtap="postInfo" type="primary">发起POST请求</button>

js文件:

// pages/index/index.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    

    },

    // 发起一个get请求
    getInfo(){
    
    
        wx.request({
    
    
            url:'https://api.aa1.cn',//请求接口地址
            method:'GET',//请求方式
            // data:{//发送到服务器的数据
            //     name:'zs',
            //     age:20
            // },
            success:(res)=>{
    
    //请求成功的回调函数
                console.log(res);
            }
        })
    },

     // 发起一个post请求
     postInfo(){
    
    
        wx.request({
    
    
            url:'https://api.aa1.cn',//请求接口地址
            method:'POST',//请求方式
            data:{
    
    //发送到服务器的数据
                name:'zs',
                age:20
            },
            success:(res)=>{
    
    //请求成功的回调函数
                console.log("发送post回调函数==>",res);
            }
        })
    },


})

在这里插入图片描述


3.5 页面刚加载时请求数据

页面刚加载时初始化数据，此时可以使用onLoad事件中调用获取数据的函数:

/**
生命周期函数 - 监听页面加载
*/
  onLoad(options) {
    
    
	this.getSwiperList()
	this.GridList()
   },

//获取轮播图的函数
getSwiperList(){
    
    
	...
},

//获取九宫格的数据
GridList(){
    
    
	...
}

3.6 网络请求 - request请求的注意事项

3.6.1 跳过request合法域名校验

情景：后台只有HTTP接口，没有准备HTTPS接口协议；
解决方式：临时开启开发环境不校验请求域名、TLS版本以及HTTPS证书选项，跳过request合法域名检测;

在这里插入图片描述

注意：跳过request合法域名校验的选项，仅限在开发与调试阶段使用，上线的时候需要关闭！


3.6.2 关于Ajax跨域问题说明

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


四、总结

  1. 能够使用WXML模板语法渲染页面结构
  • wx:if、wxelif、wx:else、hidden、wx:for、wx:key
  1. 能够使用WXSS样式美化页面结构
  • rpx 尺寸单位、@import 样式导入、全局样式和局部样式
  1. 能够使用app.json对小程序进行全局性配置
  • pages、window、tabBar、style
  1. 能够使用 page.json 对小程序页面进行个性化配置
  • 对单个页面进行个性化配置、就近原则
  1. 能够知道如何发起网络数据请求
  • wx.request() 方法、onLoad()事件

链接： 快捷回顾WXML语法

猜你喜欢

转载自blog.csdn.net/qq_24484317/article/details/134191876
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022