[Original] troubleshooting of small program common problems and small program Common Problems

[Original] troubleshooting of small program common problems and small program Common Problems
Directory (updated to 201701130)

• FAQs
• How to Adapt pages
• How to correctly use the image Tag
• How to disable page sliding
• Local resources cannot be obtained through WXSS. How can this problem be solved?
• How to skip a Applet
• Restriction on the wxss-Selector
• How to wrap a br label without html
• Scroll-view tag bug
• How to simulate the hover effect of the touch button
• How to copy text on a Applet
• Which version supports the small program code?
• Do not add the css3 style for low-end machines such as iPhone 4-The webkit prefix style is invalid
• In android phones, the form input label uses the css attribute color and sets the value to rgba, leading to white screen

 

FAQ how does a applet adapt to a page?

The applet provides the Response Unit rpx (responsive pixel), which specifies that the screen width is 750rpx and the visual draft width must be px. Then, based on the visual draft unit, how much rpx will be written when it is restored to a small program?

 

How to correctly use the image Tag

Please click to view this document

Http://km.oa.com/group/22440/docs/show/164131

 

How to disable page sliding

Method 1: Change the parent label to scroll-view.

Wxml

<Scroll-view> input content </scroll-view>

Wxss

scroll-view{
width:100%;height:100%;}

Method 2: Set the disableScroll attribute of the page. json file to true.

{"NavigationBarTitleText": "title", "disableScroll": true}

 

Local resources cannot be obtained through WXSS. How can this problem be solved?

Background-image: You can use external links or use base64 directly.

Wxss

. Test1 {background-image: url (data: image/png; base64, iVBORw0K ...)}
. Test2 {background-image: url (http://mat1.gtimg.com/www/images/qq2012/qqLogoFilter.png );}

How to skip a Applet

Method 1: add an image containing the applet code to wx. previewImage (OBJECT). Click Preview image and press it to recognize the QR code of the applet and jump to the applet.

Method 2: Use wx. navigateToMiniProgram (OBJECT) provided by client 6.5.9 to open another applet associated with the same public account.

 

Wxss-restriction on Pseudo-class selector

Currently, only the following pseudo classes can be used: before,: after, first-child, and last-child, attribute selector, adjacent selector, sibling selector, sub-selector, pseudo-class selector, please give up.

 

How to wrap a br label without html

Enter directly for text wrapping.

 

Scroll-view tag bug

1. If the style of the first label contains position: absolute, the overall style will become invalid.

2. Set the flex layout on scroll-view, where align-items: the child element of the center is invalid.

 

How to simulate the hover effect of the touch button

Method 1: You can directly use the css pseudo class: active for the touch effect of all labels.

.btn{background-color:red;}.btn:active{background-color:blue;}

Method 2: the buttons and navigator of the applet contain the hover-class attribute. You can also use them to set the button touch effect.

<Button type = "default" hover-class = "other-button-hover"> default </button> <navigator url = "/page/navigate" hover-class = "navigator-hover"> jump to the new page </navigator>

 

How to copy text on a Applet

Use the text label for the text to be copied and set the selectable attribute to true.

<Text selectable = "true"> copy me copy I copy me </text>

Which version supports the small program code?

6.5.7 and later versions that support scanning and identifying small program codes

Https://mp.weixin.qq.com/s/Vi4Uyg-8CWL_F92B1KaGIw
The following figure shows the statistics on the small program code:
For IOS: 30.87%
Android: 21.71%
Total: 24.05%

Therefore, it is best to use common QR codes for materials laid offline.

 

Do not add the css3 style for low-end machines such as iPhone 4-The webkit prefix style is invalid

, Flex, transform because no-webkit prefix is added, the page of iPhone 4S is out of order

 

In android phones, the form input label uses the css attribute color and sets the value to rgba, leading to white screen

, The input label is set to color: rgba (0, 0, 0, 0.87). text cannot be seen after the input content of the form.