Small learning program registration and periodic function four pages

First to create a new page (page) applet project

New pages first in the root directory of a folder new_page

 

Select new_page folder, right-click on the applet development tools, there will be a new page option, then click on the file will create four new catalog directly under new_page

1.  new_page.js
2.  new_page.wxml
3.  new_page.wxss
4.  new_page.json

Please note that these four files can new_page folder name is different, but the four files must be of the same name, otherwise the applet can not find the file path dependence, and I recommend the same folder and file names, to avoid confusion

 

Here, the establishment of a small program page is complete, it is worth noting that the development tools small program (I use a small program of official development tools), when you create a new page, app in the root directory. json you can see the pages in a new data

app.json

{
  "pages": [
    "pages/index/index",
    "pages/about/about",
    "pages/new_page/new_page"//新增的page记录
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

This is the route of the registration page, although even here the registered address, but also through navigateTo such as switch routing interface to access, but if you need to make the bottom of the page using the navigation bar tabBar, then you must register in "pages" in address

wxml file

  You can use the applet tag will be set up in the inside pages, it will automatically introduce wxss the same directory style sheets. Specific use similar css stylesheets same time, you also can use the applet tag syntax

wxss file

1.   You can edit the style of wxml the elements here, and it supports most of the css tag selector but differ in the priority of  priorities tag selector <class selector <id selector
2.   wxml use only wxss file with the same name, if there is too much current page css style, no less than in the case of writing, then you can create a new wxss wxss file in the current directory and file of the same name that wxml wxss file using the @import introduced
3.   In the page below wxss style, only acts on the current page of wxml file, and the rest js, json file is the same

json file

1.  Exclusive profile page, only works on a page. For detailed configuration,

js file

//index.js
Page({
  data: {
    text: "This is page data."
  },
  onLoad: function (Options) {
     // page creates an execution time 
  },
  : onShow function {()
     // executed when the page appears in the foreground 
  }
  the onReady: function () {
     // the page is first rendered perform a complete 
  },
  onHide: function () {
     // perform a background from the foreground page changes 
  },
  onUnload: function () {
     // page executes destroyed 
  }
  onPullDownRefresh: function () {
     // execute the trigger pull-down refresh 
  }
  onReachBottom: function () {
     // perform the page bottom 
  },
  onShareAppMessage: function () {
     // page is executed when a user share 
  },
  onPageScroll: function () {
     // executed when the page is scrolled 
  },
  onResize: function () {
     // executed when the page size changes 
  },
  onTabItemTap(item) {
    // executes tab click 
    console.log (item.index)
    console.log(item.pagePath)
    console.log(item.text)
  },
  // incident response function 
  viewTap: function () {
     the this .setData ({
      text: 'Set some data for updating view.'
    }, function() {
      // this is setData callback
    })
  },
  // free data 
  customData: {
    Hi: 'MINA'
  }
})

 Each page js file, just execute only once and only page ({}) method, otherwise the first unknown error

Each page has its own independent life cycle, but also provide life-cycle function appeal, the life cycle of each function we can perform some of their own business code. But still first understand the life cycle of these have any effect it

onLoad

 /**
   * Life Cycle function - listen for page loads
   * / 
  : OnLoad function (Options) {
     // triggered when the page loads a page called once and only receive one parameter. Open the page containing the current parameters of the path 
    console.log (options);
  },

The current page is go_to_about way into the

 go_to_about(){
    wx.navigateTo({
      url: '/pages/about/about?id=12',
    })
  }
// then the value of the options is to print onLoad {id: "12"}

onShow

1.   You can trigger several times
2.   When the applet is switched from the background to the foreground, and the page is displayed when the current page will trigger onShow the current page, and onShow applet (app.js below, the applet life cycle rather than the page lifecycle) after execution
3.   When the page is switched, the page currently displayed page will trigger onSHhow
4.   And onShow applet different, onShow page does not receive parameters
5.   When the page is first loaded, onShow performed before onReady

onReady

1.  Page rendering is complete when the first execution, the page life cycle only once
2.  No arguments
3.  Api used to change the view, such as wx.setNavigationBarTitle , after use onReady

one hydrochloride

1.  Page into the background when the trigger too, will trigger include small program into the background
2.  No arguments
3.   Before onHide applet execution, and contrary onShow

onUnload

1. When the trigger is uninstalled. As wx.redirectTo or wx.navigateBack to a different page.
2. No arguments

onPullDownRefresh

1. Drop-down monitor user events
2. No arguments
3. In need app.jsonof windowoptions or page layout in the open enablePullDownRefresh.
4. By wx.startPullDownRefresh trigger pull down to refresh, refresh after a call to trigger drop-down animation, effects and consistent user manual pull-down refresh.
5. When the processed data refresh, wx.stopPullDownRefresh can stop the current pull-down refresh the page.

onReachbottom

1. You can in app.jsonthe windowoptions or page configuration setting a trigger distance onReachBottomDistance.
2. In the trigger during the sliding distance, the event will only be triggered once

onPagescroll

1.  Listen for page scrolling events
2.  Receiving a parameter
3.  {ScrollTop: Number} scroll bar height

onShareAppMessage

1.   Forward button (in the monitor user clicks on a page button  assembly  open-type="share") or upper right corner of the menu "Forward" button behavior, and customize the forwarding content.
2. Receiving a parameter object
3. 
4. return a object
5. 
6. It is noteworthy that when the forwarding pages and pages onHide applet will trigger, leave forwarding page will trigger when both onShow

OnResize

1.  When the trigger applet screen rotation
2. Accepts a parameter

onTapItemTap

1.  Page as a tab in the navigation page, and triggers when selected on tap
2. Receiving a parameter