How to Use DeviceOne for JavaScript development (3) tips on using WeChat app _ javascript

This article mainly introduces how to use DeviceOne for JavaScript development. (3) related information about similar applications. For more information, see this document series, the long-term goal is to use DeviceOne to develop some of the currently widely used high-quality mobile phone applications. We will maximize the implementation of each function and detail of these applications, not only in the simple UI imitation and Demo phase, instead, it is a basic practical App.

In the implementation process, there will be a lot of difficulties, and you will find that some features are not supported by components, and you will also encounter common technical problems in mobile development. Step-by-Step operations and problem solving allow developers to intuitively understand how to develop a real App through DeviceOne, as well as many technical details of mobile development, this can reduce the number of detours for App developers.

This document mainly describes the imitation.

The first part is the construction of the framework.

UE and uidesign. Generally, App development requires the UE design of the product personnel and the uidesign of the staff. After completing these two steps, the function implementation starts. We can skip these steps to imitate the existing ones. It is the UI design of the main interface provided by the artist, and the size of the elements in the design is marked.

1. Create a project: Select Simple template and select an empty template because we can explain the development process in more detail. In fact, you can select the Multi View with ViewShower template for this project.

2. A brief analysis of the main interface, the size of the main interface is iphone6 size 750*1334. the Bottom part is a Bottom Bar navigation Bar, which has four independent interfaces. These interfaces are always displayed on one interface, and the other three interfaces are in the memory, switch by navigation at the bottom. This is suitable for the subject with do_ViewShower as the framework, for example:

Corresponding to this design, we delete the automatically generated button on the newly created Project, add a do_ALayout component and the do_ViewShower component, and set their height width and x and y coordinates:

3. next, we will add four tabs for ViewShower. Here I also emphasize that the actual App will involve many people. Our code structure should be clear and easy to read, and the name should be in English as much as possible, it is impossible to use Chinese characters, including creating multi-level sub-directories and not mixing them together. Here we add four subdirectories: chats, contacts, discover, and me. right-click each subdirectory, select New -- Other -- DeviceOne -- UI File, and create four indexes. ui, corresponding index. ui. js is automatically generated.

Note that the height of the root node ALayout corresponding to the four ui files is set to 1220, because these four ui files are subviews of ViewShower on the main interface and should not exceed the ViewShower size.

In addition, add a label for each ui to mark the Chinese name, But debug will see the real effect more clearly later.

4. Add four buttons in the Bottom Bar and add the corresponding js Code to implement the page switching function of ViewShower. Here is a tip. You can select two or more components to use alignment functions, such:

5. Add the ViewShower initialization code and button click events in index. ui. js.

Var viewshower = ui ("viewshower"); var page = sm ("do_Page"); // Add four subpages to viewshower. addViews ([{id: "chats", // path of the page: "source: // view/chats/index. ui "// page path}, {id:" contacts ", path:" source: // view/contacts/index. ui "},{ id:" discover ", path:" source: // view/discover/index. ui "},{ id:" me ", path:" source: // view/me/index. ui "}]); // initialization first displays the first page viewshower. showView ("chats"); var button1 = ui ("do_Button_1"); button1.on ("touch", function () {viewshower. showView ("chats") ;}); var button2 = ui ("do_Button_2"); button2.on ("touch", function () {viewshower. showView ("contacts") ;}); var button3 = ui ("do_Button_3"); button3.on ("touch", function () {viewshower. showView ("discover") ;}); var button4 = ui ("do_Button_4"); button4.on ("touch", function () {viewshower. showView ("me ");});

6. Let's take a look at the running effect of the real machine, start the debugging service of the designer, start the debugging program on the mobile phone end, and finally see the following: the iOS and Android interfaces are exactly the same. Click the four buttons at the bottom, and the switching effect is good:

7. The content of this section is here. Is the framework finished? We can only say that the first step of the Framework is completed. If many of our colleagues develop this App together, we can start to separate the work in parallel, and then divide it into five parts:

* Bottom Bar completion
*/Chats/index. ui completion
*/Contacts/index. ui completion
*/Discover/index. ui completion
*/Me/index. ui completion
The premise for parallel work by many people is that the Code version management, such as SVN and GIT, is used here, and the address is commit. We will also append the project code in this section in the attachment.

In the next section, we complete the implementation of the first subtask, BottomBar.

-------------------------------------------------------------

This section mainly completes the implementation of the bottom navigation bar.

0. First, let's analyze the interface and design diagram.

The entire bottom navigation is divided into four duplicate parts, each of which consists of an image ImageView, a bottom title Label, and a Label in the upper right corner. This Label can be implemented using a rounded corner Label, this label should be hidden by default.

1. in the first step, we need to find the corresponding image resources. Generally, the development resources are provided by the artist. We are imitating them now. The best way is to get them from the native installation package. Instead of directly relying on them, we can open ios, android installation package. the ios installation package is ipa and the android installation package apk are both compressed files. You can obtain some image resources after unzipping. Currently, I only need eight icons at the bottom, including the highlighted icons in the not-clicked and the highlighted icons in the vertices. Put these icons in the image directory.

