vue + plus开发app记录

由于Ios限制，webview要使用wkwebview，hbuilder目前默认的就是它，

canvas 生成海报

网络图片为跨域，服务器需要设置header("Access-Control-Allow-Origin: *");, js代码要设置img.setAttribute('crossOrigin', 'anyonous');

如果图片是从后台获取的，网页里不会有问题，在wkwebview下，app第一次安装之后，图片会加载失败，经过反复踩坑，最终确定了是缓存机制问题，解决方法在图片路径后加时间戳"?timestamp=" + new Date().getTime()

保存图片到相册

canvas生成base64图片，通过plus的bitmap和gallery接口保存到相册，代码如下

export function toLocal (base64, id){ // base64缓存为本地路径
    if (window.plus){
        return new Promise((resolve, reject)=>{
            let bitmap = new window.plus.nativeObj.Bitmap(id)
            let exportUrl = '';

            bitmap.loadBase64Data(base64, ()=>{
                bitmap.save(`_doc/${Math.random().toString(36).substr(2)}.jpg`, {overwrite: true}, (event)=>{
                    exportUrl = event.target
                    console.log(exportUrl);

                    resolve(exportUrl)
                }), error =>{
                    Toast(JSON.stringify(error))
                    reject(error)
                }
            }), err =>{
                Toast(JSON.stringify(err))
                reject(err)
            }
        })
    }else {
        Toast('window.plus is undefined')
    }
}

export function saveToGallery (url, id){ // 下载本地图片到相册
    if (window.plus){
        window.plus.gallery.save(url, ()=>{
            const tarbitmap = window.plus.nativeObj.Bitmap.getBitmapById(id)
            tarbitmap.clear()
            Toast('已保存到手机相册')
        })
    } else {
        Toast('window.plus is undefined')
    }
}

推送

ios比较简单，看文档就可以，android离线无法接受推送，客服回复是如果手机上安装有其他集成个推的app，可以唤醒接收推送，否则不行，也可以花钱集成厂商sdk。

推送选择穿透消息，具体操作由本地处理。
android如果消息格式不对，无法唤醒click事件，{title: '', content: '', payload: {}}

document.addEventListener("plusready", ()=>{
            // 清除右上角消息数
            plus.push.clear();
            plus.runtime.setBadgeNumber(0);

            plus.push.addEventListener("click", ( msg )=> {
                if (isIOS()){
                    // plus.nativeUI.alert('ios click')
                    // plus.nativeUI.alert(JSON.stringify(msg));

                    var payload;  
                    if (msg.type == "click") { //APP离线点击包含click属性，这时payload是JSON对象  
                        payload = msg.payload;  
                    } else { //APP在线，收到消息不会包含type属性,这时的payload是JSON字符串，需要转为JSON对象  
                        payload = JSON.parse(msg.payload);  
                    }

                    if ( msg.aps ) {  // Apple APNS message  
                        //APNS下发的消息，应用在前台
                        
                    } else {
                        
                    }
                }

                if (isAndroid()){
                    
                }
            }, false);

            // 监听在线消息事件
            plus.push.addEventListener("receive", ( msg )=> {
                // plus.nativeUI.alert('main receive')
                // plus.nativeUI.alert('android receive msg：' + JSON.stringify(msg));
                if (isIOS()){
                    if (msg.aps == null && msg.type == "receive") {
                        var options = {
                            cover: false
                        };
                        
                        plus.push.createMessage(msg.payload.content, JSON.stringify(msg.payload), options);
                    }
                    // if ( msg.aps ) {  // Apple APNS message  
                    //     //APNS下发的消息，应用在前台
                        
                    // } else if ( 'LocalMSG' == msg.payload ) {   // 特殊payload标识本地创建的消息  
                    //     //本地创建的消息，通常不需要处理  
                    //     //注意：不要在这种情况下再此调用plus.push.createMessage，从而引起循环创建本地消息  
                    // } else {  
                    //     //接收到在线透传消息
                        
                    // }    
                    // // 其它逻辑
                }

                if (isAndroid()){
                    var options = {
                        cover: false
                    };
                    plus.push.createMessage(msg.payload.content, JSON.stringify(msg.payload), options);
                }
            }, false);


            // 推送
            console.log('push begain');
            var clientid, times = 0;  
            var timer = setInterval(function(){  
                if((clientid != null && clientid != "null") || times > 10){  
                    clearInterval(timer);
                    times = 0;
                    // alert('clientId获取成功：' + clientid);
                }else {
                    console.log('获取失败');
                    times += 1;
                    clientid = plus.push.getClientInfo().clientid;
                }
            },1000);
        }, false)

点击事件延迟300ms，浏览器上正常，app里会出现，解决方法是fastclick

npm i fastclick --save

FastClick.attach(document.body);　　　

加入之后会出现输入框无法获取焦点，需要重按
解决方法

FastClick.prototype.focus = function(targetElement) {
     var length;

     // Issue #160: on iOS 7, some input elements (e.g. date datetime month) throw a vague TypeError on setSelectionRange. These elements don't have an integer value for the selectionStart and selectionEnd properties, but unfortunately that can't be used for detection because accessing the properties also throws a TypeError. Just check the type instead. Filed as Apple bug #15122724.
     if (deviceIsIOS && targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month' && targetElement.type !== 'email') {
         length = targetElement.value.length;
         targetElement.focus();//加入这一句话就OK了
         targetElement.setSelectionRange(length, length);
     } else {
         targetElement.focus();
     }
 };