使用apicloud結(jié)合vue進(jìn)行app開發(fā)。
這里只總結(jié)我所遇到并且已解決的問題方法。
目錄：
1、apicloud新手總結(jié)
2、apicloud同原生app與h5的數(shù)據(jù)交互
3、apicloud七牛云視頻上傳并截取第一幀js實(shí)現(xiàn)

1、手機(jī)白屏問題：分清楚網(wǎng)絡(luò)數(shù)據(jù)連接原因還是代碼原因

（1）網(wǎng)絡(luò)數(shù)據(jù)連接問題

這個(gè)問題通常在app第一次安裝啟動(dòng)時(shí)出現(xiàn)
問題分析：app啟動(dòng)數(shù)據(jù)請求直接進(jìn)行，但此時(shí)部分手機(jī)需要app聯(lián)網(wǎng)權(quán)限的確認(rèn)，這時(shí)數(shù)據(jù)請求是在沒有網(wǎng)絡(luò)的條件下進(jìn)行，造成數(shù)據(jù)獲取失敗，在首頁數(shù)據(jù)請求過多的情況下出現(xiàn)白屏
解決方法:(啟動(dòng)頁方法請自行百度，這里只介紹我所使用的方法)
在你需要的頁面添加數(shù)據(jù)連接的監(jiān)聽事件，當(dāng)app獲取網(wǎng)絡(luò)權(quán)限或者從斷網(wǎng)狀態(tài)轉(zhuǎn)變成聯(lián)網(wǎng)狀態(tài)時(shí)重新進(jìn)行數(shù)據(jù)的獲取。
注意：需要刷新的頁面有swiper輪播數(shù)據(jù)時(shí)把swiper輪播隔出來，不然swiper輪播會混亂

apiready = function(){
    vm.tid = api.pageParam.obj;     //接收傳參數(shù)據(jù)
    vm.init();                 //所需數(shù)據(jù)的獲取與數(shù)據(jù)賦值
    api.addEventListener({
    name:'online'           //監(jiān)聽網(wǎng)絡(luò)連接狀態(tài)
    }, function(ret, err){
    if(ret.connectionType) {
        vm.init();      //網(wǎng)絡(luò)連接時(shí)重新進(jìn)行數(shù)據(jù)請求
     }
    });
}

（2）代碼原因

問題分析與解決方法:

• 在vue中使用ES6語法：vue中使用es6語法很方便，但是在沒有bable轉(zhuǎn)碼器進(jìn)行轉(zhuǎn)碼的情況下部分手機(jī)并不能識別es6，所以還是老老實(shí)實(shí)使用es5語法吧!
• config的配置文件中出現(xiàn)注釋：在這個(gè)問題糾正過來以后我才恍然大悟我犯了這么一個(gè)超低級的錯(cuò)誤。

2、圖片輪播問題：多個(gè)輪播塊之間的沖突和獲取數(shù)據(jù)順序

（1）多個(gè)輪播塊之間發(fā)生沖突

問題出現(xiàn)：同一個(gè)頁面多個(gè)輪播模塊一起運(yùn)行，比如一個(gè)頁面有兩個(gè)左右的圖片輪播，如果使用同一個(gè)輪播插件，那么你會發(fā)現(xiàn)，在某些時(shí)候兩個(gè)輪播模塊滾動(dòng)是同步的，而你對輪動(dòng)的設(shè)置對其中一個(gè)來說并沒有生效
這里顯示一個(gè)左右輪播一個(gè)上下公告輪播使用不同輪播方式的解決方法
解決方法:在你確定同一個(gè)插件使用會出現(xiàn)同步的情況下就使用兩個(gè)插件分別進(jìn)行輪播滾動(dòng)吧。(不僅僅適用于apicloud，出現(xiàn)類似情況都可用)
比如說apicloud的app首頁中，一個(gè)大圖左右輪播，一個(gè)公告上下輪播。
其中左右輪播使用apicloud封裝好的模塊“UIScrollPicture”，按照文檔實(shí)例將數(shù)據(jù)帶入即可

<!-- 輪播滾動(dòng)裝載元素 -->
<div id="aui-slide2"></div>

var UIScrollPicture = api.require('UIScrollPicture');  //引入模塊
UIScrollPicture.open({
    rect: {                 //輪播的位置，其中 $api.dom("#aui-slide2")是輪播圖片的裝載元素
        x: $api.dom("#aui-slide2").offsetLeft,   
        y: $api.dom("#aui-slide2").offsetTop,
        w: $api.dom("#aui-slide2").clientWidth,
        h: $api.dom("#aui-slide2").clientHeight
    },
    data: {
        paths: imgs,        //需要進(jìn)行輪播的圖片數(shù)組
    },
    styles: {
        indicator: {
          dot:{                 //小圓點(diǎn)的設(shè)置
              w:10,
              h:10,
              r:5,
              margin:4.5
           },
           align: 'center',
           color: '#FFFFFF',
           activeColor: '#d45151'
        }
    },
    placeholderImg: 'widget://res/slide1.jpg',
    contentMode: 'scaleToFill',
    interval: 3,
    fixedOn: "index",
    loop: true,
    fixed: false
});

上下輪播引入swiper輪播框架進(jìn)行公告輪播

