The general process is as follows:
1. Feelings on the Use of MUI
2. Project layout
3. Implementation of Project Page
4. Realization of Business Logic in Project
5. Other commonly used APP technologies in projects
6. IOS is released online to the Apple Store
7. Summary
I. Feelings on the Use of MUI
1. It's the first time that I really use MUI,HTML5 plus,Hbuilder mixed development, technology is relatively new.
2. The project layout is unreasonable, the business logic is unreasonable, and the follow-up needs to be improved.
3. It's really convenient to develop APP with MUI, HTML5 plus and Hbuilder.
II. Project Layout
1. Project layout should be modular layout, such as a large functional module placed in a folder, which includes js,css,html files, which is conducive to functional implementation and post-maintenance. (But this project forgot to achieve this, but used three folders, namely html a folder, CSS a folder, js a folder, need to be improved later.)
3. Implementation of Project Page
1. In the process of implementing the project pages, the native style of MUI.css should be used more (no wonder the developers, official MUI documents are really not complimentary).
2. Ready to read the MUI.css file later (strongly recommend to see the mui.css file, the official document is too bad)
4. Realization of Business Logic in Project
1. The project layout should be modular (described in the second middle school project layout), so as to make the method common, reduce the amount of coding and the difficulty of post-maintenance. It is important that the boss can respond quickly when modifying the requirements.
2. Write code must be able to function clear, clear logic, not later maintenance, or the boss needs to change, killing people.
5. Other commonly used APP technologies in projects
1. Push
Application for account push
Twenty push message steps
(1) Configuration of manifest.json file in hbuilder
Fill in the SDK configuration with appid,appkey,appsecret for a push platform application
(2) The front-end sends the user's unique clientid to the server to save when APP starts running.
var info = plus.push.getClientInfo();
var cid = info.clientid;(3) The server generates a tag based on clientid and user id to send messages to a user.
IOS push only supports transmissions (Android supports ordinary and transmissions), so the idea is as follows:
The server only sends through messages
After the client receives the transmitted message (receive event), it manually creates a message in the client, which guarantees the consistency of IOS and Android.
document.addEventListener( "plusready", function(){
// After loading the extended API, you can now call the extended API normally.
// Adding listener to system message center to click on a message to start application events
plus.push.setAutoNotification( false );
// console.log(plus.push.setAutoNotification);
plus.push.addEventListener( "click", function ( msg ) {
// Analysis of msg.payload processing business logic
}, false );
plus.push.addEventListener( "receive", function(msg) {
//Manual creation of taskbar prompts
plus.push.createMessage(msg.content);
var myAudio= plus.audio.createPlayer('media/notify.mp3');
myAudio.play(function(){
// alert("voice playback success");
},function(){
// alert("voice playback failure");
})
});
}, false );(4) The push message created by oneself will trigger click listening event after clicking on the message center (but the ordinary push message will not trigger click). It can accomplish some functions, which are not needed in the current project, so it is not written.
2. Baidu Map
(1) To apply for Baidu AppKey, the premise is to use hbuilder to package APP online. http://lbsyun.baidu.com/apiconsole/key)
* Android: This article is enough ( http://ask.dcloud.net.cn/article/29)
* IOS: When applying for Baidu AppKey, the security code uses the Appid of the Apple developer's test certificate (or the Appid of the online certificate) to succeed.
(2) Configuration in SDK configuration of manifest.json file in hbuilder
Select Baidu location or map, fill in appkey_ios,appkey_android
(3) Use of HTML5 plus Baidu Map (Reference) http://www.html5plus.org/doc/zh_cn/maps.html)
mui.plusReady(function() {
var address = plus.webview.currentWebview().address;
translateAddress2Point(address);
})
//Baidu Map on the Page
function openMap(centerPoint) {
var ptObj = new plus.maps.Map("allmap", {
zoom: 17,
zoomControls: true,
center: centerPoint,
traffic: true
});
// console.log(ptObj.getUserLocation);
ptObj.getUserLocation(function(state, point) {
if (0 == state) {
var searchObj = new plus.maps.Search(ptObj);
searchObj.onRouteSearchComplete = function(state, result) {
console.log("onRouteSearchComplete: " + state + " , " + result.routeNumber);
if (state == 0) {
if (result.routeNumber <= 0) {
alert("No results were retrieved");
}
for (var i = 0; i < result.routeNumber; i++) {
ptObj.addOverlay(result.getRoute(i));
}
} else {
alert("Retrieval failure");
}
}
searchObj.walkingSearch(point, "Shanghai", centerPoint, "Shanghai");
} else {
alert("Get your location error!");
}
})
ptObj.showUserLocation(true);
}
//Conversion of Geographical Position to Geographical Coordinates
function translateAddress2Point(addressStr) {
plus.maps.Map.geocode(addressStr, {
city: "Shanghai"
}, function(event) {
var address = event.address; // Converted geographic location
var point = event.coord; // Converted coordinate information
openMap(point);
return point;
}, function(e) {
alert("seek failed:" + JSON.stringify(e));
return new plus.maps.Map.Point(121.4803295328, 31.2363429624);
});
}