Is the project portable to applets?

Because wechat provides some components, some of the experience in wechat is really good, for development, data-driven development mode is also quite cool.

summary

The MVVM mode is similar to VUE REACT, focusing on data and logic. The goal of the apPLETS development framework is to enable developers to develop services with native APP experience in wechat in as simple and efficient a way as possible.

The framework provides its own view layer description languages WXML and WXSS, as well as javascript-based logic layer framework, and provides data transmission and event system between the view layer and logic layer, so that developers can easily focus on data and logic.

Official website: wechat small program development tutorial official: wechat small program alliance video: quick start

The template level request wraps user session processing

Experience gained by practice

The rules

1. The size of the packaged file cannot exceed 2 MB; otherwise, the file cannot be uploaded to the wechat server.

Applets are not supported

Sass syntax is not supported. Window and document are not supported. Libraries such as jquery and PreventMoveOverScroll are not supported.

3. Development using SVG tags is not supported. Image SRC in remote SVG or background-image. But you can use canvas tag * (Canvas pit: position absolute layer does not cover canvas) *, you can use libraries: Wx – charts (a hole, put in the app. Js and references in the page, can not find ringChart the above function, such as ringChart. AddEventListener. To reference libraries directly in page. . For wX-Charts to be laid out horizontally, put a view on the outer layer and give the canvas a style of 100% width (not the property width). link

4. PreventDefault is not supported. 5. No BR label. 6. The Table table is not supported. 7. Cannot use   To increase the space between words. WXSS file font face url does not accept HTTP address as a parameter, can accept base64, so you can first download the font file, convert to Base64, and then reference. Link.

New features

1. The img tags into the image tag < image SRC = “http://sfe.ykt.io/o_1bbd2f7j02583ii2rg1p441gvo9.jpg” > < / image >. 2. Text tag recognition \n newline, cannot wrap

tag, will be directly output, similar to textarea. Nth-child (n) starts at 0. 4. The switch label. But you can’t change the size and style, as annoying as the old radio tag. 5. Picker label. But while the options don’t loop in developer Tools, they do in Android Preview.

6. Scroll – the view TAB. A box with a scroll bar. To automatically scroll to a certain point when entering a page, you can use the scroll-into-view property of the scroll-view property, but the setting must be set after the scroll-view exists, especially if referenced by template. For example, using setData to set the value of the template and the scrollin-view at the same time does not make scrolling work.

7. On screen dropdowns: Android doesn’t, iPhone does. DisableScroll Boolean False If this parameter is set to true, the page cannot scroll up and down. This parameter is valid only in page.json and cannot be set in app.json. Link.

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

9. Use Catchtap on function buttons to prevent bubbling

10. The hidden parameter, which controls the mask

tips

1. For pull-down refresh, set enablePullDownRefresh: true onPullDownRefresh in Page. json to manually stopPullDownRefresh. Otherwise, loading will continue.

2. The page onload function has the parameter options to obtain the query of the path

3. The payment of small programs and the payment of wechat are not the same appID, and the ordering interface needs to be newly developed at the back end

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

5. If a new value is undefined, it will not be assigned at all and will not overwrite the previous value. Such as:

app.setData({
    isPaperCollected: finishedQuizList['id'+quizID] || false
})
Copy the code

6. Solve the problem that data cannot be deeply copied by using object.assign ({}) multiple times. Object.assign is not a deep copy.

7. In the wechat Web developer tool, make sure to check “Do not use any proxy and connect to the network directly after checking” in the action > Settings > box. Otherwise, “Failed to Load Resource: NET ::ERR_NAME_NOT_RESOLVED” bug: link is reported

8. Each applet page can also use a. Json file to configure the window presentation of the page. The page configuration is much simpler than the app.json global configuration, just setting the contents of the window configuration item in app.json, which overrides the same configuration item in the window of app.json. Json of the page can only set window-related configuration items to determine the window appearance of the page, so the window key is not needed. Link.

9. Data is set in page, not app.js. Anything that doesn’t involve rendering can be left out of data.

10. Page. The prototype. The setData () change data and update the Page data. The setData function is used to send data from the logical layer to the view layer and change the corresponding value of this.data. Modifying this.data directly does not work, does not change the state of the page, and causes data inconsistencies. A maximum of 1024kB of data can be configured at a time. Do not set too much data at a time.

11. Wx: If is lazy, if the initial render condition is false, the frame does nothing and starts partial rendering only when the condition first becomes true. 12. Adding the display attribute to the tag will invalidate the hidden. SetData {writable: false, Enumerable: false, different information: {writable: false, 64x: 64x}} Value: false, ƒ.. }, if you want to reset the setData method (such as internationalization), you need to make a special case for this:

/** * This. SetData, writable, works without any additional component, and runs without any additional control system. The setComData, freely writable, works without additional control. Since the setTransData method in langdata.js calls setData, a separate setComTransData method is defined to call setComData */ for pages using child components
letisUsingComponents = ! self.__proto__.hasOwnProperty('setData') && self.__proto__.__proto__.hasOwnProperty('setData')

let _ = self.setData

if(! isUsingComponents) { self.setData =function(data, isSetTrans = false){
    _.call(self, data)
    if (isSetTrans) {/* Prevents the translation loop from calling setData */return; } langData.setTransData && langData.setTransData.call(self) } }else {
  self.setComData = function(data, isSetTrans = false){
    _.call(self, data)
    if (isSetTrans) {/* Prevents the translation loop from calling setData */return; } langData.setComTransData && langData.setComTransData.call(self) } }Copy the code

14. If there is undefined field in setData, the warning message in the real machine will be null

Session management

Wechat’s web request interface, wx.Request (), does not carry Cookies, making traditional session management based on Cookies no longer applicable. Session management uses appellate session-client to enable services that handle appellate apps to recognize sessions. This requires support on the server side. The basic idea is to wrap wx. Request and use special field tracing on the Header.

Error: regeneratorRuntime is not defined Because the Generator function is not supported. Solutions:

  • The wechat developer Tool is switched from ES6 to ES5
  • The real solution is to provide regeneratorRuntime link 1 — link 2

When processing session management, the back-end of this project requires that the same X-WX-code should not be used to send all header data, RawData, Signature, etc., for multiple times, otherwise an error will be reported. Therefore, if you use app.js and page.js in sequence, additional requests must be sent after the login returns. However, WX request is asynchronous. So it’s possible that the request in the page will start executing before the login in app.js has finished, causing a bug. You can use a promise to fix it.

The advanced

1. Expand the functions of wechat applet framework

2. Question: Will the wechat account switch destroy the small program

3. Check the TLS version www.dongcoder.com/detail-4106… Solution: Wechat developer tools check the TLS version or back-end configuration without checking during development

4. Bluetooth and vibration call

5. Mask processing exercises related masks: Belong to the active control class mask, there may be a level 1, level 2 mask cover, There will not be 3 level masks at the same time (such as thumbnails) directly send masks click on the screen to return to the page button to enter the bar chart select the time button mask click on the screen to return to the page button to enter the bar chart Bar chart Mask To return to the page for details Mask To return to the bar chart Mask to further classroom red envelope mask Do not reward return page (can be changed to return bar chart) reward confirm payment mask payment, successful payment, failed mask red envelope list page

Papers related to mask: active control class mask paper mask selection page Return to the page History papers published Returns the selection page Test the answer is in the mask Released according to the route back to history page or select (check history release is returned, the new release is returned selection page) exam answer for details Returns the answer page The relationship between refresh, timer