Mini programs,

Mini programs,

I haven't written any notes for a long time. I 've been taking notes for half a year since the beginning of 996. It's just a few days ago. By the way, I 'd like to summarize some of the mental processes of developing small programs.

 

Here, by the way, we make an advertisement. the applet name is "one shot is passed ".

 

I have been developing small programs for more than half a year. In fact, small programs are very similar to traditional web development. Of course, there are also many different points. Next I will go to the topic:

The first step to learning applets is to read the official documentation.

First, let's talk about the structure part. The structure part of the code is of course the same as the traditional H5 syntax.

Here, the similarities and differences between H5 and applets must be clear at the front end. The same syntax and different labels are similar to the view label in H5.

Text labels are similar to commonly used text placement labels such as span. The image is equivalent to the enhanced version of the img tag.

Of course, the audience can also see that in addition to different labels, some labels do not have attributes in H5. For example, the mode on the image is used to specify the image filling and cropping methods.

Hidden = "{something}" indicates whether to hide this element. If somthing is true, this element is hidden. Variables are enclosed by {}. Are you familiar with this syntax when you have used a front-end framework?

For example, the hover-class clicking style on the view will not be detailed here. The document provides a detailed description. Just give an example.

The bindtap on view, as its name implies, is bound to a click event.

 

Js section:

Import {something} from "where" // you must be familiar with Page (variables in {data: {// data can be directly bound to the Page structure, the errorView something: '', errorView: false} // The method onLoad () {// to do something this. setData ({something: 'I am the data required for the page, which can be modified with setData'})} todosomething () {let test = 222 }})

 

You must have noticed the onLoad in the above section. Next let's take a look at the life cycle of the Applet:

OnLaunch: applet Initialization

OnLoad: When a page is loaded

OnReady: When page rendering is complete (I personally use less frequently in Projects)

OnShow: When the page is displayed

OnHide: When a page is hidden

OnUnload: When the page is uninstalled

Here, some friends may have some questions about the differences between onShow and onLoad?

OnLoad onReady onShow will be executed when you enter page A for the first time.

In actual business scenarios, the next page is often returned to the previous page.

Wx. navigateTo (OBJECT): saves the current page and jumps to a page in the applet. // The Usage frequency is high.

Note: The current page will be saved through navigateTo, when A-> B returns from B-> A, the code in onShow is executed instead of the Code in onLoad.

Generally, onLoad is always accompanied by onShow, but onLoad may not be triggered in onShow.

 

Style section:

There is almost no difference from the traditional css. Of course, there is still a difference in unit usage ----- rpx (please refer to the official documentation for the specific meaning of rpx)

File structure:

There is a home. json

The applet can modify the title bar style (such as the background color and font color) of the applet, and even include whether to allow pull-down refresh.

 

App. json

Global configuration of the entire Applet

{// For the page to be used, you must register "pages": ["pages/home", "pages/login"], "window ": {// set the window representation on the hosts page "backgroundTextStyle": "# FFF", // drop-down background font, and loading graph style "navigationBarBackgroundColor": "# FFF ", // background "navigationBarTitleText": "One shot is passed", // The title text content of the navigation bar "navigationBarTextStyle": "black", // The title Color "onReachBottomDistance": "500 ", // The distance between the trigger of the bottoming event on the page and the bottom of the page. Unit: px "enablePullDownRefresh": false // set the pull-down refresh}, "networkTimeout": {"request": 20000, // wx. request timeout, in milliseconds. Default Value: 60000 "connectSocket": 20000, // wx. connectSocket timeout time, in milliseconds. Default Value: 60000 "uploadFile": 20000, // wx. the timeout time of uploadFile, in milliseconds. The default value is 60000 "downloadFile": 60000 // wx. downloadFile timeout time, in milliseconds. Default Value: 60000 }}

 

Test part: During the test, please note that if your code is tested on a computer tool, there is no problem, so don't be in a hurry. This only indicates probably/possibly/maybe there is no problem, maybe ~~~! Why? Because the small program has improved a lot from the past, but it is still not perfect. There are many bugs. to test it, you must test and run the entire process on the real machine! Android and IOS Mobile Phones must be tested. due to some reasons of the applet itself and some compatibility problems, this may cause the real machine effects of the same set of codes and styles on different mobile phones on different platforms to be different (in a few cases). Some of them can be avoided by trying other methods, some cannot be avoided. For example, on Android, many apps have user portraits and rounded corners. In many cases, the UI provides a square image. We can set the border-radius by setting the rounded corner.
In this case, when the Android phone first enters the page, the border-radius image is set to square during loading, after the rendering is complete, it is a circle, and the four corners will flash. This process is around S. Another example is 0.0: the small program can use wx. makePhoneCall (OBJECT) called. Three months ago, Huawei's mobile phone was invalid and other mobile phones had no problem. However, this problem could not be simulated on a computer. Another example is: There are some native components in the applet, And the hierarchy is relatively high. In the layout, we have to pay attention to the front-end. Remind everyone to pay attention and sell the Customs: The textarea component is a good thing.
  Tip: Be sure to check the official documents! Zi! Fine! Bug & tiips are generally written at the very bottom of each section! Sometimes, when you have a "BUG" headache, these tips may be the culprit.  The above are traditional mini-programs and some points, which may not be carefully written. Who told me that I am not a professional writer (find reasons for myself), specific features of many mini-programs, you can check the documents on the official website. I will not go into details here.  Finally, in line with the principle of buy one get one, and then explain the last few statements about the mini-program framework.  Recently, our project team has just restructured the applet and used WEPY. What is different from the native writing of the applet is that wepy is a framework of vue and strong components, it is very friendly to the front end because it is "free". See the truth in the figure: In the sense of complementing each other, many pages of our applets are composed of N components. Wepy is still very young, so the accompanying bugs are also a bunch, especially on Android (yes! Android ). On the android real machine, when rendering pages, the rendering of non-component structures is just a flash, while the encapsulated components may be 1-2 seconds when the speed is 0. N seconds slow. After preliminary troubleshooting, it may not be a component rendering problem. Both the structure and style of the encapsulated component and the non-encapsulated component (applet component) are rendered normally at the same time, however, it takes a long time for the field/text in the component to be rendered, and the text is dynamically set by passing the value. Therefore, the current reason is initially determined to be related to the value transfer of the component (the time is tight, and it is not dug deep ). The above content may not be carefully written (not much time, you know the program ...), original code (lei) (a), Do not spray!