Small micro-channel program memorandum _ _ _ dismantling elements of learning record

Data analysis is no lack of public documents from the micro-letter applet.

Registration procedures App () function

App(Object object)Registration applet. Accepts a Objectparameter, which specifies the lifecycle callbacks and other small programs.
App()Must app.jscall, you must call and be called only once. Otherwise, there will be unintended consequences.
Developers can getAppget to a globally unique way Appof example, to obtain Appdata or calling on developers registered in the Appfunction on.

Basic framework as follows:

// app.js
App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
   test:function() {                           //添加
    console.log("my name is test and come from App.js");
  },
 globalData: {                                //添加
    userInfo:null,
    helloFromApp:'Hello,I come from App.js'        //---添加
  }
})

Which
onLaunchlifecycle callbacks - the listener small program initialization. When the applet initialization is complete, it will trigger onLaunch (Global triggers only once).
onshowLifecycle function - monitor applet displays. When the applet is started, or from the background into the foreground display is triggered onShow.
onHideLifecycle function - monitor applets hidden. When the applet from the foreground into the background, it will trigger onHide
onErroran error monitor function. When a small script error occurs or api call fails, it will trigger onError and bring the error message.
onPageNotFoundPage listener function does not exist. When the situation appeared to be a small program to open a page that does not exist, the page will bring information to the callback function.
Foreground, background is defined : When the user clicks to close the upper left corner, or press the Home key to leave the micro-channel device, the applet is not directly destroyed, but into the background; micro letter when entering or re-open the applet again, will enter the foreground from background . Note that: Only small program into the background when a certain time or system resources is too high, will be the real destruction.

note:

  • Do not defined in the App (function) in the call getApp (), you can use this app to get the instance.
  • Do not call getCurrentPage when onLaunch of (), then page has not been generated.
  • By getApp (after acquiring instance, Do not attempt to call the life-cycle function).

Page(Object object)

A small program registration page. Take an Object type parameter, which specifies the initial data page, lifecycle callbacks, event handlers and so on.
dataThe initial data page.
When the page is loaded, data will be transmitted in the form of a string JSON render layer by the logic layer, the data in the data must be converted to JSON types: string, number, Boolean, object array.
onLoadLifecycle callbacks - monitor page load
onShowlifecycle callbacks - page display monitor
onReadylifecycle callbacks - listening initial page rendering is complete
onHidelifecycle callbacks - monitor page Hide

setDataFunction is used to transmit data from the logical layer to the view layer (asynchronous), while varying the value corresponding this.data (synchronization).
Note: directly modify this.data without calling this.setData can not change the state of the page, it will result in data inconsistencies.

ObjectIn key: valuethe form represented, to this.datathe keychange to the value corresponding to value.

Examples

//index.js
Page({
  data: {
    text: 'init data',
    num: 0,
    array: [{ text: 'init data' },{text:'ascboa'}],
    object: {
      text: 'init data'
    }
  },
  changeText: function () {
    // this.data.text = 'changed data'  // bad, it can not work
    this.setData({
      text: 'changed data'
    })
  },
  changeNum: function () {
    this.data.num = 1
    this.setData({
      num: this.data.num
    })
  },
  changeItemInArray: function () {
    // you can use this way to modify a danamic data path
    this.setData({
      'array[1].text': 'changed data'
    })
  },
  changeItemInObject: function () {
    this.setData({
      'object.text': 'changed data'
    });
  },
  addNewField: function () {
    this.setData({
      'newField.text': 'new data'
    })
  }
})
<!--index.wxml-->
<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{num}}</view>
<button bindtap="changeNum"> Change normal num </button>
<view>{{array[1].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>

requireWe can get other files to export data via require (), but it should be noted that the path can only be passed to require a relative path. Such as:

var util = require("../../utils/util.js");

Also here is equivalent to adding a custom library functions, call the members of the util.


formForm
report-submitwhether a message template for sending a return formId ..
report-submit-timeoutWait for some time (milliseconds) to confirm formId take effect. If this parameter is not specified, formId there is a small probability is invalid (the situation in case of network failure). This parameter can specify whether or not effectively detect formId to this time as the timeout parameter of this detection. If it fails, it returns requestFormId: formId fail beginning of
bindsubmitcarrying data in form submit event, event.detail = {value: { ' name': 'value'}, formId: ''}
bindresettrigger reset event when the form is reset .

The main frame as follows

<form bindsubmit="formSubmit" bindreset="formReset">
    <button formType="submit">Submit</button>
    <button formType="reset">Reset</button>
</form>

Basic code attribute analysis app.json

app.jsonFile for the global data file.

pageAttribute
each pagemust be registered here. In other words, wondering what micro-channel small program page, look here on it. If you want to create a new page, similar here was added on it.

windowsProperties
avigationBarBackgroundColor: Navigation bar background color.
navigationBarTitleText: Text navigation bar.
navigationBarTextStyle: Navigation bar text color


Published 222 original articles · won praise 48 · views 20000 +

Guess you like

Origin blog.csdn.net/qq_44116998/article/details/104728896