2. Delete the four temporary buttons that were previously added, and then layout the new components according to the size data provided by the artist, including four do_ImageView components, four Label components, and four labels in the upper-right corner.
After simple calculation, the ImageView size is 60*60. Here is a tip: After setting a set of ImageView and Label, select two components, right-click "Copy", and then "Paste" three times. You can also select multiple components for various alignment.

Next, set the image and text. Set the source attribute of the Image view, set the text center, set the textAlign attribute to center, set the font, and set the background color, foreground, and so on. Set the visible of the three labels in the upper-right corner to false. Add an ALayout in the middle to set the background to gray as the vertical line between ViewShower and Bottom Bar. note that the implementation of the positive circle Label in the upper right corner is to set the border attribute, and the border is set to FF0000FF. 1 and 15 indicate that the color of the border is red and the width is 1, the radius of the rounded corner is 15 (the width and height of the Label are all 30) to realize the positive circle.

Test the effect on the real machine. The iPhone and Android mobile phone real machines are as follows:

3. There will be two problems at this time. If you add a click event to the ImageView, you must click the image to trigger the click. This will lead to poor experience. The second problem is that the image is slightly distorted on Android. For example, on iPhone 4, the circle may become an elliptical shape. This problem is caused by the differences in the aspect ratio of different mobile phones.

The solution is:

* Add four sub-alayouts of the same size to the ALayout of the Bottom Bar, place the imageview and label on the corresponding sub-ALayout, and add a click event to the sub-ALayout, in this way, the user's fingers can trigger the event as long as they reach almost the same position.
* Change the isStretch attribute of the above four sub-ALayout to false. For this principle, refer to the example demo of ALayout.

4. Modify index. ui. js and add code to modify the color and text foreground of all icons when the bottom bar button is switched at the bottom.

var button = ui("do_Button_");var imageview = ui("do_ImageView_");var label = ui("do_Label_");button.on("touch", function() {    showView("chats");});var button = ui("do_Button_");var imageview = ui("do_ImageView_");var label = ui("do_Label_");button.on("touch", function() {    showView("contacts");});var button = ui("do_Button_");var imageview = ui("do_ImageView_");var label = ui("do_Label_");button.on("touch", function() {    showView("discover");});var button = ui("do_Button_");var imageview = ui("do_ImageView_");var label = ui("do_Label_");button.on("touch", function() {    showView("me");});function showView(name) {    viewshower.showView(name);    if (name == "chats") {        imageview.source = "source://image/tabbar_mainframeHL.png";        label.fontColor = "BBFF";    } else {        imageview.source = "source://image/tabbar_mainframe.png";        label.fontColor = "FFFFF";    }    if (name == "contacts") {        imageview.source = "source://image/tabbar_contactsHL.png";        label.fontColor = "BBFF";    } else {        imageview.source = "source://image/tabbar_contacts.png";        label.fontColor = "FFFFF";    }    if (name == "discover") {        imageview.source = "source://image/tabbar_discoverHL.png";        label.fontColor = "BBFF";    } else {        imageview.source = "source://image/tabbar_discover.png";        label.fontColor = "FFFFF";    }    if (name == "me") {        imageview.source = "source://image/tabbar_meHL.png";        label.fontColor = "BBFF";    } else {        imageview.source = "source://image/tabbar_me.png";        label.fontColor = "FFFFF";    }}

So far, the bottom navigation bar is basically complete. This section is relatively simple, mainly for some meticulous ui drag and drop adjustments. We can use the debug version to check whether the Android and iOS functions very well.

We started to implement the first page of the main content of ViewShower.

Bytes ---------------------------------------------------------------------------------------

Next to the navigation at the bottom of the previous section, we will mainly complete the "" page on the first page of the four home pages. This section contains a lot of content and we will add multiple follow-up posts.

0 old rules: analyze the UI, which consists of three parts: system status bar, toolbar, and chat record list.

1. the system status bar has a height of 40 and a black background. We noticed that the four sub-pages on the homepage all have this system status bar, so we need to adjust the overall framework, there is no need to add a status bar for all four subpages. You only need to add one on the ViewShower. The height of the corresponding ViewShower and subpage is changed to 1180.

Corresponds to index in the designer. ui, chats/index. ui, contacts/index. ui, discover/index. ui, me/index. the ui must change the height and y attribute values. The effect is as follows:

2. let's go back to chats/index. ui: First add the tool navigation bar (height 80) and the title and tool buttons in it. Add the resource file with the plus sign because this file is exclusive to the chats page, so there is image/chats/bar_add.png.
Let's look at the real machine effect. We noticed a black area on the top. This is the added status bar in the designer, because this page is drawn from the system status bar, so this part of the designer will be added out,

The solution is to modify app. js. Add a statusBarState parameter (API document) to openPage and set it to transparent to draw the page from the top of the screen.

