Learning WeChat Mini Program day03-Configuration Information and Network Requests

Configuration information and network requests

1. Global configuration
2. Page configuration
3. Network requests - GET and POST
4. Summary

1. Global configuration

1. Global configuration files and commonly used configuration items

1.1 Global configuration file

The files in the root directory of the mini programapp.json belong to the mini program全局配置文件. Commonly used configuration items are as follows:

pages
Record the current applet所有页面的存放路径
window
Global settings applet窗口的外观
tabBar
Set the tabBar effect at the bottom of the mini program
style
Whether to enable the component style of 新版

{
    
    
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",//删掉该配置项就是默认使用旧版本的组件样式（目前不推荐删掉）
  "sitemapLocation": "sitemap.json"
}

1.2 Components of Mini Program Window

Insert image description here

2. Global configuration - window

window:Mainly used to globally configure the appearance of the applet.

2.1 window - common node configuration items

Insert image description here

2.2 window - Set the title of the navigation bar

Setup steps: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"
}

Insert image description here

2.3 Globally enable`下拉刷新`function

Concept:下拉刷新 is a proper noun for the mobile terminal, which refers to the pull-down sliding operation of the finger on the screen, thereby 重新加载页面数据的行为.

(this is global) setting steps: app.json -> window ->Set the value of enablePullDownRefresh to true;
Insert image description here

Note: Enabling the pull-down refresh function inapp.json will affect every mini program page!

2.4 Set the background color of the window when pulling down to refresh

When全局开启下拉刷新功 is enabled, the window background of 默认 will be 白色. If you customize the background color of the drop-down refresh window, the setting steps are:
app.json -> window ->Specify the color value forbackgroundColor< a i=7>. The effect is as follows:16进制#efefef

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

Insert image description here

2.5 Set the loading style when pulling down to refresh

After全局开启下拉刷新功能, the 默认 window's loading style is 白色, if To change the effect of the loading style, set the steps to app.json -> window -> specify or for backgroundTextStyle . darklight

Insert image description here

Note: The only possible values for backgroundTextStyle arelight and dark

2.6 Setting the distance of `上拉触底`

Concept: .上拉触底 is a proper noun on the mobile side. It is the act of loading more data by sliding your finger up on the screen.
Setup steps: app.json -> window ->Set up new for onReachBottomDistance数值

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

Note:默认The distance is50px. If there are no special requirements, it is recommended to use the default value.

3. Global configuration-tabBar

3.1 What is tabBar

tabBarIt is a common page effect in mobile applications and is used to quickly switch between multiple pages. Mini programs are usually divided into:

Bottom tabBar
Top tabBar

Notice:

Only tabs can be configured in tabBar最少2个、最多5个tab.
When rendering顶部tabBar, do not displayicon, only display text

Insert image description here

3.2 6 components of tabBar

backgroundColor: background color of tabBar
selectedlconPath: Image path when selected
borderStyle: tabBar. The color of the upper border
iconPath: Image path when not selected
selectedColor: The color of the text on tab. when it is selected
color: The default (unselected) color of text on tab.

Insert image description here

3.3 Configuration items of tabBar node

3.3.1 Configuration item attribute list description

listYes必选项, everything else is optional!

tabBarIt is at the same level as windows, pages, etc.;

Insert image description here

Configuration options for eachtab项:

Insert image description here

pagePath and text are required, the others are optional

3.3.2 Display tabBar normally

{
    
    
    //页面创建
  "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"
}

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

Insert image description here

3.3.3 Unable to display tabBar problem

Note: tabBar page必须放到所有页面的前面, otherwise tabBar cannot be displayed

As shown in the following code, if the "pages/home/home"和"pages/msg/msg"tabbar page is placed after "pages/index/index","pages/logs/logs", the tabBar menu option cannot be displayed.

{
    
    
    //页面创建
  "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"
    }]
  }
}

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

Insert image description here

2. Page configuration

2.1 The role of page configuration files

In the applet, each page has its own json配置文件, which is used to configure the 当前页面 window appearance, page effects, etc.

2.2 Front layoutJapaneseAll station layoutSpecial system< /span>

In the applet, the node in app.json can display the window of each page in the applet . If some mini program page , then "'s " can realize this requirement. window全局配置想要拥有特殊的窗口表现页面级别 .json配置文件

Note: When page configuration and global configuration冲突, according to 就近原则, the final effect is 以页面配置为准.

2.3 Common page configuration items

Insert image description here

Example:

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

Insert image description here

3. Network requests - GET and POST

3.1 Limitations on network data requests in mini programs

For 安全性 considerations, the mini program official has made the following two restrictions on数据接口的请求:

can only request interfacesHTTPStype
required接口的域名added信任列表medium

Precautions:

Domain name only supportshttps协议
area name不能useIP地址orlocalhost
Area name必须经过ICP备案
Server domain name - within one month最多Application available5次修改

Insert image description here

3.2 Configure request legal domain name

Requirement description: Suppose that in your own WeChat applet, you want to request the interface under the https:/ /www.escook.cn/ domain name

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

Insert image description here

The official statement is that you can only modify it 5 times a month. The following is an error,谨慎修改！!

Insert image description here

3.3 Initiate a GET request

Call the wx.request() method provided by the WeChat applet to initiate a GET data request (下面接口是没有功能的，所以没有东些). The sample code is as follows:
Insert image description here

3.4 Initiate POST request

Call the wx.request() method provided by WeChat applet to initiate POST data request. The sample code is as follows:

wxml:

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

js file:

// 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);
            }
        })
    },


})

Insert image description here

3.5 Requesting data when the page is first loaded

When the page is just loaded初始化数据, you can use onLoad事件 to call the function to obtain data:

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

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

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

3.6 Network Request - Precautions for request request

3.6.1 Skip request legal domain name verification

Scenario: There is onlyHTTPinterface in the background and no preparationHTTPS接口协议;
Solution: Temporarily enable it 开发环境不校验请求域名、TLS版本以及HTTPS证书选项, skip request legal domain name detection;

Insert image description here

Note: The option to skip request legal domain name verification, 仅限 is used in 开发与调试阶段 and needs to be turned off when going online!

3.6.2 Description of Ajax cross-domain issues

跨域The problem only exists on浏览器web端, 小程序 is not on the browser side, but on 基于微信客户端, so 微信小程序不存在跨域问题!
Ajax技术核心 depends on the XMLHttpRequest object in the browser. Since 微信小程序的宿主环境是微信客户端, ". 不能叫做发起网络数据请求

4. Summary

Ability to render page structure using WXML template syntax

wx:if、wxelif、wx:else、hidden、wx:for、wx:key

Ability to use WXSS styles to beautify page structure

rpx 尺寸单位, @import style import, global style and local style

Able to use app.json to globally configure the mini program

pages、window、tabBar、style

Able to use page.json to personalize the mini program page

Personalize individual pages,就近原则

Ability to know how to initiate network data requests

wx.request() method,onLoad()event

Link: Quick review of WXML syntax