Cordova+Vue+Mint-UI+Android构建Andriod app Cordova插件-极光推送(三)

步骤一:极光推送账号注册及应用创建

应用名与之对应

步骤二、推送设置-设置包名(必须一致)

 

 

步骤三、安装cordova极光插件: cordova plugin add jpush-phonegap-plugin --variable APP_KEY=**********

步骤四、在main.js初始化极光推送

 

document.addEventListener("deviceready", function () {
            //手机物理控件监听
            let exitAppTicker = 0;
            document.addEventListener("backbutton", function () {
                if (exitAppTicker == 0) {
                    exitAppTicker++;
                    setTimeout(function () {
                        exitAppTicker = 0;
                        history.go(-1);
                    }, 200);
                } else if (exitAppTicker == 1) {
                    navigator.app.exitApp();
                }
            }, false);

            document.addEventListener('jpush.receiveRegistrationId', function (event) {
                console.log(JSON.stringify(event));
                alert("receiveRegistrationId" + JSON.stringify(event));
            }, false);

            document.addEventListener("jpush.openNotification", function (event) {
                var alertContent;
                if (device.platform == "Android") {
                    alertContent = event.alert;
                } else {
                    alertContent = event.aps.alert;
                }
                console.log(alertContent);
                window.alert(alertContent);
            }, false);

            initiateUI()
        }, false)

        function initiateUI() {
            try {
                window.JPush.setDebugMode(true);
                window.JPush.init();
                window.setTimeout(getRegistrationID, 10000);

                if (device.platform != "Android") {
                    window.JPush.setApplicationIconBadgeNumber(0);
                }
            } catch (exception) {
                alert('An exception has been occured when init JPush plugin.' + exception);
            }
        }

        function getRegistrationID() {
            window.JPush.getRegistrationID(onGetRegistrationID)
        }

        function onGetRegistrationID(data) {
            try {
                if (data.length === 0) {
                    alert('id is null')
                    var t1 = window.setTimeout(getRegistrationID, 5000);
                } else {
                    alert(data)
                }
            } catch (exception) {
                console.log(exception);
            }
        }

步骤五、平台推送测试

手机接收:

整合vue+vant和cordova-sqlite-storage可以实现在移动端使用SQLite数据库存储数据,下面给出详细步骤: 1. 安装cordova-sqlite-storage插件 使用命令行工具进入你的cordova项目根目录,执行以下命令安装cordova-sqlite-storage插件: ``` cordova plugin add cordova-sqlite-storage ``` 2. 在vue项目中安装vue-cordova插件 使用命令行工具进入你的vue项目根目录,执行以下命令安装vue-cordova插件: ``` npm install vue-cordova --save ``` 3. 在main.js中引入vue-cordova插件 在main.js文件中添加以下代码引入vue-cordova插件: ```javascript import VueCordova from 'vue-cordova' Vue.use(VueCordova) ``` 4. 创建cordova.js文件 在vue项目的static文件夹下创建cordova.js文件,并添加以下代码: ```javascript document.addEventListener('deviceready', onDeviceReady, false); function onDeviceReady() { console.log('Cordova: device ready'); } ``` 5. 在index.html中引入cordova.js文件 在index.html文件中添加以下代码引入cordova.js文件: ```html <script src="static/cordova.js"></script> ``` 6. 在vue组件中使用cordova-sqlite-storage插件vue组件中使用以下代码调用cordova-sqlite-storage插件: ```javascript this.$cordovaSQLite.execute(db, 'CREATE TABLE IF NOT EXISTS test_table (id integer primary key, data text)'); ``` 其中db是通过以下代码获取的: ```javascript var db = window.sqlitePlugin.openDatabase({name: "my.db", location: 'default'}); ``` 至此,vue+vant与cordova-sqlite-storage整合完成,你可以在移动端使用SQLite数据库存储数据了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值