Applet learning notes (I)

     Just joined a company , It is mainly responsible for small programs , I haven't done a small program before , So let's start learning , Take some notes here , It is convenient for you to learn and summarize , This article is only for your own reference , Don't be too serious ！.

One 、 Directory structure

I created a new applet , Take a look at its directory structure .

• pages： Page directory , It is mainly used for storing pages .
  • index : index Page directory , includes 4 File
    • index.js ：js page , It mainly places the logical control of the page ( Required )
    • index.json ： Configuration on this page , Priority over global configuration ( Required )
    • index.wxml ： Page template ,html Language ( Not required )
    • index.wxss ： Page style ( Not required )
• utils： A common program logic library , You can customize the name , adopt module.exports The way to expose pages There is no need to write a duplicate for each page Js Code , The main thing is js file , Some tool classes or methods
• .gitignore：git Ignore file
• app.js： Register the application of the applet , There's a App() Function of , Parameter is an object .App() It's equivalent to the entry of the program .( Required )
• app.jsonn： Global configuration . The registration path of each page , Is an object format , Write a book in the form of key value pairs . The first item is displayed by default . ( Required )
• app.wxss ： Global style .( Not required )
• project.config.json ： In the root directory .
  1. A project profile, or project IDE The configuration file
     stay ' WeChat developer tools ’ Any configuration made on will be written to this file .

Add ：

• App() Function to register a small program , Accept one object Parameters , It specifies the life cycle function of the applet, etc .
  1. App() Must be in app.js Register in , And you can't register more than one
  2. There is only one... In the whole applet App example , It's all page sharing . Developers can use getApp Method to get app example , obtain App The data on or call the developer to register in App The function on .
  3. Not in Defined in App() Call inside function getApp(), Use this You can get app example .
  4. Not in onLaunch Called when getCurrentPages(), here page Not yet generated .
  5. adopt getApp() After getting the instance , Do not call lifecycle functions without permission .

Two 、 Framework interface

Applet instance

App(Object object)

1. In a small program , Only one applet instance can be registered . That is to say app.js Call in file App(options) Method registration instance . Then in the program you can Use getApp() Method to get the instance .
2. There are mainly these hook functions in the life cycle of applet instances ：
   • onLaunch(Object object) ： The user opens the applet for the first time , Trigger onLaunch（ Global trigger only once ）
   • onShow(Object object) ： Applet startup , Or trigger when entering the foreground display from the background .
   • onHide() ： Trigger when the applet enters the background from the foreground . You can also use wx.onAppHide Binding monitoring .

Applet page

Page(Object object)
This method is used to register a page in the applet . Accept one Object Type parameter , It specifies the initial data of the page 、 Lifecycle Callback 、 Event handling functions, etc .

• data： An object . Initial data of the page . amount to vue Medium data data .
• Everything else is a function , The life cycle hook of the page is based on on Prefixed ; Such as onLoad,onShow,onHide etc. . Other functions are self declared , It can be an event , Can be used for other .

Components

Component(Object object)
This method is used to create custom components , Accept one Object Parameters of type .

Object object：
properties ： The pair properties of the component ,
data ： Component's internal data , and properties Used with component template rendering
observers： Component data field listener , For monitoring prop and data The change of . amount to vue Medium watch.
methods： Component approach
behaviors： Be similar to mixins and traits
created： Execute on Creation
attached： When the component instance enters the page node tree, execute
ready ： Execute after the component layout is complete .

3、 ... and 、WXML grammar

1. Data binding ：

Normal binding ： Use Double brace { {}} Wrap variables .
Content ：

<view>{
   { msg }}</view>

Component properties （ Need to be in double quotes ）

<view id="item-{
     {id}}"></view>

Page({
    
	data:{
    
		id:0
	}
})

Control properties （ Need to be in double quotes ）

<view wx:if="contition"></view>

Page({
    
	data:{
    
		condition: true
	}
})

2. The list of rendering

Use... On components wx:for Control property binding an array , You can use the data of each item in the array to render the component repeatedly . The subscript variable name of the current item in the default array defaults to index, The variable name of the current item of the array defaults to item

<view wx:for="{
     {array}}">
	{
   {index}}: {
   {item.msg}}
</view>

Page({
    
	data:{
    
		array:[
			{
    msg:'foo'},
			{
    msg:'bar'}
		]
	}
})

• Use wx:for-item You can specify the variable name of the current element of the array
• Use wx:for-index You can specify the variable name of the array's current subscript ：

<view wx:for="{
     {array}}" wx:for-index="id" wx:for-item="itemName">
	{
   {idx}}: {
   {itemName.msg}}
</view>

3. Conditions apply colours to a drawing

wx:if
In the frame , Use wx:if="" To determine whether the code block needs to be rendered ：

<view wx:if="{
     {condition}}"></view>

It can also be used. wx:elif and wx:else To add else block ：

<view wx:if="{
     {llength > 5}}">1</view>
<view wx:elis="{
     {llength >2 }}">2</view>
<view wx:else>3</view>

block wx:if
because wx:if It's a control property , It needs to be added to a label . If you want to judge multiple component labels at once , You can use one <block/> Tags wrap multiple component packages , And use... On top wx:if Control properties .

<block wx:if="{
     {true}}">
	<view> view1 </view>
	<view> view2 </view>
</block>

wx:if VS hidden

wx:if： Elements are created and destroyed in real life
hidden： Just simple control Show and hide elements .

4. Templates

wxml Provide templates （template）, You can define code snippets in the template , Then call... In different places

Define templates
Use name attribute , As the name of the template . And then in Define code snippets inside , Such as ：

<template name="msgItem">
	<view>
		<text>{
   {msg}}</text>
	</view>
</template>

Use templates
Use is attribute , Declare the template you need to use , Then put the template required by data Pass in , Such as ：

<template is="msgItem" data="{
     {...item}}" />

Page({
    
	data:{
    
		item:{
    
			index:0,
			msg:' Test message '
		}
	}
})

is Properties can be used Mustache grammar , To dynamically determine which template to render ：

<template name="odd">
	<view>odd</view>
</template>
<template name="even">
	<view>even</view>
</template>

<block wx:for="{
     {[1,2,3,4]}}">
	<template is="{
     {item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

5. quote

wxml There are two ways to reference files import and include.

import

import You can use the... Defined by the target file in this file template, Such as ：item.wxml There is a definition in item Of template：

<!--item.wxml-->
<template name="item">
	<text>{
   {text}}</text>
</template>

stay index.wxml Is cited in item.wxml, You can use item Templates ：

<import src="item.wxml" />
<template is="item" data="{
     {
     {text:'forbar'}}}" />

import Have a scope , Cannot pass . Such as ：C import B, B import A,C Only use B As defined in template, Out of commission A As defined in .

include

include You can introduce the whole code except the object file into , It's equivalent to copying to include The location of .

<!--index.html-->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />

<!--header.wxml-->
<view> header </view>

<!--footer.wxml-->
<view> footer </view>

Four 、wxs modular

wxs The code can be written in wxml In the document tag , Or to .wxs The suffix for the file inside .

1. modular

every last .wxs Document and The tag is a separate module .
Each module has its own scope . That is, variables and functions defined in a module , Default to private , Not visible to other modules .
A module wants to expose its internal private variables and functions , Only through module.exports Realization .

.wxs file

// /pages/comm.wxs
var foo = "'hellow world' from comm.wxs"
var bar = function(d){
    
	return d;
}
module.exports = {
    
	foo: foo,
	bar: bar
}