hbuilder 开发5+ APP采坑记录

猿天地

发布于 2018-04-03 12:59:28

2.8K0

发布于 2018-04-03 12:59:28

文章被收录于专栏：猿天地猿天地猿天地

开发一款APP产品需要在安卓和苹果2大平台发布，同时开发团队也需要有安卓和IOS。

HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App可以通过扩展的JS API任意调用手机的原生能力，实现与原生App同样强大的功能和性能。

通过5+App可以降低APP开发的门槛，让一般的前端开发人员也可以进行APP的开发，同时能为公司节约很大的成本，只需要一个前端团队即可。

最近我司为了快速发布一个APP产品，也选择了5+App这种方式，由于本人主要是做后端开发的，前端这块不是很熟，在开发过程中遇到了很多的问题，特别是一些IOS证书的申请流程，搞的晕头转向，为了避免后面的同学采坑，在这里将采坑的内容分享出来。

dcloud官网：http://dcloud.io/

APP图标问题?

在真机调试环境下，hbuilder会把APP内容同步到我们的手机中，这个时候图标显示的是hbuilder的图标，不是我们在启动页设置好了的自己的图标，这个需要将APP打包后装在手机上才可以显示出来。

启动页图片问题？

启动页图片有2个问题，一个是和上面图标一样的问题，在真机调试环境下是没效果的，还有个问题就是不能去掉，很多APP都会在启动时候加载一些广告内容，这是一个很常见的需求，hbuilder中只能配置静态的本地图片然后打包到APP中，不能做成动态的，当时我想的是能不能直接配一个图片地址，然后就可以达到动态的效果，事实证明是不行的，打包不了。

那么如何解决这个问题呢？

既然启动页不能更改，也去不掉，那就制作一张自己公司logo的启动页面，在启动页面加载完成之后自己实现一个广告页面，广告页面后就是我们的APP首页，通过这种方式来达到动态启动广告页的效果，由于我本人没做过原生的移动开发，不知道在原生的开发中能不能将启动页去掉，我们这边用的是别人的框架，这个就只能妥协了，当然启动页面也是有必要的，可以让APP在启动时将一些资源提前加载好。

我看了一些其他的APP,比如微店买家版，也是有自己的启动图片，然后再跳转到广告页面，最后到首页的。

APP中用百度地图定位问题？

我们之前在网页中也是用的地图来定位的，也有一个key,在做APP的时候看到也是需要配置SDK内容的，当时以为就用网页中用的百度的key就可以了，配上去之后就发现出问题了，有的时候可以定位成功，有的时候定位不了，后面看了文档：http://ask.dcloud.net.cn/article/29，发现地图的appkey还分安卓和IOS的版本，所以又重新申请了不同系统下不同的key。

微信登录问题？

首先你得有账号，账号没问题之后就得建应用了，应用需要等微信团队审批之后才可以使用第三方登录的功能，微信申请地址：https://open.weixin.qq.com/

在创建应用的时候需要分别填写安卓和IOS的信息:

IOS需要注意的是Bundle ID的填写，一个是正式的，一个是测试环境下使用的，Bundle ID通常都是公司的包名称，比如com.cxytiandi.app,测试的就可以使用com.cxytiandi.app.test

安卓没有Bundle ID这个说法，安卓的叫应用包名，而且不区分正式和测试环境，只需要填写一个就可以了，比如com.cxytiandi.app

还有一个很重要的就是应用的签名，这个是安卓这边需要的，这个签名可以通过微信提供的签名获取工具获取，地址：https://open.weixin.qq.com/cgi-bin/readtemplate?t=resource/appdownloadandroidtmpl&lang=zhCN

前提是你得将你的APP用签名文件进行签名打包，然后安装到你的手机上，最后下载微信提供的签名获取工具安装到手机上，通过这个工具获取签名然后填写到微信开发平台的账号申请信息中即可。

最重要的问题来了，我的APP怎么签名打包呀？

在jdk的bin文件中，输入以下命名进行文件生成：

