当前位置:网站首页>Applet learning notes (I)
Applet learning notes (I)
2022-04-23 17:40:00 【Lost Camel】
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 )
- index : index Page directory , includes 4 File
- 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 .
- A project profile, or project IDE The configuration file
stay ' WeChat developer tools ’ Any configuration made on will be written to this file .
- A project profile, or project IDE The configuration file
Add :
- App() Function to register a small program , Accept one object Parameters , It specifies the life cycle function of the applet, etc .
- App() Must be in app.js Register in , And you can't register more than one
- 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 .
- Not in Defined in App() Call inside function getApp(), Use this You can get app example .
- Not in onLaunch Called when getCurrentPages(), here page Not yet generated .
- adopt getApp() After getting the instance , Do not call lifecycle functions without permission .
Two 、 Framework interface
Applet instance
App(Object object)
- 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 UsegetApp()
Method to get the instance . - 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
}
版权声明
本文为[Lost Camel]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/04/202204230552420646.html
边栏推荐
- Hcip fifth experiment
- 2021 Great Wall Cup WP
- Webapi + form form upload file
- ASP. Net core configuration options (Part 2)
- In embedded system, must the program code in flash be moved to ram to run?
- Ouvrir des contrats à terme, ouvrir des comptes en nuage ou faire confiance aux logiciels des sociétés à terme?
- Use of Shell sort command
- 31. Next arrangement
- Collection of common SQL statements
- [二叉数] 二叉树的最大深度+N叉树的最大深度
猜你喜欢
Use of todesk remote control software
Using quartz under. Net core -- operation transfer parameters of [3] operation and trigger
Tdan over half
01 - get to know the advantages of sketch sketch
PC电脑使用无线网卡连接上手机热点,为什么不能上网
For the space occupation of the software, please refer to the installation directory
2.Electron之HelloWorld
Learning record of uni app dark horse yougou project (Part 2)
2. Electron's HelloWorld
SiteServer CMS5. 0 Usage Summary
随机推荐
圆环回原点问题-字节跳动高频题
ECMAScript history
If you start from zero according to the frame
双闭环直流调速系统matlab/simulink仿真
Halo 开源项目学习(二):实体类与数据表
ros常用的函数——ros::ok(),ros::Rate,ros::spin()和ros::spinOnce()
JVM class loading mechanism
Using quartz under. Net core -- general properties and priority of triggers for [5] jobs and triggers
ASP. Net core configuration options (Part 1)
01 - get to know the advantages of sketch sketch
470. Rand10() is implemented with rand7()
Manually implement simple promise and its basic functions
Qt 修改UI没有生效
122. The best time to buy and sell stocks II - one-time traversal
Clickhouse - data type
01-初识sketch-sketch优势
394. 字符串解码-辅助栈
470. 用 Rand7() 实现 Rand10()
2021 Great Wall Cup WP
Generating access keys using JSON webtoken