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 downloadFirst 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 workSince 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 pageHere 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 pageThe 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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
