App. In wechat applet JS files, components, APIs

app.js file ：

Every applet needs to be in app.js Call in App Method to register an applet instance .

	App({
    //App Instantiation , There is only one... In the whole applet App example , Share all pages 
        onLaunch: function () {
    
          //onLaunch Trigger after the applet starts  
        },
         onShow: function () {
    
          //onShow Applet startup , Or trigger when entering the foreground display from the background  
        },
        onHide: function () {
    
          //onHide Trigger when the applet enters the background from the foreground  
        },
        onError: function () {
    
          //onError Script error in applet or  API  Trigger when calling to report an error  
        },
        onPageNotFound: function () {
    
          //onPageNotFound Triggered when the page to be opened by the applet does not exist  
        },
        onUnhandledRejection: function () {
    
          //onUnhandledRejection The applet has unhandled  Promise  Trigger when rejected  
        },
        onThemeChange: function () {
    
          //onThemeChange Triggered when the system switches topics  
        },
        // You can customize any type of function or variable of Tianjian , use this Accessible , Such as :
        names:'jack'
    })

On the page js file ：

For each page in the applet , All need to be mapped on the page js Use... In the document page Go to the registration page , Specify the initial data for the page 、 Lifecycle Callback 、 Event handling functions, etc .

	Page({
    //page For the page builder , Generate a page 
      data: {
    //data Define initialization data , Hui He wxml Use {
    {text}} Rendering 
        text: "hello"
      },
      options: {
    
        //options Define the component options of the page 
      },
      onLoad: function() {
    
        //  Execute... When the page is created 
      },
      onShow: function() {
    
        //  Execute... When the page appears in the foreground 
      },
      onReady: function() {
    
        //  When the page is rendered for the first time 
      },
      onHide: function() {
    
        //  Execute when the page changes from foreground to background 
      },
      onUnload: function() {
    
        //  Execute... When the page is destroyed 
      },
      onPullDownRefresh: function() {
    
        //  Execute when the pull-down refresh is triggered 
      },
      onReachBottom: function() {
    
        //  Execute when the page hits the bottom ( Pull up )
      },
      onShareAppMessage: function () {
    
        //  When a page is shared by a user 
      },
      onShareTimeline: function () {
    
        //  When the page is shared by the user to the circle of friends 
      },
      onAddToFavorites: function () {
    
        //  Execute when the page is favorite by the user 
      },
      onPageScroll: function() {
    
        //  Execute... When the page scrolls 
      },
      onResize: function() {
    
        //  Execute when page size changes 
      },
      onTabItemTap(item) {
    
        // tab  Execute when clicked 
        console.log(item.index)
        console.log(item.pagePath)
        console.log(item.text)
      },
      //  Event response function （ Custom function name , Such as ：viewTap）
      viewTap: function() {
    
        this.setData({
    //setData Reset value 
          text: 'word'
        }, function() {
    
          // Callback function executed after re assignment 
        })
      },
      //  Free data 
      customData: {
    
        hi: 'MINA',
        lucky:'jack'
      }
    })

behaviors:

behaviors It can be used to make multiple pages have the same data fields and methods , Such as ：

	 //behavior.js in ：
    module.exports = Behavior({
    
      data: {
    
        sharedText: ' Page common fields '
      },
      methods: {
    
        sharedMethod: function() {
    
          // Sharing method 
        }
      }
    })
    
    // page.js in ：
    var myBehavior = require('./behavior.js')
    Page({
    
      behaviors: [myBehavior],// Use behaviors receive data 
      onLoad: function() {
    
        console.log(this.data.sharedText)// adopt this Get the data 
      }
    })

Component：

Component Constructors can be used to define components , call Component Constructor can specify the properties of the component 、 data 、 Such method , Document recommendation ：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Component.html, Such as ：

	Component({
    
      behaviors: [],
      //  Attribute definitions （ See below for details ）
      properties: {
    
        myProperty: {
     //  Property name 
          type: String,
          value: ''
        },
        myProperty2: String //  A simplified way to define 
      },
      data: {
    }, //  Private data , Can be used for template rendering 
      lifetimes: {
    
        //  Life cycle function , It can be a function , Or one in methods The method name defined in the 
        attached: function () {
     },
        moved: function () {
     },
        detached: function () {
     },
      },
      //  Life cycle function , It can be a function , Or one in methods The method name defined in the 
      attached: function () {
     }, //  here attached Your statement will be lifetimes Field 
      ready: function() {
     },
      pageLifetimes: {
    
        //  The lifecycle function of the page where the component is located 
        show: function () {
     },
        hide: function () {
     },
        resize: function () {
     },
      },
      methods: {
    
        onMyButtonTap: function(){
    
          this.setData({
    
            //  The way to update properties and data is similar to the way to update page data 
          })
        },
        //  The internal approach suggests starting with an underline 
        _myPrivateMethod: function(){
    
          //  There will be  data.A[0].B  Set to  'myPrivateData'
          this.setData({
    
            'A[0].B': 'myPrivateData'
          })
        },
        _propertyChange: function(newVal, oldVal) {
    
        }
      }
    })

Components ：

Applets provide a wealth of components for developers , Developers can combine various components to synthesize their own small programs . It's like HTML Of div, p Just like the label , Such as ：

<map longitude=" Shenzhen longitude " latitude=" Shenzhen latitude " bindmarkertap=" Function triggered when clicking on the map " style='width:200px;height:200px' class='mapbox'></map><!--map Map components , Render a map to the page , Attributes can be added , As in the assembly -->

More component documentation is recommended ：https://developers.weixin.qq.com/miniprogram/dev/component/

api:

In order to enable developers to easily adjust the capabilities provided by wechat , For example, get user information 、 Wechat payment, etc , The applet provides a lot of API For developers to use , Such as access to geographic information ：

	wx.getLocation({
    
      type: 'wgs84',
      success: (res) => {
    
        var latitude = res.latitude //  latitude 
        var longitude = res.longitude //  longitude 
      }
    })

more API Recommended reading ：https://developers.weixin.qq.com/miniprogram/dev/api/

Tips ： This article, pictures and other materials come from the Internet , If there is infringement , Please send an email to ：[email protected] Contact the author to delete .
The author ： misery