Hbuilder,使用mui,HTML5 plus 开发Android,IOS的APP始末

大体流程如下: 
1. MUI的使用感言 
2. 项目布局 
3. 项目页面实现 
4. 项目中业务逻辑的实现 
5. 项目中其他常用APP的技术 
6. IOS发布上线到苹果商店 
7. 总结

一.MUI的使用感言

1.我是第一次真正的使用MUI,HTML5 plus,Hbuilder混合开发,技术比较生疏.

2.开发中项目布局不合理,业务逻辑实现不太合理,后续需要改进.

3.使用MUI,HTML5 plus,Hbuilder开发APP真的很方便.

二.项目布局

1.项目布局应该是分模块布局,比如一个大的功能模块放在一个文件夹里面,这个文件夹包括js,css,html文件,有利于功能实现和后期维护.(但是本项目忘记了这么实现,而是采用了3个文件夹,即html一个文件夹,css一个文件夹,js一个文件夹,需要后期改进)

三.项目页面实现

1.项目页面实现的过程中,要多使用MUI.css的原生样式(不能怪开发者,MUI官方文档实在不敢恭维)

2.后期准备看MUI.css文件(强烈建议看mui.css文件,官方文档太差劲)

四.项目中业务逻辑的实现

1.项目布局要采用模块化的(二中项目布局所述),这样才能方法公用,减少代码编写量和后期维护难度,重要的是老板修改了需求能够快速反应.

2.写代码一定要能功能拆分清楚,逻辑清晰,不然后期维护,或者老板需求需改,弄死人.

五.项目中其他常用APP的技术

1.个推

个推账号申请

个推推送消息步骤

(1)hbuilder中manifest.json文件的配置在SDK配置中填入个推平台申请的appid,appkey,appsecret(2)前端在APP开始运行的时候,把这个用户APP自己独有的clientid发送到服务器保存

var info = plus.push.getClientInfo();
var cid  = info.clientid;

1
2
(3)服务器根据clientid和用户id生成一个标记,用于发送消息到某一个用户.IOS个推只支持透传(Android支持普通和透传推送),所以思路如下: 
1.服务端只发送透传消息 
2.客户端接收到透传消息之后(receive事件),在客户端手动创建一条消息,这样能保证IOS和Android表现一致. 
3.IOS接收透传的时候,保证推送证书的正确. 
4.IOS的receive事件会重复接收,这时候需要如下写法(下面的代买).

document.addEventListener( "plusready", function(){
// 扩展API加载完毕，现在可以正常调用扩展API
// 添加监听从系统消息中心点击某条消息启动应用事件
plus.push.setAutoNotification( false );
//  console.log(plus.push.setAutoNotification);
plus.push.addEventListener( "click", function ( msg ) {
// 分析msg.payload处理业务逻辑
}, false );
plus.push.addEventListener( "receive", function(msg) {
//解决多次监听receive事件的问题,发现在第二次弹出的msg中,payload为空,且没有type属性
/*if (msg.aps) { // Apple APNS message
alert("接收到在线APNS消息：");
} else {
alert("接收到在线透传消息：");
}*/
if (plus.os.name == 'iOS') {
if (msg.payload) {
//alert(JSON.stringify(msg));
plus.push.createMessage(msg.content);
var myAudio= plus.audio.createPlayer('media/notify.mp3');
myAudio.play(function(){
},function(){
})
}
} else {
plus.push.createMessage(msg.content);
var myAudio= plus.audio.createPlayer('media/notify.mp3');
myAudio.play(function(){
},function(){
})
}

});

}, false );

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
(4)自己创建的推送消息,在点击消息中心之后,会触发click监听事件(但是普通推送来的消息不会触发click),可以完成一些功能,目前项目中并不需要,所以没有写.苹果个推要单独申请APNs,我是使用AppUpLoader申请苹果推送证书,具体步骤参考 : http://www.applicationloader.net/blog/zh/397.html

2.百度地图

(1)申请百度AppKey,前提是使用hbuilder在线打包APP.(http://lbsyun.baidu.com/apiconsole/key) 
* Android : 这篇文章足够(http://ask.dcloud.net.cn/article/29) 
* IOS : 申请百度AppKey时,安全码使用苹果开发者的测试证书的Appid(或者是上线证书的Appid),这样就能成功 
(2)hbuilder中manifest.json文件SDK配置中配置选择百度定位或地图,填入appkey_ios,appkey_android(3)HTML5 plus 百度地图的使用(参照 http://www.html5plus.org/doc/zh_cn/maps.html)

mui.plusReady(function() {
var address = plus.webview.currentWebview().address;
translateAddress2Point(address);
})
//页面上显示百度地图
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("没有检索到结果");
}
for (var i = 0; i < result.routeNumber; i++) {
ptObj.addOverlay(result.getRoute(i));
}
} else {
alert("检索失败");
}
}
searchObj.walkingSearch(point, "上海", centerPoint, "上海");
} else {
alert("获取您的定位错误!");
}
})
ptObj.showUserLocation(true);
}
//地理位置转换为地理坐标
function translateAddress2Point(addressStr) {
plus.maps.Map.geocode(addressStr, {
city: "上海"
}, function(event) {
var address = event.address; // 转换后的地理位置
var point = event.coord; // 转换后的坐标信息
openMap(point);
return point;
}, function(e) {
alert("定位失败:" + JSON.stringify(e));
return new plus.maps.Map.Point(121.4803295328, 31.2363429624);
});
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

六.IOS发布上线到苹果商店

参考网址: https://ask.dcloud.net.cn/article/1290 
(1)使用APuploader创建app; 点击ItunerConnect,进入网页https://itunesconnect.apple.com,创建APP 
(2)上传IPA文件,在APPuploader中点击UpLoad 
(3)上传成功,返回网站进行APP其他信息填写,(关于图片可以使用win7的画图调整分辨率到要求即可) 
(4)最后提交审核

七.总结

转载自：http://blog.csdn.net/guxiansheng1991/article/details/76377287?locationNum=2&fps=1