Notes on wechat applet development

Recently, I just came into contact with small program development , In addition to official documents , Also referred to WeChat official account “ tiny little Program ”, Related video explanation of .

1. JSON grammar

JSON The value of can only be in the following data formats , Any other format will trigger an error , for example  JavaScript  Medium  undefined.

 Numbers , Contains floating-point numbers and integers 
 character string , Need to wrap in double quotes 
Bool value ,true  perhaps  false
 Array , Need to be wrapped in square brackets  []
 object , Need to wrap in braces  {}
Null

PS： The other thing to note is that  JSON  Cannot use comment in file , An attempt to add a comment will result in an error .  

2. wxss

3. Unit of measure

rpx： The specified screen size is  750rpx
rem： Set the screen width to  20 rem
 Above is  wxss  Aim at  css  Extended  2  Units of size , In addition, the original  css  All dimension units can also be used , Such as px（ Pixels ） etc. .

4. Several common properties

bcakground： The background color
font-size： font size
color : The font color

5. wxml

 Data binding 

6. wx:for

In the new version of the development tools ,for Examples of the use of recycling are as follows , There are two ways , Can be used ：

<block wx:for="{
   {imgUrls}}" wx:key="*this">

<view wx:for="{
   {items}}" wx:for="index" wx:key="item">
	{
   {index+1}}、{
   {item.title}}
</view>

7. setData How to use

switchCondition: function(){
    this.setData({
      condition: !this.data.condition
    })
  },

8. If the object's key and value identical , It can also be expressed indirectly

Such as {foo:foo, bar:bar}
The quotation can be written as follows ：data="{ {foo,bar}}"

9. wxml In the template （template）

10. event

 Two ways of event binding ：
bind  Events will bubble , Does not prevent the transmission of events 
catch  Events don't bubble 

 Common bubbling events ：
touchstart   Finger touch 
touchmove	 Move after finger touch 
touchcancel	 Finger touch action is intended , Such as call reminder , Pop-up, etc. 
touchend 	 End of finger touch 
tap			 Touch your fingers and leave 
longtap		 After touching the fingers , exceed  350ms  Leave again 

target：		 The source component that triggered the event 
currentTarget：	

11. quote

wxml  There are two ways to reference files  import  and  include.
import:  You can use the... Defined by the target file in this file  template
include： You can remove the target file from <template/>  The entire code is introduced , So copy it to  include  The location of 

12. The Internet

 Relevant instructions before using the network ：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html
 There are several points that need special attention ：
1） Each wechat applet needs to set the communication domain name in advance , The applet can only communicate with the specified domain name and network .
2） Domain name only supports  https (wx.request、wx.uploadFile、wx.downloadFile)  and  wss (wx.connectSocket)  agreement ;
3） Skip domain name verification 
 In wechat developer tools , It can be opened temporarily   The development environment does not verify the requested domain name 、TLS Version and HTTPS certificate   Options , Skip server domain name verification . here , When debugging mode is enabled in wechat developer tools and mobile phones , The server domain name verification will not be performed .

 After the server domain name is configured successfully , It is recommended that developers turn off this option for development , And test under each platform , To confirm that the server domain name is configured correctly .

13. webSocket:

wx.connectSocket(OBJECT)
 Create a  WebSocket  Connect ; A wechat applet can only have one at a time  WebSocket  Connect , If there is already a  WebSocket  Connect , Will automatically close the connection , And again 
 Create a  WebSocket  Connect .
1.7.0  And above , Can exist at most at the same time  5  individual  WebSocket  Connect .
 A reference case ：https://www.cnblogs.com/imstudy/p/9224604.html
 The official documents are also more detailed 

14. Configuration for playing background music

 If you need the applet to continue playing audio after backing out to the background , You need to  app.json  Middle configuration  requiredBackgroundModes, as follows ：
{
	"window": {
		"backgroundTextStyle": "light",
		.....
		"enablePullDownRefresh": true
	},
	"requiredBackgroundModes": [
		"audio"
	]
}
 Links to more global configurations ：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

15. Application for applet location permission

 stay app.json Add the following code to ：
"permission": {
	"scope.userLocation": {
	  "desc": " Your location information will be used to show the effect of the applet location interface "
	}
 }

16. Sign in

1. Login time ,code  Exchange for  session_key, It should be developed according to the actual project .

17. Listen to the built-in pull-down refresh event

First , In the corresponding json Add... To the file "enablePullDownRefresh": true
secondly , stay js In file , Add the following ：

onPullDownRefresh: function () {
    // I am right. onLoad Method was reloaded , You can do something else 
    console.log("onpullDownRefresh")
},

After the end , Call end refresh time wx.stopPullDownRefresh()
18. margin and padding

padding:30rpx 0 20rpx 0;   --  On   Right   Next   Left  , clockwise 

19. vw、vh adapter

Percentage is the percentage relative to the parent control . The above units can be used in case of percentage failure .
vw and vh yes css3 New units in , It's a kind of window unit , The same applies to applets .

Small program , The window width is fixed to 100vw, Divide the window width evenly into 100 Share ,1 Yes 1vw
Small program , The window height is fixed to 100vh , Divide the window height into 100 Share ,1 Yes 1vh
therefore , We can also use in applets vw、vh Use as a unit of size to lay out in a layout , But in general , percentage +rpx It's enough to use , So they have very few chances to play .
link ：https://blog.csdn.net/liyi1009365545/article/details/78542707

20. pages

Used to specify which pages the applet consists of , Each item corresponds to a page route （ Include file name ） Information .
The file name does not need to be suffixed , The frame will automatically search for the location .json, .js, .wxml, .wxss Four files are processed .
The first item in the array represents the initial page of the applet （ home page ）.
Add... To the applet / Reduce pages , All need to pages Array to modify .

21. button Remove the border

If single pair button Set style or border：none, You can still see on the interface button There is still a pixel border on the edge of the , The reason lies in its button:after Method .

So we have to rewrite ::after Method , Remove the border , as follows ：

/* Use  button::after{ border: none; }  To remove the border */
.btn-bordernone{
  background: none !important;
  color: #000 !important;
}
.btn-bordernone::after{
  border: none;
}

You can see that this attribute is overwritten by our overridden attribute , So the border disappears .

22. Value transfer and reading between different interfaces data The value in

Transfer values from different interfaces ： 'path?key=value&key2=value2'
js Intermediate transfer data Value ： this.data.valueName