Colleague notes - small program entry point

Want to make APP Same thing as WeChat , Can run small programs smoothly ？ | Experience will send you to Xinjiang 、 Huawei 、 Cherry keyboard ！>>>

    1. Small program upload pictures or videos need to be compressed , There are limits to the procedure , The data is too laggy to show up
     Three methods :
         One is to use the official interface wx.compressImage(Object object);
         One is by compressing the size of the image , utilize canvas Redraw to get a compressed image ;
         Finally, install third-party image compression package .
    2.textarea Component keyboard occlusion problem ,, Because it's a problem with native components , Model for this textarea The impact of components is huge , When focusing input, the keyboard blocks the input , Not scrolling up as expected , Compatible solutions can be cumbersome ,（ When the focus is triggered, let it be textarea, It's to let it go for view） Encapsulates a textarea( The principle passes view Tag to replace the status when you don't click input ）
    3. Unit conversion ：
        BaseInfo.winWidth = res.windowWidth / (res.windowWidth / 750);
        BaseInfo.winHeight = res.windowHeight / (res.windowWidth / 750);
        1rpx = ( Device width / 750) px
        1px=2rpx
        1rem=35rpx
    ( Style compatibility is still troublesome , Early typesetting or need to be cautious )
     The screen width of the applet is fixed to 750rpx（ namely 750 Individual physical pixels ）, It's true on all devices ,1rpx=（screenWidth / 750）px, among screenWidth Is the actual width of the phone screen （ Company px）, for example iphone6 Of screenWidth=375px, It's in iphone6 in 1rpx=0.5px
    4. Compatibility of various models , For Android and ios Compatibility is still troublesome , The front layout is still very important , It's better to consider the later compatibility in typesetting ,ipad And the style of mobile phone is also different , therefore px Still need to be precise
    5.video Component problems , Applet video Component can't listen for events that are up and down
        video Components api The document looks like this ：
            tip: video  Component is a native component created by the client , Its hierarchy is the highest , Cannot pass z-index Control level
            tip: Please do not leave  scroll-view、swiper、picker-view、movable-view  Use in  video  Components
            tip: css  Animation is right  video  Invalid component
         Small program video You can't control the hierarchy problem
    6.wxss It can't be used es6 Language
    7.background-image Property only supports connection with network address , Local address has no effect
    8.data assignment , stay js It can be used directly this.data, But it needs to be used in small programs setData To assign
    9. When the development is complete, realize Really can't be in wxml There's too much writing in it style style , Because some of the lower versions of the hand are even incompatible
    10. Try not to use margin-bottom , When the element is at the bottom of the page , stay ios Maybe margin-bottom It will fail , So suggest , All use padding-bottom
    11.wx.navigateTo A new window opens the page The new page has a return button ,wx.redirectTo Close current page , Jump to a page in the app The new page has no return button
    12.view Forced line wrap white-space:pre-wrap;
    13. When the video is enlarged and played, there is no available method for wechat applet , You need to write your own mask , Over the screen , Click the mask to make a pop-up window to enlarge and play
    14. Pictures don't need to be masked and pop-up windows , Wechat has its own available methods
    15. Applet recording pause and natural playback end api The timer can't be turned off
         Click pause ： In the pause method Clear timer   End of natural play ： In the playback timer, judge that the playback time is equal to the recording time and turn off the timer