One app completes the introduction (II) – building the main framework

Time:2022-1-9

One app completes the introduction (II) – building the main framework

Through the first lesson, you have mastered how to debug with the designer on the PC through the debug debugger to view the UI design effect and debug the code in real time. Next, through a series of demo development teaching, you will soon learn how to develop a real app.

To develop an app, the most important thing is to determine the main framework. A good main framework can reduce the workload and simplify the code, and the page usually needs the UE design of product personnel and the UI design of art workers, as shown in the figure below. The function can be realized only after these two steps are completed. Due to space constraints, this tutorial will not repeat how to design UI and UE, Directly through the development of a simulated wechat homepage page to do the demonstration.

For a complete demo, please refer toDownload address, you can import it into the designer to learn the tutorial:
After downloading to the local, unzip it to a directory

One app completes the introduction (II) - building the main framework

Select file import deviceone existing projects into workspace in the designer, click next, select the directory just extracted, and click next again to import the complete demo into the designer.

One app completes the introduction (II) - building the main framework

In the previous tutorial, fromHello worldAt the beginning, you have learned how to create a project. You can use the project directly here.

First, expand the project hierarchy in the IDE

One app completes the introduction (II) - building the main framework

app. JS is the entry script environment of the whole project. Double click the file to enter editing on the right. Note that app JS is special. If you want to use deviceone components in this file, you need to first require (“deviceone”), as shown in the first sentence of the code, while others JS scripting environment can be used directly without reference. In this script environment, what we need to do is to open a new page. What we need to call is the openpage method of APP component. Openpage has a total of eight parameters. Here we briefly introduce three of them. See the usage of other parameters for detailsOpenpage of app。 The meaning of the whole code here is to define an SM class firstComponent classificationIntroduce the app, and open a new page in the app’s loaded event. The loaded event will be triggered when the app is started, so we write the opening of a new page here. The source parameter of openpage method represents the address (absolute path) of the page to be opened; The statusbarstate parameter indicates the status displayed in the top status bar. Here, transparent is selected. This setting allows you to open the index The UI page displays a full screen effect on the mobile phone, that is, hide the top status bar of the mobile phone; The animationtype parameter indicates the transition animation type when the page is opened. Here, select fade fade in and fade out, so that the transition animation can be opened to index UI page.

Then we double-click to open index UI, enter the UI view for editing.

One app completes the introduction (II) - building the main framework

All pages are displayed through the UI file, as shown in the green box above; If you need to add UI components, just drag and drop the components in the components list (shown in the red box) to the UI canvas. The yellow box outline shows the hierarchical relationship of the current page. The lower components in the outline will be displayed on the upper layer of the page.

After a brief analysis of the main interface, the size of the whole project is 750×1334 of the iPhone 6, which is divided into upper and lower parts. At the bottom is a bottom bar navigation bar, and above is the interface that switches with the bottom navigation

One app completes the introduction (II) - building the main framework

Jonh.Felix
Stay hungry Stay foolish

One app completes the introduction (II) – building the main framework

Through the first lesson, you have mastered how to debug with the designer on the PC through the debug debugger to view the UI design effect and debug the code in real time. Next, through a series of demo development teaching, you will soon learn how to develop a real app.

To develop an app, the most important thing is to determine the main framework. A good main framework can reduce the workload and simplify the code, and the page usually needs the UE design of product personnel and the UI design of art workers, as shown in the figure below. The function can be realized only after these two steps are completed. Due to space constraints, this tutorial will not repeat how to design UI and UE, Directly through the development of a simulated wechat homepage page to do the demonstration.

Please refer to the download address for the complete demo, which can be imported into the designer for learning. Import tutorial:
After downloading to the local, unzip it to a directory

Select file import deviceone existing projects into workspace in the designer, click next, select the directory just extracted, and click next again to import the complete demo into the designer.

In the previous tutorial, you have learned how to create a project from Hello world. You can use the project directly here.

First, expand the project hierarchy in the IDE

