The first three chapters of the series describe how to build the front page, answer page and answer result page of the answer mini-program. However, this is the end of the interface design section and the transition to the interactive features section.

Software architecture: wechat native small program + cloud development

Poke source code address, get source code, version continuous iteration…

Project renderings

Home page

Answer the questions on page

Answer result sheet

So the question comes, these pages are independent, how to set up the pages in series? That is, how do you realize the jump between pages? The answer is, in two words, routing.

Routing of the API

First of all, let’s take a look at the official document of wechat apPLETS, which provides 5 kinds of API for routing, respectively:

1. Wx. switchTab(Object Object) Switches to the tabBar page and closes all other non-Tabbar pages.

2. Wx. reLaunch(Object Object), close all pages and open a page in the app;

3. Wx. redirectTo(Object Object) : Close the current page and go to a page in the application. The tabbar page is not allowed to jump to;

Wx. navigateTo(Object Object), keep the current page, go to a page in the application. But you cannot jump to the Tabbar page. Use wx.navigateBack to return to the original page. Small program in the page stack up to ten layers;

Wx. navigateBack(Object Object), close the current page, return to the previous page or multi-level page. You can use getCurrentPages to get the current page stack and determine how many layers you need to return.

We can clearly see their similarities and differences, we can choose to use according to the needs.

Project sample code

<view catchtap="goToTest"> <button class=' cu-bTN bg-red round block LG '> </button> </view goToTest: function() { wx.navigateTo({ url: '.. /test/test' }) }, <button bindtap='nextSubmit' class=" cu-bTN bg-red round LG "> function(){ wx.redirectTo({ url: '.. /results/results' }) }, <button bindtap="toDoWrong" hover-class="other-button-hover" class=" cu-bTN bg-red round LG" </button><button bindtap="toIndex" hover-class="other-button-hover" class="cu-btn line-red round LG margin-top" </button> toDoWrong(){wx.redirectto ({url: '.. /test/test' }) }, toIndex: function(){ wx.redirectTo({ url: '.. /index/index' }) },Copy the code

Ok, so you can jump from page to page. Isn’t that easy?