There are too many mobile application development technologies, how to choose

With the continuous heating up of Internet entrepreneurship, the market demand for developers of mobile application development also exceeds demand. There are also various types of mobile development tools and technologies, which can be roughly divided into three categories. The first is pure native development. Of course, pure native apps Very good, but its learning cost is high, development cycle is long, and the amount of coding is large. It is generally used for trial use by companies after financing. The other is the popular web app in the past two years, which is generally implemented through HTML5 development and packaging. , as we all know, web apps rely too much on the network, the rendering performance is weak, the tags are too many, and the amount of code is also a lot. The web app can only be said to be a temporary solution. Today, we will talk about the third solution in detail. Among the many development tools and platforms So I chose him because it can bring a smooth native experience without native development. The perfect combination of Xml and JavaScript breaks the development method of conventional native APPs. This method not only brings the advantage of a relatively small amount of code, but also can be edited once for Android and iOS systems. Although the iOS side is not very mature compared to Android, but With the imminent release of Ai Ma Ge 5.0, these problems are believed to be solved.
Let's take a look at the development process
of shared with you the source code of ordering , news and imitation WeChat APP before. I believe everyone has some understanding. The demos of these APPs are all developed
with I thought I could try the app for booking accommodation. It would be troublesome to redesign, and I just wanted to do a demo instead of releasing it online, so I found a very novel app in the app store and copied it. . Find our UI beauty and cut all the pictures to me, and the next step is to develop.
The default unit of pixels in imag.js is dp, and the size of the text only needs to be written in numbers.
 
Because there are too many pictures in the APP and the loading is slow, the pictures are not directly put into the resources, but the pictures are written in json format and uploaded to the simulation data, which is easy to call. Use imag.js to call the client information function $phone.info(), you can get the information parameters of the mobile phone screen, and it is convenient to adjust the pixel ratio.
One of the pages uses the side sliding menu control SlidingMenu to complete the information navigation (as shown below). SlidingMenu defines two items. The first item is hidden at the beginning. When the upper left button is clicked, the open() method is called to display the side sliding menu. Of course, SlidingMenu itself has the effect of sliding, and sliding to the right can respond Sidebar. If you use native, Android provides HorizontalScrollView, although you don't need to deal with various conflicts manually, you also need to understand the event distribution mechanism.
 
The following figure uses the popup menu control popupmenu . The content filling part is done with a list list. You can set the background, margin, text color and other styles of the list yourself.
 
The product type selection in the above figure is displayed by the pull-up menu control actionmenu . The ActionMenu control is used to display the iOS ActionSheet-style pull-up menu. The style is fixed, and the background and style cannot be customized by itself, and can only be dynamically created through JavaScript scripts. The renderings are as follows.
 
The renderings below are relatively simple. Most of the layouts are implemented with the list control, and the onclick="$page.open('')" method is used to jump to the page. Screen controls are added to individual pages to display multiple sets of images.
   
   
   
The following code is the source code of the last picture to invite friends

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <page>
        <title style="background:#ffffff;height:52">
            <left>
                <icon src="back_gray.png" style="margin-left:20" onclick="$page.close()"/>
                <label style="font-size:18;color:#3a3a3a;margin-left:32">邀请好友</label>
            </left>
        </title>
        <content style="background:#f5f6f5">
            <list type="transparent" style="padding:0 18">
                <item style="padding:0;margin-top:27">
                    <row><button style="background:#ff5a5f;height:44;width:100%;font-size:15;color:#ffffff;align:center;padding-top:2">邀请联系人</button></row>
                    <row style="height:15"></row>
                    <row>
                        <label style="color:#c8cbc6;font-szie:15;align:center">————————</label>
                        <label style="color:#727a7e;font-szie:15;align:center;margin:0 10">或</label>
                        <label style="color:#c8cbc6;font-szie:15;align:center">————————</label>
                    </row>
                    <row style="height:12"></row>
                    <row><label style="color:#4d5153;font-size:13;align:center">分享链接</label></row>
                </item>
                <item style="padding:15 0;col-width:*,3,50">
                    <col><row><button style="background:#ffffff;height:44;width:100%;font-size:15;color:#f474b4d;align:center;padding-top:2">分享到微信</button></row></col>
                    <col></col>
                    <col><row style="height:44;background:#ffffff"><icon src="share.png" style="align:center"/></row></col>
                </item>
                <item style="margin-top:15;padding:0 0 44">
                    <row style="background:#c9ccc7;height:1"></row>
                    <row style="height:30"></row>
                    <row><label style="font-size:15;color:#7a8286;align:center">You have travel funds coming into your account</label></row>
                    <row><label style="font-size:15;color:#ff4c51;align:center">View past invitations</label></row>
                </item>
            </list>
        </content>
    </page>
</imag>

More detailed source link