Shulou(Shulou.com)06/02 Report--

This article shows you how to jump to the page of WeChat Mini Programs, the content is concise and easy to understand, it can definitely brighten your eyes. I hope you can get something through the detailed introduction of this article.

We will create a second view and then jump from the first view to the second view.

First develop the second view:

WeChat Mini Programs Development Series 7: WeChat Mini Programs's Page Jump

{{index + 1}}. {{log}}

Friends who have done Angular development must be familiar with the above view design. The data source for this view is provided by the model logs and is a list result. The data source for each element of the list is a record in the model logs, represented by log.

To make the log look more neatly displayed, display the index of each log before the log content. Because log's index starts at 0, add one before the index with {{index + 1}}, so that the displayed index is more in line with the reading habits of ordinary people.

The controller for this view:

/ / logs.jsconst util = require ('.. /.. / utils/util.js') Page ({data: {logs: []}, onLoad: function () {this.setData ({logs: (wx.getStorageSync ('logs') | | []) .map (log = > {return util.formatTime (new Date (log))})}))

The implementation of the controller logs.js:

We can recall that the fourth article in this series introduced the implementation logic of the controller:

WeChat Mini Programs Development Series 4: initialization Logic of WeChat Mini Programs's Controller

Call the Page constructor in the controller to assign the current controller a data model named logs.

The values of this data model are populated and obtained through the API wx.getStorageSync provided by the Wechat framework.

The meaning of wx.getStorageSync is defined on WeChat Mini Programs's official website: the content corresponding to the specified key is obtained synchronously from the local cache.

Https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxgetstoragesynckey

After the UI and controller of the second view are developed, all that is left is to define a trigger point in the first view so that it can trigger the jump to the second view.

I bound a click function bindViewTap through the property bindtap on the first view:

The implementation of bindViewTap in the first controller index.js:

BindViewTap: function () {wx.navigateTo ({url:'.. / logs/logs'})}

The jump is still through the API wx.navigateTo provided by WeChat Mini Programs:

Keep the current page, jump to a page within the application, and use wx.navigateBack to return to the original page.

The above content is how to jump WeChat Mini Programs's page. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.