WeChat applet learning notes: page configuration and routing

I have been studying and reviewing the development of small programs recently, and I am taking notes on some of my learning results. Refer to the official WeChat Mini Program documentation: developers.weixin.qq.com/miniprogram…

1. Mini Program Configuration

1. Global Configuration

The app.json file in the root directory of the mini program is used to configure the WeChat mini program globally, determine the path of the page file, window performance, set the network timeout, set multiple tabs, etc.

// Example {
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "Home"
    }, {
      "pagePath": "pages/logs/index",
      "text": "Log"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}

2. Page configuration

Each mini program page can also use the .json file with the same name to configure the window performance of this page. The configuration items in the page will overwrite the same configuration items in the window of app.json.

// Example {
  "navigationBarBackgroundColor": "#ffffff",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "WeChat API Function Demonstration",
  "backgroundColor": "#eeeeee",
  "backgroundTextStyle": "light"
}

3. Sitemap configuration

Note: The sitemap index prompt is enabled by default. If you need to turn off the sitemap index prompt, you can configure the checkSiteMap field to false in the setting of the mini program project configuration file project.config.json.

The sitemap.json file in the mini program's root directory is used to configure whether the mini program and its pages are allowed to be indexed by WeChat.

There are two ways to configure whether to be indexed by WeChat:

1. Page indexing settings: You can close the index of the entire mini program, mini program management background - function - page content access - page indexing switch;

2. Sitemap configuration: You can close the index of specific pages.

// All pages will be indexed by WeChat (default)
{
    "rules":[{
        "action":"allow",
        "page":"*"
    }]
}
// path/to/page page is not indexed, the rest will be indexed {
    "rules":[{
        "action":"disallow",
        "page":"path/to/page"
    }]
}

2. Five routes of mini program

1. wx.navigateTo()

Keep the current page and jump to a page in the app. Cannot jump to the tabbar page. The page stack in a mini program can be up to ten levels deep. If it exceeds ten levels, you can use wx.redirectTo to jump.

wx.navigateTo({
    url:"list?id=2",
    events:{
        //Inter-page communication interface, used to monitor the data sent to the current page by the opened page.
        someEvent:function(data){
            console.log(data)
        }
    },
    success:function(res){
        // Send data to the opened page through eventChannel res.evnetChannel.emit('someEvent',{dta:'list'})
    }
})

2. wx.redirectTo()

Close the current page and jump to a page in the app. But it is not allowed to jump to the tabbar page.

// Example wx.redirectTo({
    url:'list?id=2',
    success:function(){},
    fail:function(){}
})

3. wx.switchTab()

Jump to the tabBar page and close all other non-tabBar pages.

wx.switchTab({
    url:'/index'
})

4. wx.navigateBack()

Close the current page and return to the previous page or multiple pages. You can use getCurrentPages to get the current page stack and decide how many levels to return.

// This is page A wx.navigateTo({
  url: 'B?id=1'
})

// This is page B wx.navigateTo({
  url: 'C?id=1'
})

// NavigateBack in page C will return to page A wx.navigateBack({
  delta: 2
})

5. wx.reLaunch()

Close all pages and open a page in the app.

//Example wx.reLaunch({
    url:'list?id=2'
})

Note: Also, how do I jump back to the mini program from the page in the webview related to the jump?

wx.miniPrograme.navigateTo({
    url:'pages/login/login'+'params'
})
// Jump to the mini program's navigation page wx.miniPrograme.switchTab({
    url:"/pages/index/index"
})

Summarize

This is the end of this article about the page configuration and routing method of the WeChat Mini Program learning notes. For more relevant content about the page configuration and routing method of the Mini Program, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!