var d1 = require("deviceone");var app = d1.sm("do_App");app.on("loaded", function() {    this.openPage({        source : "source://view/index.ui",        statusBarState : "transparent"    });});

Let's take a look at the real machine:

3. The body is a do_ListView. Next, set the cell and data of the ListView.
The cell of ListView refers to each row in the list box. For example, if ListView has 100 rows of data, the visible screen can only see about 8 or 9 rows. Therefore, when the gesture slides up or down, no 100 rows are created, instead, we will repeat these 8 or 9 rows to replace the data in them. We call it a row template. In DeviceOne, this template is also a ui file. For example, we create a chat_cell.ui under the chats subdirectory. The basic ui interface is as follows:

Drag the UI according to the design size of the artist.

Here, we also need to consider the problem of pure circular deformation. We need to set attributes such as the text size and foreground color. You can see that there are multiple do_Label and do_ImageView components in it, since the template ui is bound to data later, it is blank in the design phase.

Next, we need to design the data corresponding to chat_cell.ui. Generally, we need to minimize network interaction for the user experience. When opening a page, we usually first read the local data file and display the interface, then, consider whether to connect to the network to obtain the latest data, so App development needs to carefully consider the balance between local data reading and writing and the timeliness of data.
The transmitted data of DeviceOne is basically in the standard JSON format. For example, the relationship between component attributes in chat_cell.ui and JSON Data Structure

The code for the corresponding ing relationship is as follows in chat_cell.ui.js. We can see that the component id is on the left of the ing relationship, and the component property name is on the right of the Data JSON key name:

// Related to chat_cell.uivar root = ui ("$"); // $ is the wildcard of the root node component of the ui file. If you specify the component id, you can also use the id to obtain the object root. setMapping ({"photo_imageview.source": "photo", "name_label.text": "name", "lastmessage_label.text": "lastmessage. message "," lasttime_label.text ":" lastmessage. time "," unread_label.visible ":" unread "," unread_label.text ":" unread-count "," name_label.fontColor ":" isgroup ",});

The corresponding data should have been obtained from the network for the first time and then cached to the local device. We simulate the data. Therefore, manually generate a file to data/chats/chat. json

4. Return to chats/index. ui. We need to set a template for listview In the ui file to bind data.
Set the templates attribute of listview in index. ui to source: // view/chats/chat_cell.ui.
Note: The chat_cell.ui is stored in the source/default/view/chats/chat_cell.ui, but the source: // root node refers to the source/default/directory.
Add the data binding code in index. ui. js.

// Related to index. uivar storage = sm ("do_Storage"); var listdata = mm ("do_ListData"); var listview = ui ("listview"); var json_path = "data: // chats/chat. json "; // if (storage. fileExist (json_path) {storage. readFile (json_path, function (data, e) {// deviceone. print (JSON. stringify (data); listdata. addData (data); listview. bindItems (listdata); listview. refreshItems () ;})} var page = sm ("do_Page"); page. on ("loaded", function () {// This event is triggered after the page is loaded and displayed. // we can obtain the latest network data in this event, to update listview and data/chats/chat. json });

Let's check the effect on the real machine.

There are several details in the operation:

* Images are constantly refreshed when sliding up or down, because the source of our ImageView is a network image, which is obtained from the network each time it is displayed, so here we need to replace the cacheType attribute of ImageView in chat_cell.ui with "always", which means that the image will be cached to the local machine only once it is read from the network and will not be read from the network again. For details about cacheType attributes, refer to the API documentation.
* ImageView is also rounded. Generally, the border attribute can be used to set the rounded corner. However, only ImageView in android cannot be used to set the rounded corner. ImageView also has a proprietary attribute radius to set Android, this can be improved in the future.

5. process the add button in the upper-right corner and click the pop-up menu

Set the enable attribute of ImageView to true in the upper-right corner to handle click events. Add code in chats/index. ui. js.

Var add_button = ui ("add_imageview"); add_button.on ("touch", function () {var menu = ui ("menu_id"); if (menu) {// if it has already been added, it just shows this view, rather than adding a new if (menu. visible = false) menu. visible = true;} else {main. add ("menu_id", "source: // view/chats/chat_add_menu.ui ");}});

The chat_add_menu.ui is the ui file corresponding to the pop-up menu. The root node size of this ui file and chat/index. the ui is the same, so that you can close this menu (actually hide this menu) by clicking any blank space. We drag the corresponding layout in this ui file, four resource png files need to be added.

Here is a tip. The triangle icon at the top can only be loaded by an ImageView.

We will add a click event to the root node of chat_add_menu and hide the event when you click it. In chat_add_menu.js

var root = ui("$");root.on("touch",function(){    root.visible = false;});

Finally, let's take a look at the real machine effect, click the plus sign to bring up the menu, and click anywhere to hide the menu.

This section is here for the time being. We will drag and drop the pages first, and then return to this page after the pages are complete.