Summary of knowledge points on WeChat mini programs

subPackages Subpackage loading

Because the main package size of the mini program does not exceed the 2M limit, it is a good choice to use subpackage. The total subpackage size does not exceed 8M. You can add multiple Sub-package, sub-package loading can optimize the download time when the mini program is first started. When you enter the sub-package page and then download, this on-demand loading can extract some large amounts of data and put it into sub-packages (such as the chart)

rpx unit,

The most commonly used adaptation method for mobile terminals is to use rem or vw as the unit for adaptation, so the WeChat applet provides rpx The unit adapts

Authorization pop-up window

wx.getUserInfo interface adjustment. In the past, you could directly call and display the authorization pop-up window. Now you need to use Click to guide the user to authorize. The official version of the wx.getUserInfo interface of the mini program has been adjusted. The trial version and development version can still use the original method.

Native component z-index

The level of the native component is the highest, so no matter what the z-index is set to, other components in the page cannot Covering the native components can be solved by cover-view, but in some specific environments such as swiper or pop-up windows, the native components need to be hidden and hidden. You need to use hidden to use

pseudo-elements

The pseudo-element attributes of the mini program cannot be seen in the WeChat developer tool css attributes, so when some component styles cannot be overridden (such as the border of a button or some line settings), it is because the pseudo-element ::after is set, so pseudo elements must be used to cover

Page stack

An application can only open 5 page stacks at the same time. When 5 have been opened After the page is opened (the current limit is 10 levels), new pages may not be opened normally. wx.navigateTo jump will retain the current page, wx.redirectTo will not, so please avoid multi-level interactions to use the jump method appropriately

Componentization

emplate module and component component are components in small programs. The difference between the two is that the template module is mainly for display, and the methods need to be defined in the page using the template. The component component has its own js file, and the entire component component is similar to a page. To put it simply, it is just for display. It is recommended to use template. There is a lot of logic involved in the component. It is recommended to use component

Debug

1. Developer tool source break Click debugging, console.log to print data and AppData to view data

2. Mini program pay attention to the current debugging basic library version to debug some compatibility and bug issues

3. Mini program is first in the development version Or open the debugging display vConsole in the upper right corner of the trial version, and then switch to the official version to see the vConsole mode

Data transfer

1. Use data cache, wx.setStorage With wx.getStorage, the stored data can only be in string format, so generally you need to use JSON.stringfy to convert the object to a string when setting it up, and use JSON.parse to restore it to the object when getting it

二, wx.navigateTo jumps to pass parameters, and splices the string after jumping to the url. In the onLoad() function, obtain the passed parameters through options.parameter name. Note that if there are special characters (such as ?#, etc.), you can Use encodeURIComponent and decodeURIComponent to encode and decode, otherwise it will be truncated, resulting in the data behind the special characters not being transmitted

3. The getCurrentPages() function is used to obtain the instance of the current page stack. You can obtain the page stack or Modify page stack data

4. getApp() can obtain global objects and methods

Navigation bar capsule alignment adaptation

The navigation bar is generally customized, which is more flexible and controllable. First, you need to set navigationStyle: custom in app.json, and then use the mini program wx.getMenuButtonBoundingClientRect() to obtain the location information of the capsule menu in the upper right corner, but this interface is unstable. , some models will have a bug that fails to obtain, so use wx.getSystemInfo to get the status bar height of the device (that is, the height of the mobile phone time and battery column), the title bar height (that is, including the navigation return key, title and capsule Height) The default setting is 48 for Android and 44 for ios (the default capsule of the applet is 48px in the center of the title bar in Android. Because there are many Android categories, there will be a slight difference. The ios is 44px in the center of the title bar). The total height of the navigation bar The height of the title bar is the height of the status bar. The padding-top height is the height of the status bar. The elements in the title bar are vertically aligned to fit and align with the capsule. When setting the content height, you can use calc (100vh - the total height of the navigation bar) to change the style. Place it in the global app.wxss

unionid identification

Unionid is the cross-program identification of mini program users. To have a unionid, you first need to bind the WeChat open platform (WeChat open platform - management platform - mini program - bind mini program), because the unionid is distributed by the WeChat open platform. When the mini program is bound to the WeChat open platform, there will be no unionid. When the unionid of different mini programs is different, the mini program needs to be mounted to the same subject. For the same user, for different applications under the same WeChat open platform, the unionid are the same

The background returns the unionid to the front end: first wx.login obtains the user login credential code, then wx.getSetting checks whether it is authorized, wx.getUserInfo obtains the user information, and sends it to the background through the encrypted field of the user information The WeChat server returns the unionid in return. Since the data returned by the request may be returned after Page.onLoad, a callback is usually added (getting the unionid is usually placed in onLaunch of app.js, so a callback is needed to process it and the data of the page onLoad. Obtain)

Interface request

It is recommended to extract all requests into the same api.js, which can facilitate later modification and troubleshooting. Mini program requests are made through The WeChat backend requests our backend address for backend mapping. The interface you requested is actually mapped to the WeChat backend. The WeChat backend gets the URL called by your wx.request and uses the backend to request the backend. So there will be no cross-domain problems

input keyboard

Consider using different types in different scenarios, such as text keyboard and numeric keyboard to improve user experience

wux-weapp

Wux-weapp is more recommended for small program components. It has rich components and flexible expansion.

Recommended tutorial: "WeChat Mini Program"

The above is the detailed content of Summary of knowledge points on WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!