Shulou(Shulou.com)06/01 Report--

This article mainly introduces the example analysis of WeChat Mini Programs's development practice, which has a certain reference value. Interested friends can refer to it. I hope you will gain a lot after reading this article.

Mini Program because Wechat provides some components, some experiences in Wechat are really good, and the data-driven development model is also good for developers.

A brief introduction

In fact, it is similar to VUE REACT's MVVM schema, focusing on data and logic.

The goal of the Mini Program development framework is to enable developers to develop services with a native APP experience in Wechat in as simple and efficient as possible.

The framework provides its own view layer description language WXML and WXSS, as well as a logic layer framework based on JavaScript, and provides a data transmission and event system between the view layer and the logic layer, which allows developers to easily focus on data and logic.

Experience gained from practice

Rules

1. Currently, the packaged file cannot exceed 2m, otherwise it cannot be uploaded to Wechat server.

Mini Program does not support

1. Sass syntax is not supported

two。 Window and document are not supported, and related libraries, such as jquery and PreventMoveOverScroll, cannot be used.

3. Direct use of svg tag development is not supported. Image's src can be put into a remote svg, or in background-image.

But you can use the canvas tag (canvas pit: position absolute's layer can not cover canvas), you can use the library: wx-charts (there is a pit, put in app.js and then referenced in page, can not find the function above ringChart, such as ringChart.addEventListener. To reference the library directly in page.) .

4. Blocking default events is not supported, there is no preventDefault.

5. There is no br tag.

6. Table tables are not supported.

7. Cannot be used to increase text spacing.

8. The url of Mini Program's xxx.wxss file font-face does not accept the http address as a parameter, but can accept base64, so you can download the font file, convert it to base64, and then reference it. Link.

New features

The 1.img tag has been replaced with the image tag.

2.text tags recognize line wrapping, cannot wrap tags, and will be output directly, similar to textarea.

3. In Mini Program: nth-child (n) starts with 0.

4.switch tag. But you can't change the size and style, as annoying as the old radio tag.

5.picker tag. However, the options do not loop in the developer tool, but in the Android phone preview.

6.scroll-view tag. A box with a scroll bar. To scroll somewhere automatically when you enter the page, you can use the scroll-into-view property of scroll-view, but the setting will not take effect until scroll-view exists, especially if referenced by template, such as setting the value of both template and scroll-into-view through setData, will not make scrolling take effect.

7. About the screen drop-down: Android won't, iPhone will. It can be solved through configuration: if disableScroll Boolean false is set to true, the page as a whole cannot be scrolled up and down; it is only valid in page.json and cannot be set in app.json. Link.

8.template tag

The scope of the template: the template has its own scope and can only use data passed in by data.

9. Use catchtap on function buttons to prevent bubbling

10.hidden parameter, a sharp weapon to control the mask

Tips

1. About drop-down refresh

To set enablePullDownRefresh: true in page.json

StopPullDownRefresh manually in the onPullDownRefresh, otherwise it will be loading all the time.

The parameter options in the onload function of 2.page can get the query of the path.

3. Mini Program pay and Wechat pay are not an appid, but require new backend developers to issue orders.

4.wxml is best edited in developer tools (with hints). Js, wxss can be edited in a familiar editor.

5. If the new value assigned in Mini Program is undefined, it will not be assigned at all and the previous value will not be overwritten. Such as:

App.setData ({isPaperCollected: finishedQuizList ['id'+quizID] | | false})

6. Through the repeated use of Object.assign ({}) to solve the problem that data can not be copied deeply after data is also modularized.

Object.assign is not a deep copy.

7. In the Wechat web developer tool, be sure to check "do not use any agents, check the box and connect directly to the network", otherwise you will always report "

Bug of Failed to load resource: net::ERR_NAME_NOT_RESOLVED: link

8. Each Mini Program page can also use a .json file to configure the window performance of this page. The configuration of the page is much simpler than the global configuration of app.json, just setting the content of the window configuration item in app.json, which overrides the same configuration item in app.json 's window. The .json of the page can only set window-related configuration items to determine the window performance of this page, so there is no need to write the key window

9.data is set in page, not in app.js. Don't put it in data if it doesn't involve rendering.

10.Page.prototype.setData () changes the data while updating the page data.

The setData function is used to send data from the logical layer to the view layer while changing the value of the corresponding this.data. Directly modifying the this.data is not valid, cannot change the state of the page, and will cause data inconsistency. The data set at a time cannot exceed 1024kB, so try to avoid setting too much data at one time.

11.wx:if is lazy, and if the initial rendering condition is false, the framework does nothing and starts local rendering only when the condition becomes true for the first time.

Session management

Wechat's network request interface wx.request () does not carry Cookies, which makes the traditional Cookies-based session management no longer applicable. In order to enable the service that handles WeChat Mini Programs to recognize the session, we use weapp-session-client for session management. This requires the support of the server. The basic principle is to wrap wx.request and use special field tracking on Header.

Problems encountered in use:

1. Wechat developer tool error: Uncaught ReferenceError: regeneratorRuntime is not defined

The reason is that the Generator function is not supported.

Solution:

Wechat developer tool closes ES6 to ES5

The real solution is providing regeneratorRuntime

two。 Digression: make good use of Promise

When dealing with session management, the backend of this project requires that you cannot use the same X-WX-Code to send all header data, RawData, Signature, etc., otherwise an error will be reported.

So when logging in with weapp-session-client, you have to wait for login to return before sending other requests.

The configuration in app.js and page.js is executed sequentially immediately after Mini Program is loaded, but the wx request is asynchronous, so it is possible that bug will occur before the login in the app.js starts execution of the request in page.

You can use a promise to solve it.

Thank you for reading this article carefully. I hope the article "sample Analysis of WeChat Mini Programs's Development practice" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.