Web programmer Development App Series-Develop my first app, source download

Source: Internet
Author: User
Tags nativeui

Web Programmer Development App Series
    1. Web programmer Development App series-Meet Hbuilder
    2. Web programmer Development App series-Apply for Apple Developer account
    3. Web programmer Development App series-Debug Android and iOS phone code
    4. Web programmer Development App Series-Developing my first app
    5. Cond

Directory
    1. Objective
    2. Source Code and app download
    3. Preparatory work
    4. View Message page
    5. Add Message page

Objective

After reading the previous articles we finally began to knock the code, because all the front-end code is the HTML static problem, so you use what development tools can be, backstage I use MVC development, because the HTML static file needs to be packaged, it can not be mixed with other project files, otherwise the app will be very large, Wasted cell phone space and download consumption, so I said to the MUI and backstage sub-two items, here I steal a lazy, directly with my personal site code as the background, my background code temporarily not open source, I now write the app front-end code open source for everyone to download

Source Code and app download

First use of GitHub, toss half a day to upload code to the server, oh, provide the source to everyone download, function I will continue to increase in the future

SOURCE Download: https://github.com/linfei721/MyApp/

APP Download: http://www.5imvc.com/Home/App

Preparatory work

Since I need the TFS upload Code, I use Visual Studio here to manage the app's code, first set up an empty website (PS: Must be completely empty folder, what project files do not have)

Open Hbuilder, select File, Open Directory ... Select the site we just created, fill in the project name: MYAPP

Right-click on the item you just opened and choose Convert to mobile app

After successful conversion, there will be a hint, this is what I said do not mix with other documents is a meaning

Then open the directory, you will find that there is a Manifest.json file, this is the app's configuration file

Open an instance of the MUI that we created before, and if no can create one (file-new-mobile app, select Hello MUI), locate the JS folder inside and copy the MUI. file that starts in our own project

The directory name is freely defined by itself

Similarly, the style is to be copied a copy of the

Other JavaScript files I also used jquery and AngularJs, because the MUI Loaded JS filter and jquery are very similar and a little different, but did not find the corresponding documents, so in the use of inconvenient, so I js filter to jquery-based, Just learned Angularjs, the page of MVVM use this, the file name as far as possible is used in lowercase

View Message page

Here I will use the MUI as the overall style, the specific style and usage please see http://dev.dcloud.net.cn/mui/, if you want to see the code, you can directly see the example of the Hello MUI we have created, directly run up to find the style we want

First create a index.html file in the directory (note: Here I capitalized, manifest.json file Configuration page entry is lowercase, so to adjust to uppercase start), this is our home, because I know angularjs not too much, So we need jquery assist, O (∩_∩) o~

Mui.power.js file for all our pages common method, because all is HTML static page, so there is no template-like things, so the page many places to repeat the code, if anyone knows can be reused method can recommend the next

<!DOCTYPE HTML><HTMLNg-app= "MYAPP">    <Head>        <MetaCharSet= "Utf-8">        <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />        <title>My home</title>        <Scriptsrc= "Scripts/mui/mui.js"></Script>        <Linkhref= "Content/mui.min.css"rel= "stylesheet" />        <Scriptsrc= "Scripts/jquery.min.js"></Script>        <Scriptsrc= "Scripts/angular/angular.min.js"></Script>        <Scriptsrc= "Scripts/angular/angular-sanitize.min.js"></Script>        <Scriptsrc= "Scripts/mui.power.js"></Script>    </Head>    <BodyNg-controller= "Mycontroller">        <Headerclass= "Mui-bar Mui-bar-nav">            <H1class= "Mui-title">5IMVC Home</H1>        </Header>        <Divclass= "Mui-content">        </Div>    </Body></HTML>

Create your own create template in Hbuilder, next time follow the code above to create a page, click on the file-create a new-html file, click on the custom template

Copy the index.html file into the name: My template page, re-open the Create page, we can see the template page options

Click Run-The phone runs, you can see the effect of the code we just wrote on the phone, if you want to know how to connect the phone, check out the Web Programmer Development App series-Debug Android and iOS phone code

Next we began to write the data list, because the MUI inside the drop-down refresh control use inconvenient, I use a drop-down refresh plugin here, called Dropload, usage you can go online to find

Add Message page

The implementation of the query function, we need to increase the message, in the directory with the addition of folders,/html/note, add a add.html page, choose our previous template

To add the open page method to the list page, see the http://dev.dcloud.net.cn/mui/window/#openwindow for more parameters Mui.openwindow

$ (window). Off (' Index_reload '). The meaning of On (' Index_reload ') is to register a method on the current page, followed by a page call, such as after the message is submitted, return to the page and refresh the data

Index.html Code

                $scope. addnote = function () {                    Mui.openwindow ({                        id: ' addnote ',                        URL: ' html/note/add.html ',                        extras:{}                    })                    $ (window). Off (' Index_reload '). On (' Index_reload ', function () {                        initpage ();                    });                                    }

Add.html code, after the commit is completed, use the Mui.fire method to invoke the method in the main page

Plus.nativeUI.showWaiting ()                    $.post (mui.powerData.rootUrl + "Home/noteadd", {ncontent: $scope. Note, Type: ' App '}, function (data) {                        plus.nativeUI.closeWaiting ();                        if (data = = = "Success") {                            Mui.fire (View.opener (), ' Index_reload ', {});                            Mui.back ();                        }                        else {                            Mui.alert (data, ' O (∩_∩) o~ ');                        }                    })

OK, our first app message board is finished, function is not much, only a message function

Web programmer Development App Series-Develop my first app, source download

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.