The file types associated with the applets project structure

WXSS is a style language, used to describe WXML component style JS logic processing JSON applet Settings, page registration, page title and tabbarCopy the code
The main file
  1. Json must have this file, without this file, the project will not run, because the wechat framework uses this as the entry to the configuration file, the global configuration of the entire applet. Including page registration, network Settings, as well as the window background color of the applet, configure the navigation bar style, configure the default title
  2. App.js must have this file, it will also error! But this is a file that we can just create and we don’t have to write anything and then we can listen to and process the life cycle of the applet and declare global variables, okay
  3. App. WXSS optional

Two-way binding and vUE for applets?

Applets that directly attribute this.data cannot be synchronized to an attempt and must call this.setDataCopy the code

How do applets pass data?

Define the global variable globalData in the app.js file to store information inCopy the code
    // app.js
    App({
        // Global variables
        globalData: {userInfo:null}})Copy the code

With wx.navigateTo and wx.redirectTo, you can put part of the data in the URL and initialize it when a new page is loaded

 //Navigate
 wx.navigateTo({
     url:' '
 })
 //Redirect
 wx.redirectTo({
     url:' '
 })
 
 //page.js
 Page({
     onload:function(option){
         console.log(option.name + 'is' + option.gender
         this.setData({
             option:option
         })
     }
 })
Copy the code

Note: Wx. navigateTo and wx.redirectTo do not allow jumps to TAB contained pages onload is executed only once using local cache Storage related

Applets life cycle

Global life cycle
  1. Onload is triggered when the page is loaded. A page will be called only once. You can obtain the parameters in the path to open the current page in the parameters of onLoad
  2. Trigger when onShow page is displayed/cut to foreground
  3. Triggered when the first rendering of the onReady page is complete. A page is called only once, indicating that the page is ready to interact with the view layer
  4. OnHide Triggered when the page is hidden or accessed in the background. Such as navigateTo or bottom TAB to switch to another page, small program into the background
  5. OnUnload Triggered when a page is unloaded. Such as redirectTo or navigateBack to other pages
Page life cycle
Page({
    // When a page is created, it is triggered only once, usually to fetch background data or to accept the parameters of another page
        onload(){},
        // Triggered when entering the page
        onShow(){},
        // Triggered when the page leaves
        onHide(){},
        // The first rendering of the listening page is complete
        onReady(){},
        Destroyed in vue
        onUnload(){},
        onReachBottom(){
            console.log('To the bottom of the page')}// Trigger when pulled down
        onPullDownRefresh(){
            console.log('onPullDownRefresh')},// Triggered when clicking on the upper right corner to share
        onShareAppMessage(){}})Copy the code

Route management of wechat applets

There are two routing trigger modes:

  1. Label mode trigger

    vue

    <router-link to="">

    Small program

    < span style =" max-width: 100%; clear: both; min-height: 1em; key=value">

    Accept: Accept on another page in the onLoad life cycle
  2. Program-time trigger

    vue

    this.$router.push()

    Small program

    wx.navigateToRollback with historywx.redirectToDoes not keep the history, jumps to another page, cannot return to the previous pagethis.$router.replace()

    wx.switchTabOnly jump to tabBar page, do not go backwx.reLaunchYou can jump to either a Tabbar page or a non-Tabbar page without a history rollback

The drop-down refresh

Configure enablePullDownRefresh as window in global Config. Define onPullDownRefresh hook function in page. After the pull-down condition is reached, the hook function is executed to initiate the request method. When the request returns, call wx.stopPullDownRefresh to stop the pull-down refresh

BindTap and catchtap

Similarity: both as click event function, click triggered. Does bindtap prevent bubbling and Catchtap prevent bubbling

Wx. navigateTo, wx.redirectTo, wx.switchTab, wx.navigateBack, wx.relaunch

  1. Wx. navigateTo: Leave the current page and jump to a page in the app. But you cannot jump to the Tabbar page
  2. Wx. redirectTo: Close the current page and jump to a new page (similar to redirection). However, jumping to the Tabbar page is not allowed
  3. Wx. switchTab: Switches to the Tabbar page and closes all non-Tabbar pages
  4. GetCurrentPages () gets the current page stack and determines how many layers to return
  5. Wx.relaunch () : Close all pages and open to a page within the app

The login process

Obtain the wx.login obtain the code transfer background server Obtain the unique id of the wechat user OpenID and the session key session_key for this login. Wx.setstoragesync (‘sessionKey’,’value’) persistent login after receiving the sessionKey from the developer server: The persistent session information is stored in a cookie and sent back to the server as a request header in the wx.request header in request.js