keytool -genkey -alias 别名 -keyalg RSA -validity 10000 -keystore 文件名.keystore

alias是你要填写的别名
文件名.keystore 是文件保存的名称

回车之后会让你填写一些基本的证书信息还有密码，密码一定要记住

如果大家不是Java开发人员，本地可能没有按照jdk，这个时候你可以用hbuilder开发包中自带的jre的bin目录去生产证书。

打包的话就可以选择使用自己的证书，然后填写下图的信息，最后打包安装到自己的手机中获取签名：

等微信那边审核通过之后，你会得到一个appid和appsecret，直接在SDK配置中进行配置即可使用微信登录的功能。

登录示例可以参考官方给的demo,记得在注销微信登录的时候调用下面的退出登录方法：

function logout(auth){
    auth.logout(function(){
        outLine("注销\""+auth.description+"\"成功");
    },function(e){
        outLine("注销\""+auth.description+"\"失败："+e.message);
    });
}

如果不调用logout方法会导致当你手机中的微信切换成另一个账号的时候，你微信登录获取的还是之前的微信信息，有缓存。

推送问题？

hbuilder开发APP时默认集成了一些第三方的推送功能，比如个推。当然在使用的过程中也踩过一些坑。

1.IOS使用普通消息模板进行推送时会弹出一个很丑的框，效果图如下：

那么怎么去掉这个比较丑的框呢，在推送的时候我们用透传消息模版来推送就不会出现这个框了，这个时候就需要自己用代码监控消息过来，当收到消息的时候你可以自己创建一个本地消息或者用系统消息提示框来代替。

本地消息创建：

function createLocalPushMsg(){
    var options = {cover:false};
    var str = dateToStr(new Date());
    str += ": 欢迎使用HTML5+创建本地消息！";
    plus.push.createMessage( str, "LocalMSG", options );
    outSet( "创建本地消息成功！" );
    outLine( "请到系统消息中心查看！" );
    if(plus.os.name=="iOS"){
        outLine('*如果无法创建消息，请到"设置"->"通知"中配置应用在通知中心显示!');
    }}

系统提示框：

plus.nativeUI.alert()

2.IOS离线推送收不到？

安卓的APP如果被杀死了，想要做离线推送是不可能的，只能通过手机厂商来实现离线推送，IOS中也是通过苹果提供的APNS服务来实现离线消息的推送功能。

在个推的文档中也有使用方式，文档地址：http://docs.getui.com/getui/server/java/template/

通过setAPNInfo(ApnPayload payload)；来设置推送信息，但是按照这样的做法改了代码之后还是死活收不到消息，在线的就可以了，搞了好久最后怀疑是评估证书的问题，在个推中创建推送应用是需要传证书的，最开始之前我传的.p12证书是通过ios_development.cer生成的，这个证书打包时要用到，当时也没什么问题，到后来发现离线推送不行了，才去找原因，发现苹果开发者中心还有一个推送的证书类型，我去，这么麻烦，又单独申请了一个推送的证书

然后通过下面的方式生成了一个推送的.p12文件，上传到个推，最后才能收到离线消息。

生成p12需要3个文件：

本机在https://developer.apple.com/ios/manage/certificates/team/index.action生成certifacates时上传的本机证书：CertificateSigningRequest.certSigningRequest
从https://developer.apple.com/ios/manage/overview/index.action的app IDs里拿到的Push SSLCertificate,命名为：aps.cer
在本机双击aps.cer会自动加载到本机的Keychain中，在keychain中找到该证书，展开，导出其下的private key为:key.p12

将以上3个文件放在同一个文件夹中，并用terminal打开，一次输入下面命令（需要输入密码时均填写123456）：

openssl x509 -in aps.cer -inform DER -out aps.pem -outform PEM
openssl pkcs12 -nocerts -out key.pem -in key.p12
openssl pkcs12 -export -in aps.pem -inkey key.pem -certfile CertificateSigningRequest.certSigningRequest -name "push" -out push.p12

即可生成需要的p12