Native small program development

• The role of various documents
  • .js logic
  • .json
  • .wxml exclusive page layout file
  • .wxss
• Home code in the index, logs code in the page file logs
• Both tags nature
  • The Global Property Code (global common file): Page shared configuration information is stored in app.json
    • app.js shared logic
    • app.json shared configuration: Configuration page which contains an integral part,
    • app.wxss shared style
  • Nature of code page (document page level): code for each page is used alone, on pages following each such .wxml file, when there is a common configuration file override local, limited over the global page.
    • index.js, json，wxss, wxml

 

Applet document classification

• Configuration layer * .json
  •  
• View layer .wxss .wxml
  • Layout style
• Logical layer * .js

 

The underlying API to learn: to learn through the official API

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

• window
  • Configuration window, refresh and window configurations, etc.
• tabs
  • The bottom of the column switch
• In the development can debug: true debugging

 

Reading the document

The key is to use a different file

• Small Configuration
• Global configuration for app.json

• Page layout for index.json
• sitemap configuration

• Scene value
  • It is described as a micro letter applet, two-dimensional code, photo albums, etc. We can be recorded to describe the most useful way to promote what way, and targeted promotion.
• Interface framework logical layer prepared javascript file .js
  • Logical layer data sent to the view layer after processing, while receiving feedback event view layer
  • Registration procedure APP ()
    • Life Cycle function onLaunch first loaded into memory execution, onShow switch it to the foreground, onHide be executed when switching to the background, output to help us monitor the real-time operational status in the console
      • Only in the program will be destroyed or excessive consumption of resources for too long, or when switching the number two lines above will be called the life cycle
      • These functions represent input parameters, what image from the open applet (scan code, the program entry, etc.); Query for statistical number of users to promote the promotion [important]
    • You can define your own functions and variables in it
      • myfunction () {}, globalVariable: "global"; when the (global) defined in app.js, we can call the js file in the page
      • Usage: ge tApp by calling the methods of acquisition: to get a small program globally unique App instance.
  • Page-level registration function Page ()
    • mvvm design ideas for page development
    • data, onLoad () executed when the page into memory only once and call a procedure similar app, onShow () as long as the interface displays the call, onUnload () page unload, onPullDownRefresh drop-down monitor user actions, only in the app.json set enablePullDownRefresh = "true" to allow the drop-down
    • You can customize the functions and variables,
      • Developers can add any function or data to the Object parameters in this function with a page can be accessed
      • Use bindtap to bind an event occurs
    • Switching Routing page, the page is stored in the form of a stack, the stack home in the bottom of the current page in the top of the stack.
      • Routing stack used the knowledge to understand it carefully
  • Modular
    • The common code pulled into a single .js file as a module, the module only exports to the external interface exposed by calling module.exports or, when used to require the use of import: for functional components split
  • Official API call to get commonly used functions
    • It provides a wealth of micro-channel native API: includes obtaining user information stored locally, payment function, learning about time to look at the function closer inspection.
• View layer xml css
  • WXML grammar reference .wxml file
    • Object template template ES6 deconstruction
    • Click on an event by event bind bindtap = "Name"
    • By changing the data content changes this.setData ({})
    • Package
      • Assembly view <view /> <view>
    • Quote
      • You can use the target file import defined in the document template
      • Only supports the introduction of a template layer
      • include in addition to the target file <template /> <wxs /> outside may be introduced into the entire code, it is copied to include equivalent position, such as:
    • <Block /> is not a component, it is just a wrapper element, will not do any rendering on the page, only accept control properties
    • Generally, wx: if there is a higher consumption of switching higher initial rendering hidden consumption. Therefore, if the next scene require frequent switching, with hidden better, if the condition is unlikely to change at runtime is wx: if better.

 

 

• • WXS grammar reference .wxss file

 

 

• Front page edit summary
  • First of all to the idea that the entire page consists of several parts
  • Each component portion corresponding to what is displayed
  • When the page configuration from simple to complex, and then to write a basic adjustment pattern, before writing the corresponding logical,
  • For some options require the user to enter information to ensure the correctness of the information entered can be verified at the time of submission of the judgment.
• How to send the data structure of the front end to the rear end
  • Sending data through the interface requests ajax
• Fetch data from the database
  • And then displayed on the page, business operations require the use of markers in the map component when the data show on the map
  • Jump pages operated by navigateTo

 

• Skills summary
  • Try to store frequently used data are multiplexed in app.js file
    • In other documents to obtain the contents of this file by const app = getApp ()
  • Preparation of a common interface file, so that later can be easily carried out, then call this interface if required elsewhere have called elsewhere
  • Front and rear ends are weakly coupled but must be well defined data interface, but also has some extended functions to facilitate the development of late
  • The information reading device for storage so that you do not always have to read the run rate increase when opened.
    • wx.getStorage user dimensions to ensure the safety of isolation memory, maximum memory limit to 10M; localStorages is permanently stored, you can call APIj be cleared.
    • Use custom components developed to reduce duplication of work
      • But to introduce the used files include wxml (include) wxss (@import "";) file
    • How to achieve everything in js file members have been split out
      • Assign all of the method
    • Pay attention to all the details wrong when developing grammar check for errors common errors
      • Punctuation;
      • Whether success callback function is written inside the braces function?
      • If the function parentheses,
      • For static data are static data also exist in relatively good data

 

 

• Applet configuration information

account information		Explanation	operating

 

• Cloud development environment initialization step
  • 1 Add app.js initialization file onLaunch method

// Initialize the cloud development environment

wx.cloud.init({

env:"wlq-1011"

})

• 2 configuration project.config.json cloud folder F
  • "cloudfunctionRoot": "/cloud",
• Cloud function works analysis
  • Code WeChat deployed to the server, the function of the transmission parameters of the cloud, the cloud function accepts process of building parameters calculation result is transmitted to the program by running the applet we
  • What are the benefits of doing so
    • Reducing the complexity of the code running locally, mostly native code makes some basic logic and interface time code, and resource consuming computing services performed by the cloud server, which is very silky use cloud computing services to enhance system performance.
    • Easy to manage all functions to achieve reuse in different projects inside.
  • clouds return after the function call results in result
• openId identify unique users
  • Openid get through this user identifier that we will be able to find this user
  • usefulness
    • Log in getting the phone number, openid get user information

 

• Using a micro-channel structures internet cloud database and send and receive data requests
  • Cloud case where SQL operation function, to avoid the occurrence of the following
    • Note that the data can not be caused by database permissions request; change permissions through a cloud platform can be.
  • Direct use of cloud development database API data acquisition can only get 20, and with restricted access (only you have absolute control over)
    • Is essentially a cloud data extraction function through a database api ,, just took transit.
  • Additions and deletions to change search database
    •  

 

• Cloud function to send text messages to send e-mail message template