foreword

For the current form, WeChat mini-programs are a hot spot, so how should we learn and master them before doing actual projects?
For this reason, I specially set up this column, and I will share it with you while I am learning!

This article first introduces the application of our rpx in wxss and our configuration of the global style and local style of the applet, and then we will introduce in detail how to configure our window navigation bar.

About rpx Introduction

1. We have learned about the unit of px (resolution) in the previous HTML learning. We often use it when we set up components. So what is the resolution unit we use in the WeChat applet? That isrpx, so what's so special about him that it's worth setting it up specifically?

2. rpx is unique to WeChat applets. It solves the size unit of screen self-adaptation. It can be self-adapted according to the screen width. Regardless of the size of the screen, the specified screen width is 750rpx. Set the size of elements and fonts through rpx, and the applet can be used in different sizes Under the screen, the conversion between rpx and px can be automatically adapted

特别的在我们微信小程序开发中，我们前面提到过推荐使用 iPhone 6 进行开发，因为 iPhone 的 px =375，那么我们 2 rpx= 1 px
About global configuration and local configuration

Regarding the global configuration and local configuration, we have also introduced them earlier, and interested friends can do some archaeological research in front of them! Next, I will talk about the commonly used configuration items in the global configuration!

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

1. Commonly used configuration items for global configuration

老规矩先用表格展示一下。

Configuration item name	effect
pages	Store the storage path of all pages of the current applet
window	Set the appearance of the applet window
tabBar	Set the tabBar effect at the bottom of the applet
style	Whether to enable the option of the new version of the component

We also introduced pages before, in order to display our list page, we changed the first path of pages to the path of our list, and then the page of our WeChat applet is to display the content of our list
window and tabBar Let's take a look at a picture next, which introduces the areas used by our configurations
style We also showed you when we introduced button earlier, when we delete style, our component style becomes the old version
Function Diagram

话不多说，下面我们就来进入我们的导航栏目的讲解！

Two, window navigation bar

The settings of our window navigation bar include the first two areas shown in the previous picture. Next, we will introduce the common configuration items of our window node.

attribute name	type	Defaults	effect
navigationBarTitleText	string	character string	Navigation bar title content
navigationBarBackgroundColor	Hexcolor	#000000	Set the background color of the navigation bar (such as fluorescent yellow #ffa)
navigationBarTextStyle	string	white	Set the color of the navigation bar title (only black and white)
backgroundColor	Hexcolor	#ffffff	The background color of the window
backgroundTextStyle	string	dark	Set the style of drop-down loading only supports dark/light
enablePullDownRefresh	Boolean	false	Whether to enable pull-down refresh globally
onReachBottomDistance	Number	50	The trigger threshold of the page pull bottom event (the distance from the bottom of the page is in px)

我们所有的上述设置都是在 app.json 内的 window 里面进行设置！！！接下来我演示一下 navigationBarTitleText 和下拉相关属性，剩下的配置项大家可以自行尝试！

2.1 navigationBarTitleText configuration item

话不多说开始操作！

Open app.json and find window

In the window we can see the following default configuration items

  "window":{
      
      
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "Weixin",
  "navigationBarTextStyle":"black"
 },

We can see that the navigationBarTitleText in the third line is the configuration of the title content of our navigation bar. The default is Weixin. For example, I changed it to "Pippi's Cabin"

"window":{
      
      
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "皮皮的小屋",
  "navigationBarTextStyle":"black"
 },

Show results:

2.2 Configuration of pull-down refresh

Regarding the pull-down refresh, I believe that everyone must use it frequently. For example, when we use the mobile phone to freeze, then our habitual action is to pull down the screen, so that our page will reload, so how do we realize the function?

First open app.json to enter the window configuration, open the drop-down function

  "window":{
      
      
  "backgroundTextStyle":"light",
  "navigationBarBackgroundColor": "#ffa",
  "navigationBarTitleText": "皮皮的小屋",
  "navigationBarTextStyle":"black",
  "enablePullDownRefresh": true
 },

In the last line we set enablePullDownRefresh to true
Show results:

至此我们对于这些配置就进行了简单的介绍，我们在自行尝试这些配置项的时候需要注意的就是我们 onReachBottomDistance ，他的上拉触底的意思就是我们平时刷购物平台的时候，当我们刷新到离底部一定距离的时候，页面会自动刷新下面的数据，我们就是通过 onReachBottomDistance 设置自动刷新的位置

Summarize

Everyone should be happy every day, let us study happily together!

insert image description here

[WeChat applet entry to proficiency] — window navigation bar configuration

Table of contents