前端大本营

HTML5,CSS3,Responsive,资料站
背景

日企头头的需要,使用日本Monaca的HTML5 APP开发,制作一款简单的国内网页式APP,(本内容针对安卓,所以如果你是iOS系统可以略过)。制作其实简单,将静态页面上传到 Monaca的工作目录即可。可是还要弄个什么push推送,由于安卓的推送老祖是谷歌,当然在国内是被屏蔽的,那么Monaca的自带后台push也是基于谷歌的,当然选择不能用啊。
经过2天的摸索,总算叫我利用国内的极光推送服务,成功的实现了功能。

1. 注册极光
注册网站: https://www.jiguang.cn/
成功后,在后台,选择【极光开发者服务】→ 【创建应用】
在应用名称处,输入应用名称。
应用图标处,上传你的应用ICON,即可。
这样你在你的应用信息版面可以看到你刚刚创建的应用,选择设置,你就可以看到你的应用的 AppKey了,这个很重要,请自行复制好,之后要用到。
在下面找到【推送设置】,进入选择 【Android】, 在应用包名的地方输入你的 app的 パッケージ名, 即可。这里例子用”com.ttwinbug.app” 这个名称很重要,请自行复制好,之后要用到。


2. 下载极光
下载客户端集成插件 ,因为我们是基于HTML5开发的,所以下载PhoneGap版 https://github.com/jpush/jpush-phonegap-plugin
下载后不要着急上传到你的monaca 项目里,我们需要进行一些修改。


3. 修改极光推送插件的配置文件
使用文本编辑器,打开压缩文件根目录里的plugin.xml文件,找到 部分,并按照下面的样子进行修改。
    <!-- dependencies -->
    <dependency id="org.apache.cordova.device" />
    <dependency id="cordova-plugin-device" />
    <dependency id="cordova-plugin-jcore" />


查找 ,并按照第2步里面的 应用包名进行修改。

<category android:name="com.impresstech.compare"></category> 

查找 并按照第2步里面的 AppKey进行修改。
<meta-data android:name="JPUSH_APPKEY" android:value="2e4ba62d79de5febf2ace3bd" />

都是多数替换,不要只复制一处, 修改好后压缩成zip文件。 上传到你的monaca项目里的 【プロジェクト】下的【Condovaプラグイン】进行 Condovaプラグインのインポート
安装完后,在【有効なプラグイン】会显示JPush块,选择设置
填入你的AppKey
APP_KEY=2xxsdfsefdsfesdfesfd



4. 在代码中输入相应的js代码
<script>
document.addEventListener("deviceready",function(){    
    //插件初始化	
    window.plugins.jPushPlugin.init();
    }, 
    false
);
</script>

之后你就可以顺利的进行安卓的生成了。将生成好的apk安装到手机

5. push送信
我们再次回到极光推送的后台,进入你的应用
选择【推送】→ 【发送通知】
填好内容,选择好 安卓平台,立即送信即可。这样我们就完成了整个推送app的制作过程。
Posted in Monaca App开发, 本站原创 | Monaca 安卓app如何添加国内push推送(极光推送)已关闭评论

在使用这个插件的时候, 出现很多的问题,首先就是网上大家都遇到的只显示工具栏,没有按钮的问题(iOS开发)。
多处查找资料,最后还是在国外的网站上发现了解决方法,国内的说明很多都失效或是干脆没用。

无按钮解决方法
var ref = cordova.ThemeableBrowser.open(url, '_blank', {
                statusbar: {
                    color: '#ffffff00'  #元代码为#ffffffff,导致状态栏纯白什么也看不见。最后两位为透明度设置。
                },
                toolbar: {
                    height: 44,
                    color: '#f0f0f0ff'
                },
                title: {
                    color: '#003264ff',
                    showPageTitle: true
                },
                backButton: {
                    wwwImage: 'img/back@2x.png',  #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    wwwImagePressed: 'img/back_pressed.png',   #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    width: 15,
                    height: 22,
                    align: 'left',
                    wwwImageDensity: 1,
                    event: 'backPressed'
                },
                forwardButton: {
                    wwwImage: 'img/forward@2x.png',   #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    wwwImagePressed: 'img/forward_pressed@2x.png',   #注意这个部分,原来是img,我是用了自定义按钮样式的方法, 文件夹为根目录下img,不是插件目录下
                    wwwImageDensity: 1,
                    align: 'right',
                    event: 'forwardPressed'
                },
                backButtonCanClose: true
            }).addEventListener('backPressed', function(e) {
                //alert('back pressed');
            }).addEventListener(cordova.ThemeableBrowser.EVT_ERR, function(e) {
                console.error(e.message);
            }).addEventListener(cordova.ThemeableBrowser.EVT_WRN, function(e) {
                console.log(e.message);
            }).addEventListener('loadstop', function(event) {
                // login & passの保存
                var set_login = 'localStorage.setItem("login", $("#user_login").val() );';
                var set_pass = 'localStorage.setItem("pass", $("#user_pass").val() );';
                ref.executeScript({ code: '$("#wp-submit").click(function(){' + set_login + set_pass + '});' });
            });

看了我代码里的说明还不赶快去试试。

附带插件地址

Posted in Monaca App开发, 本站原创 | PhoneGap的 In-App Browsers扩展插件 ThemeableBrowser插件的使用方法已关闭评论