Record the growth of the front end of the small white ~ wrote a lot of small procedures, with the original written, framework written, of course, encountered many pits. It is inevitable to encounter the problem of parameter transfer, but when the bottom menu of the small program jumps, it is not possible to take parameters. Workaround: Add data to global data app.js before jumping to pages that need to pass parameters. The page that needs to accept the parameters is the data that was added to app.js before the onShow method received it

2. Small program HTTPS deployment, and set up legal domain This question is really gave me a pit, small program development process, I do not set check domain, request the local interface data, open development debug data, but online after all the data are all empty, check the data just know is not configured small application environment. Solution: Small program environment requires HTTPS support, configure a legitimate domain name.

3. WXSS file does not support local image page style, can not avoid adding background image, according to the web development thinking, background: URL (local image path) or set in background-image: local image path, but it is not feasible in wechat applet. Background-image of wechat applet only supports network images. You can put the image on the server, or use Base64 transcoding.

Four. Micro channel small program using POST method request just began to write small program, was this problem pit. Wx.request () request is initiated by wechat applet. Generally, there is no problem with get method request, but when using POST method request, there is easy to solve the problem: Wx.request () requires a header when the post method is used. The header[content-type] value is Application /x-www-form-urlencoded; otherwise, the request fails to be returned. (A unified approach to encapsulating requests is best)

When designing WXSS style, try to use RPX unit. RPX unit is the size unit of CSS in wechat mini program, and RPX can be self-adapted according to the screen width. However, there are special cases. Sometimes we cannot use RPX. For example, when we use Canvas, we can only use PX as the unit. Solution: Use the Wx.getSystemInfo API to get the width and height of the screen on which the phone is running, and then scale the width and height of the screen based on the UI map.

In the image label, if only the width of the image is set in the style, but the height of the image is not set, or the height is set to Auto (automatic) 100%, the image will not be displayed, you must specify the height of the image to display. But the picture setting fixed width height is easy to stretch deformation. Solution: The image tag encapsulates the mode attribute, which can be set as required (widthFix, aspectFill, scaleToFill, aspectFit).

Cavans, Map, Vedio, etc. If you want to overlay components on native components, adding view,text,button is not possible, you must use cover view and cover image components. For specific usage, please refer to the official document of wechat applets. However, the cover-view has a lot of holes, which is not very friendly to CSS support. Although we have no problems setting the background color, font size, width and height, the following issues should be noted 1. In Web development, if we want to set a stripeout for text, we can do this using text-decoration, the cover-view does not support this property. Text-align: center; text-align: center; line-height: 100rpx; 3. Cover image SRC does not support.svg. 4 File display and so on

In Web development, you can use getElementById() to access an element in Documnent. You get the element by ID, but wechat applet doesn’t have Windows objects, so applet can’t directly manipulate the DOM tree. Small programs are MVVM design mode, data binding. This is similar to vue.js.

The onPullDownFresh function can be added to a page that needs a pull-down refresh, regardless of whether the onPullDownFresh method is written or not. Wx.stoppulldownrefresh () should be added to stop the pull-down refresh, otherwise the real display page will not bounce back!

It is very simple to integrate the map function with wechat small program, but it should be noted that we are using The Tencent map, that is, THE GCJ02 coordinate system. If the background is using other coordinate systems, then we need to convert. If the navigation function needs to be realized, the map component in the small program does not have this ability, so we need to call wx.openLocation to realize it. In fact, this API opens Tencent map built in wechat, which is the wechat navigation service we are familiar with. You can open Baidu Map and Autonavi map in the mobile phone here. Tencent map these apps to carry out navigation.

SetData and this.setData can change the data in WXML, but this. SetData assignment can change the data in WXML, which is to update the rendering interface simultaneously.

NavigateTo wx. RedirectTo Wx. NavigateBack wx. NavigateBack wx. RedirectTo wx. Wx. navigateTo and wx.redirectTo open a new page, wx.navigateBack is used to return to the previous page (the page in the stack). Wechat mini program in order to avoid users’ troubles when using the mini program, the page path can only be five layers, please try to avoid multi-layer interaction. Therefore, there is an official limit here (maximum five levels). But the five restrictions apply only to navigateTo, not redirectTo. The getCurrentPages() function is used to get an instance of the current page stack, in stack order, with the first element being the home page and the last element being the current page. This allows you to retrieve data without increasing the number of elements in the stack, reducing navigateTo usage

//A Page({data: {userName:' '
    },

    getBackData: function(name){
        this.setData({
             userName: name
         })
    }
})

Copy the code
{edtinputName: {edtinputName:function (e) {
        var name="Zhang";
        var pagelist = getCurrentPages();
            if(pagelist.length > 1){var prePage = pagelist[pagelist.length - 2]; prePage.getBackData(name); wx.navigateBack({ delta: 1 }) } })Copy the code

The above is me as a front-end small white in the development of micro channel small program project encountered some pits and summed up some experience, summary is not comprehensive, but also referred to some big man’s article, do not like spray, mercy ~~