app. JS is the entry script environment of the whole project. Double click the file to enter editing on the right. Note that app JS is special. If you want to use deviceone components in this file, you need to first require (“deviceone”), as shown in the first sentence of the code, while others JS scripting environment can be used directly without reference. In this script environment, what we need to do is to open a new page. What we need to call is the openpage method of APP component. Openpage has a total of eight parameters. Here we briefly introduce three of them. For the usage of other parameters, see app openpage. The meaning of the whole code here is to first define an app introduced by SM component classification, and open a new page in the app’s loaded event. The loaded event will be triggered when the app is started, so we write the opening of a new page here. The source parameter of openpage method represents the address (absolute path) of the page to be opened; The statusbarstate parameter indicates the status displayed in the top status bar. Here, transparent is selected. This setting allows you to open the index The UI page displays a full screen effect on the mobile phone, that is, hide the top status bar of the mobile phone; The animationtype parameter indicates the transition animation type when the page is opened. Here, select fade fade in and fade out, so that the transition animation can be opened to index UI page.

Then we double-click to open index UI, enter the UI view for editing.

All pages are displayed through the UI file, as shown in the green box above; If you need to add UI components, just drag and drop the components in the components list (shown in the red box) to the UI canvas. The yellow box outline shows the hierarchical relationship of the current page. The lower components in the outline will be displayed on the upper layer of the page.

After a brief analysis of the main interface, the size of the whole project is 750×1334 of the iPhone 6, which is divided into upper and lower parts. At the bottom is a bottom bar navigation bar, and above is the interface that switches with the bottom navigation

Page layout diagram

This section mainly introduces how to implement the bottom bar.

First open outline,

One app completes the introduction (II) - building the main framework

Only one container class component is allowed in rootview, and other components are placed in this container class component. Generally, we select the alayout absolute layout component as this container component. Click to select the component (as shown in the red box above), and modify the ID of the component to do through the attribute list_ ALayout_ Root, the default size is 750×1334, which is the same as the size of the whole project. Continue to add four alayouts in the container, and change the ID to do respectively_ ALayout_ top、do_ ALayout_ body、do_ ALayout_ Line and do_ ALayout_ Bottom. Their IDs correspond to their functions, such as top, body, line and bottom as shown in the page layout diagram. Adjust the X, y, width and height attributes of the four alayouts to adjust their positions in the page. Continue to do_ ALayout_ Add four alayouts in the bottom container, and change the ID to do_ ALayout_ b0/b1/b2/b3,

One app completes the introduction (II) - building the main framework

Then add a label and ImageView component to the four alayouts respectively, and adjust their x, y, width and height to achieve the effect shown in the figure below

One app completes the introduction (II) - building the main framework

At this time, there is no picture displayed in ImageView in your project. You need to source://image Or create another directory where you want to store pictures and put the pictures you want to show in it

One app completes the introduction (II) - building the main framework

Then select the four ImageView components respectively, modify their source attribute to point to the absolute path where the pictures are stored, and the pictures can be displayed.
It should be noted here that deviceone has powerfulScreen adaptation technologyHowever, there may be some deformation in some places where the image display shape is strictly required. In order to ensure that the point alayout has a special attribute isstretch, set this attribute to false to ensure that the ImageView is not deformed.

With the page effect, the next step is to make the page move. Double click index ui. JS to enter the code editing page,

One app completes the introduction (II) - building the main framework

First define three SM components notification, global and page by component type, and customize the object name + To use the properties, methods, and events of the component. Define the required alayout, ImageView, and label. The UI component is defined in a similar way to the SM component, except that the UI (“”) bracket is filled with the just The ID name of the corresponding component modified on the UI page.

Both ImageView and alayout have touch events. In order to make users have a better experience, we increase the click response range, subscribe the touch event to the four alayouts of the bottom, and click the selected effect by changing the text color of label in other alayouts and the source of ImageView image in this event.

One app completes the introduction (II) - building the main framework

In addition, we want this demo to return to the debug home page by clicking the “back” virtual button on the mobile phone on the Android device. We need to use the notification, global and page components we just defined, as well as a mm component timer timer. The definition method of MM component is the same as that of SM component, which can be defined only by component type.
Clicking the “return” virtual button on the Android phone will trigger the back event of the page component, so we subscribe to the back event and handle whether to return or exit in the back event.

One app completes the introduction (II) - building the main framework

Here, a demo that can respond to click events and switch pictures is completed. Is it easy to learn?! We can quickly verify what we have learned from the method of joint debugging code of mobile phone and computer learned in the last tutorial.