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;

(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 );

(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);
    });
}

六.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)最后提交审核

七.总结