Pitfalls encountered in converting uniapp to WeChat applets

Summary of experience in the process of converting uniapp to WeChat applets: Generally speaking, for pages that are smaller and have uncomplicated functions, compared to using WeChat applet syntax to make applets, uniapp production is relatively fast, and uniapp is larger than WeChat applets in terms of functional components. with components. uniapp is not as strict as the WeChat applet in grammar verification. The problems encountered in the self-made process are summarized as follows:​

1. Icon does not support some formats, it is better to import all formats, transfer to WeChat without error.

2. When v-if is compiled, it is controlled by display: none\block on the side of the applet, so the use of positioning will cause confusion in the box, and the distance and size are not easy to control, so try to use v-if as much as possible One more box to fit better.
When v-show uses this, although the applet also uses display: none\block to control, there will be a weight problem of the css selector. If you use v-show to control it, the control box will not take effect and other issues, so try to avoid using v-show to control the box

If it has been turned around, add a layer of view to the original v-show dom, using data hidden

3. The placeholder in the input must be assigned a value, such as: placeholder: " ", otherwise it will be converted to placeholder as true

4. Canvas pages with external links are not supported. If external links are required, the WeChat applet can access external links

5. It is best to write all selectors as class, which is not friendly to other selectors.

6. Load the image of the external link, and add a wx:if to the image tag, as follows:

<image wx:if="{
   
   {showImage}}" src="/image/Weatherpic/{
   
   {now.cond_code}}.png"></image>

Define showImage:0, showImage=1 in onShow, display pictures

7. Component attributes must be assigned, such as: <uni-datetime-picker
v-model="datetimerange"
type="datetimerange"
returnType="timestamp"
start=""
end=""
rangeSeparator="to"
/>

By converting into a small program, start='' will be converted into start. There will be bugs without initial assignment and cannot be selected

8. The input box disappears when the text is typed in, and the attribute is added to the input: always-embed="true" or the outer height is canceled

Reference: When the input keyboard pops up, scroll the page, and the content of the input box is misplaced | WeChat Open Community

9. When the input box is entered, the input content moves up, and it is enough to add height:100vh;overflow:hidden;overflow-y:auto; to the parent view

10.has not been registered yet error report First resolve all errors, the referenced data must have an initial value

11. Component is not found in path "pages/index/group" (using by "pages/index/index") reports an error. When the path is imported correctly, add "component": true; (as Imported subcomponents)

12. uniapp prevents event capture and bubbling @touchmove.stop.prevent="", the function must be written later, the function can do nothing, otherwise there will be problems, the correct format @touchmove.stop.prevent='donothing'

13. From uniapp to WeChat applet, the child components will be packaged and compressed into the parent component

14. WeChat applet only supports mqtt4 version

to be continued. . . .

Guess you like

Origin blog.csdn.net/hmily43/article/details/127124391