In applets, a complete page is made up of four files.js.json.wxml.wxss:

  • .jsWrite some lifecycle hooks, event handlers, global data….
  • .jsonWrite some page configuration in it,Page. JsonConfiguration overridesapp.jsonThe configuration of the…
  • .wxmlInside write some page content, UI tags, data binding….
  • .wxssI’m gonna write some.wxmlThe inside of thecssStyle, it’s like ordinarycssThe files are a little different,.wxmlFiles can be imported into other files.wxmlFiles come in using….

Create a new page method 1 (equivalent to automatically do all the operations in method 2) :

Create a new folder, right-click on the current folder and create a new Page editor. The Page editor will automatically create these 4 files for you, and configure the route in app.json, which means you only need to write content on the Page

New page method 2 (that is, equivalent to manually do the operation in method 1) :

  • Create a new page test folder by pressing the index file and creating 4 empty files. Here is a complete page file:

  • Once created, we need to add the page route to app.json:

I put the new page in the first place in the list, so the startup applet will open the first page by default, so in the future, what page should be placed in the first place as the startup page

"Pages" : [" pages/DZM/DZM ", / / test page "pages/index/index", "pages/logs/logs"],...Copy the code
  • [error] app.json route configuration error:

This error is that the.json file of the new page cannot be empty. If you do not need to configure it, then it must have an empty JSON object in it

VM566:1 pages/dzm/dzm.json
Expecting 'STRING','NUMBER','NULL','TRUE','FALSE','{','[', got EOF
  1 | 
at files://pages/dzm/dzm.json#0
Copy the code

This modification can be done:

  • After the modification, you will find the error:

The Page() object is a new Page constructor, just like the app () constructor in app.js. It is a small program that represents the entire program. One represents a page in the applet.

Page is not constructed because it is not found.
Copy the code

Change it like this:

Page ({/ * * * * / data Page of the initial data: {}, function / * * * life cycle - listening Page load * / onLoad: Function (options) {}, /** * lifecycle functions -- listen on page first render */ onReady: function () {}, /** * lifecycle functions -- listen on page display */ onShow: OnHide: function () {}, /** * onHide: function () {}, /** * Function () {}, / onPullDownRefresh: Function () {}, /** * onReachBottom: function () {}, /** * onShareAppMessage: function () { } })Copy the code
  • After this adjustment, you will find that there is no error, that is, the page is blank, so you need to add a dot to the.wxml file to display the content:

  • You can also give this in the.wxss file<view>The tag dot style is written the same as CSS:

.wxml

<view class="dzm-view">1111</view>
Copy the code

.wxss

.dzm-view {
  color: red;
}
Copy the code

Then a new page can be displayed and used!! Other details can be configured according to requirements, or check the official document!!