<!-- 滾動(dòng)著的變化公告 -->
<div class="aui-col-xs-9">
    <div class="swiper-container">
        <ul class="swiper-wrapper"></ul>
    </div>
 </div>

    // 輪播公告
                            var bannerHtml = '';
                            vm.notice = data.mess_list;
                            // alert(JSON.stringify(vm.notice));
                            for(var i=0;i<vm.notice.length;i++){
                                 bannerHtml+='<li style="padding-left:.75rem;font-size:.65rem;height:1.45rem;" class="swiper-slide aui-ellipsis-1" tapmode onclick="show('+i+')"><span style="color:#000;font-weight:bold;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">'+vm.notice[i]+'</span></li>'
                            }
                            $api.html($api.dom(".swiper-wrapper"), bannerHtml);
                            swiper();

        function swiper() {
            var mySwiper = new Swiper ('.swiper-container', {
                direction: 'vertical', // 垂直切換選項(xiàng)
                speed: 400,
                height: document.querySelector(".aui-row").offsetHeight,
                loop: true, // 循環(huán)模式選項(xiàng)
                observer:true,//修改swiper自己或子元素時(shí)，自動(dòng)初始化swiper
                observeParents:true,//修改swiper的父元素時(shí)，自動(dòng)初始化swiper
                autoplay: {
                    delay: 2000,//2秒切換一次
                    disableOnInteraction:false, //解決滑動(dòng)后不能輪播的問題
                },
                onSlideChangeEnd: function(swiper){
        　　　swiper.update();
        　　　mySwiper.startAutoplay();
        　　  mySwiper.reLoop();
                }
            })
        };

（2）數(shù)據(jù)獲取先后問題

為什么有這個(gè)問題：
首先總結(jié)一下輪播會出現(xiàn)的問題：

在頁面鋪設(shè)時(shí)事先把輪播裝載容器設(shè)好，數(shù)據(jù)獲取后只進(jìn)行數(shù)據(jù)的填充 ==> 輪播要么停止進(jìn)行只顯示一個(gè)，要么輪播只運(yùn)行一次就停止

這個(gè)問題主要是針對swiper輪播的

swiper框架功能很強(qiáng)大，但是它的脾氣也很大，比如和頁面刷新不兼容、數(shù)據(jù)請求完元素生成以后再進(jìn)行輪播設(shè)置。
上面的代碼是部分代碼，下面附上輪播完整代碼

var UIScrollPicture = api.require('UIScrollPicture');
$api.get('輪播數(shù)據(jù)請求地址',function(ret){
    if(ret["code"] == 1) {
        var data = ret.data;
        // 左右輪播圖片
        vm.img = [];
        var imgs = data.banner_list;   //輪播圖片
        for(var j=0;j<imgs.length;j++) {
            // vm.img.push(vm.pathUrl+imgs[j]);
            imgs[j] = vm.pathUrl+imgs[j];     //把獲取到的輪播圖片地址變成網(wǎng)絡(luò)圖片地址（添加上服務(wù)器域名）
        }
        UIScrollPicture.open({
            rect: {
                x: $api.dom("#aui-slide2").offsetLeft,
                y: $api.dom("#aui-slide2").offsetTop,
                w: $api.dom("#aui-slide2").clientWidth,
                h: $api.dom("#aui-slide2").clientHeight
            },
            data: {
                paths: imgs,
            },
            styles: {
                indicator: {
                    dot:{
                        w:10,
                        h:10,
                        r:5,
                        margin:4.5
                    },
                    align: 'center',
                    color: '#FFFFFF',
                    activeColor: '#d45151'
                }
            },
            placeholderImg: 'widget://res/slide1.jpg',
            contentMode: 'scaleToFill',
            interval: 3,
            fixedOn: "index",
            loop: true,
            fixed: false
        });
        // 輪播公告
        var bannerHtml = '';
        vm.notice = data.mess_list;      //公告輪播數(shù)據(jù)
        // alert(JSON.stringify(vm.notice));
        for(var i=0;i<vm.notice.length;i++){       //生成輪播元素
             bannerHtml+='<li style="padding-left:.75rem;font-size:.65rem;height:1.45rem;" class="swiper-slide aui-ellipsis-1" tapmode onclick="show('+i+')"><span style="color:#000;font-weight:bold;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">'+vm.notice[i]+'</span></li>'
        }
        $api.html($api.dom(".swiper-wrapper"), bannerHtml);
        swiper();     //開始進(jìn)行輪播
    };
},'json');

3、app判斷用戶是否登錄

app一般使用token值進(jìn)行用戶是否登錄的判斷，使用時(shí)直接進(jìn)行判斷即可。
但需要注意的是是否登錄進(jìn)行判斷時(shí)需要判斷的是正負(fù)，而不是token是否為空

if($api.getStorage("token")) {
    api.openWin({
        name: 'name',
        url: 'widget://win.html',
        pageParam: {
            name: name,
            title: title,
            url: url,
            obj: obj
        }
    });
}else {
    // 用戶未登錄，點(diǎn)擊事件觸發(fā)跳轉(zhuǎn)到登錄界面
    // api.toast({
        //     msg: '您還未登錄，請先進(jìn)行登錄！',
        //     duration: 1000,
        //     location: 'middle'
    // });
    toLogin();
}