In those years, our project team made about 10 versions of + mini-program projects, from the initial big play +, big play phase 2, stimulating people, stealth guardian dubbing to genting achievements, etc., we stepped on a lot of pits. Next, we summarized a wave to avoid beginners into pits.

This summary mainly includes the following three aspects:

  • WXML (WeiXin Markup Language)

  • WXSS (WeiXin Style Sheets)

  • Model adaptation

WXML (WeiXin Markup Language) is a set of tag Language designed by the framework, which can be combined with the basic components and event system to build the structure of the page. WXML components include: basic content component, view component, form component, native component, etc., listed as follows:

The Text component is similar to the SPAN tag in H5 development, but look at the figure below

The ideal is very rich reality is very skinny… The actual effect is as follows:

The view component text cannot have a line break inside the tag. You need to remove the line break inside the tag, otherwise it will break.

2: Slider view container component swiper

When you see this kind of paging effect, you might want to use the widget swiper, but in android 6.0 or later, there are unexpected surprises. The dots are missing! The diagram below:

The method is as follows: the structure and style of small dots need to be customized separately

Next we just need to remove the default black origin and set swiper indicator-dots= “{false}”…. Can be

** Button ::after{none}**

4: Common native components canvas and video with high z-index levels cannot be controlled (displayed on IOS real phone)

Solution:

1: use cover-view cover-image

Disadvantages: 1: All items above the level of video must be placed in the video tag. Of course, labels in the video are also limited and must use cover-view and cover-image~. In this case, labels other than canvas and video cannot be solved

2: Hides native component labels temporarily

When the popover appears, hide the Canvas tag (canvas is directly converted to image), so that the popover will not be blocked by canvas hierarchy

Ii: WXSS (WeiXin Style Sheets)

WXSS (WeiXin Style Sheets) is a Style language for describing the component styles of WXML

The style of WXSS is basically the same as that of H5. Except for the unit RPX, we can directly restore the SIZE of 750 in the design draft by 1:1 during UI development. However, there are some differences with H5 that should be noted

1: background map reference

Background references must be absolute path or base64 or else an error will be reported

2: mask-image is used

When we see the following alien image, in ordinary H5 development, we usually think of mask-image processing, as shown below:

However, in the applet, the image referenced by mask-image must be converted to Base64, otherwise it will not work on the ios real machine

3: Special font reference:

Applet reference font and H5 page is different, must convert font to base64 to call, otherwise Android will not effect font

Emulators and ios perfect:

Step 1: collect the relevant font text used, using font spider compression (spider: font-spider.org/)

2: Convert the compressed fzyansjw.TTF font into Base64. The font conversion site (transfonter.org/) is recommended. The conversion steps are shown below

3: download the required file treasure copy base64 font reference into the style can be

Three: iphoneX adaptation

Why: custom title bar at the top, 24px taller on iphoneX

IphoneX

Other:

Padding-top: calc(constant(safe-area-inset-top)); paddING-TOP: constant(safe-area-inset-top); padding-top: calc(env(safe-area-inset-top));

The above simulator will not take effect, but there is no problem under the iphoneX real machine, the real machine shall prevail!

Conclusion:

  • When it comes to references, if it doesn’t work on the real machine, try converting Base64 validation (mask-image and font)

  • The final effect is based on the actual device (Ios and Android), and pay attention to android versions of earlier versions