The little program patted you: How to avoid routing minefields

Akik a little sticky well

Read the full article for 6 minutes. The case is adapted from a real event. The name of the small program and the name of the person are only code names. I'll change it.

Typical cases

In a dark night, the wind is high, “XX food a lot” Baidu intelligent small program quietly online, directory structure is as follows:

├ ─ ─ pages│ └ ─ ─ the home│ ├ ─ ─ index. Js│ ├ ─ ─ index. Json│ ├ ─ ─ index. The CSS│ └ ─ ─ index. The swan│ └ ─ ─ the eat/ / big stuttering │ ├ ─ ─ index. Js│...│ └ ─ ─ meat/ / meat │ ├ ─ ─ index. Js│...│ └ ─ ─ ultimately responds/ / large bowl of drink │ ├ ─ ─ index. Js│...│ └ ─ ─ wine/ / wine │ ├ ─ ─ index. Js│...│...├ ─ ─ app. Json├ ─ ─ app. CSS├ ─ ─ app. JsCopy the code

Pages of app.json contains all the page addresses of the applet:

{
. pages: [
      "pages/home/index".      "pages/eat/index". "pages/meat/index". "pages/drink/index". "pages/wine/index".. ] } Copy the code

In order to allow their small program access to search traffic, xiaoming, the front end, the first time in the developer platform submitted natural search resources:

Everything pays off, “xx rice a lot” small program was finally included by the search engine, can be searched.

…

A few months later, in the boss of the British (ZI) Ming (Ben) (BI) hui (Po), “XX food a lot” small program, function overlapping, to achieve full seat; And the company, in order to enhance the flow alongside thigh, throw money, many small program pages have been put into the advertising channel.

At the same time, small programs are getting bigger and the performance experience is being severely tested…

As excellent as Xiao Ming, how could he be stumped? He immediately chose subcontracting loading for performance optimization:

 / / subcontract A
├ ─ ─ packageA│ └ ─ ─ the eat│ ├ ─ ─ index. Js│ ├ ─ ─ index. Json│ ├ ─ ─ index. The CSS│ └ ─ ─ index. The swan│ └ ─ ─ meat│ ├ ─ ─ index. Js│...│ └ ─ ─...│ B / / subcontract ├ ─ ─ packageB│ └ ─ ─ ultimately responds│ ├ ─ ─ index. Js│...│ └ ─ ─ wine│ ├ ─ ─ index. Js│...│ └ ─ ─...├ ─ ─ pages│ └ ─ ─ the home│ ├ ─ ─ index. Js│...├ ─ ─ app. Js├ ─ ─ app. Json├ ─ ─ app. CSSCopy the code

App. json looks like this:

{
  // Main package configuration
  "pages": [
      "pages/home/index"..]. // Subcontracting entry and configuration  "subPackages": [  {  "root": "packageA". "pages": [  "eat/index". "meat/index".. ]  },  {  "root": "packageB". "pages": [  "drink/index". "wine/index".. ]  }  ] } Copy the code

However, although the packet size is smaller – the address that was placed before, but invalid!

Because the search engine included is the failure of the dead chain, “xx rice a lot” small program was downgraded!

Resource commit quotas are reduced because of demotion!

Not only that, all the channels that have been put in the past need to be replaced by coordinated resources, and the launch time of channels is not controllable… White silver into the water!

Boss Long Yan great anger, Xiaoming at a loss…

Ask to ask: xiaoming distance drive still have a few days?

How to solve

In fact, xiaoming’s tragedy would not have happened if the applets’ custom routing mapping rules had been configured.

If the routes field exists in app.json, the framework considers that the applet has enabled a custom route and obtains the path based on the routes mapping rule.

  // Main package configuration
  "pages": [
      "pages/home/index"..]. // Subcontracting entry and configuration  "subPackages": [  {  "root": "packageA". "pages": [  "eat/index". "meat/index".. ]  },  {  "root": "packageB". "pages": [  "drink/index". "wine/index".. ]  } ]. // Customize the route  routes: [  {  "path": "home".// Drop entry, path in Scheme  "page": "pages/home/index" // The actual physical storage path  }, {  "path": "eat". "page": "packageA/eat/index"  }, {  "path": "drink". "page": "packageB/drink/index"  }, {  "path": "wine". "page": "packageB/wine/index"  }, {  "path": "meat". "page": "packageA/meat/index"  }, . ] } Copy the code

By configuring a custom route, the source code structure can be decoupled from the configuration path, and the directory organization becomes more flexible, facilitating code refactoring.

Next, we use a diagram to briefly illustrate the specific mapping rules of user-defined routes:

Mapping rules

Where are the rules still in force

With custom routing, apis, components, and events related to the applets framework also adopt new routing rules:

API that contains path/ URL parameters

Swan navigateTo, swan. SwitchTab, swan. NavigateToSmartProgram, swan. OpenShare path in the API, such as url parameters;

// In the navigateTo example, home is the path of the custom route. The actual physical address is 'pages/home/index'.
 swan.navigateTo({
      url: '/home'
 });
Copy the code

Navigation components

Url property of navigator component;

// home indicates the path of the user-defined route. The actual physical address is 'pages/home/index'.
<navigator url="/home" />
Copy the code

Share and forward events

The page’s event handler, onShareAppMessage, returns the object’s path field;

Page({
    data: {
        title: 'Xx Food many information List'
    },
    onShareAppMessage() {
 return {  title: this.data.title,  content: 'Xx Food many information List'. imageUrl: ' '. // home indicates the path of the user-defined route. The actual physical address is 'pages/home/index'.  path: '/home'. success(res) {  // Share success  },  fail(err) {  // Share failed  }  };  } }); Copy the code

A method to open a small program

Call up the associated SDK of the applets, where the PATH field

// Before this method can be used, it is necessary to import the file to raise the SDK
window.swanInvoke({
    appKey: '4fecoAqgCIUtzIyA4FAPgoyrc4oUc25c'.    // home indicates the path of the user-defined route. The actual physical address is 'pages/home/index'.
    path: '/home'. query: {  id: 1. type: 'a'  } }); Copy the code

Framework principle of Routes

Swanjs is the front-end framework for Baidu smart Applet. NAFramework stands for applet framework client layer and Server stands for applet Server.

Using swan.navigateTo as an example, here’s what the framework layer does for custom routing:

At the end

Anyway, routes configurationTen minutesSave for a rainy dayThe century ten thousand generation— Wish xiaoming no longer cry ~😜