使用apicloud结合vue进行app开发。
这里只总结我所遇到并且已解决的问题方法。
1、手机白屏问题：分清楚网络数据连接原因还是代码原因
（1）网络数据连接问题
这个问题通常在app第一次安装启动时出现
问题分析：app启动数据请求直接进行，但此时部分手机需要app联网权限的确认，这时数据请求是在没有网络的条件下进行，造成数据获取失败，在首页数据请求过多的情况下出现白屏
解决方法:(启动页方法请自行百度，这里只介绍我所使用的方法)
在你需要的页面添加数据连接的监听事件，当app获取网络权限或者从断网状态转变成联网状态时重新进行数据的获取。
注意：需要刷新的页面有swiper轮播数据时把swiper轮播隔出来，不然swiper轮播会混乱
apiready = function(){
vm.tid = api.pageParam.obj; //接收传参数据
vm.init(); //所需数据的获取与数据赋值
api.addEventListener({
name:'online' //监听网络连接状态
}, function(ret, err){
if(ret.connectionType) {
vm.init(); //网络连接时重新进行数据请求
}
});
}
（2）代码原因
问题分析与解决方法:
- 在vue中使用ES6语法：vue中使用es6语法很方便，但是在没有bable转码器进行转码的情况下部分手机并不能识别es6，所以还是老老实实使用es5语法吧!
- config的配置文件中出现注释：在这个问题纠正过来以后我才恍然大悟我犯了这么一个超低级的错误。
2、图片轮播问题：多个轮播块之间的冲突和获取数据顺序
（1）多个轮播块之间发生冲突
问题出现：同一个页面多个轮播模块一起运行，比如一个页面有两个左右的图片轮播，如果使用同一个轮播插件，那么你会发现，在某些时候两个轮播模块滚动是同步的，而你对轮动的设置对其中一个来说并没有生效
这里显示一个左右轮播一个上下公告轮播使用不同轮播方式的解决方法
解决方法:在你确定同一个插件使用会出现同步的情况下就使用两个插件分别进行轮播滚动吧。(不仅仅适用于apicloud，出现类似情况都可用)
比如说apicloud的app首页中，一个大图左右轮播，一个公告上下轮播。
其中左右轮播使用apicloud封装好的模块“UIScrollPicture”，按照文档实例将数据带入即可
<!-- 轮播滚动装载元素 -->
<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, //需要进行轮播的图片数组
},
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
});
上下轮播引入swiper轮播框架进行公告轮播
<!-- 滚动着的变化公告 -->
<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', // 垂直切换选项
speed: 400,
height: document.querySelector(".aui-row").offsetHeight,
loop: true, // 循环模式选项
observer:true,//修改swiper自己或子元素时，自动初始化swiper
observeParents:true,//修改swiper的父元素时，自动初始化swiper
autoplay: {
delay: 2000,//2秒切换一次
disableOnInteraction:false, //解决滑动后不能轮播的问题
},
onSlideChangeEnd: function(swiper){
swiper.update();
mySwiper.startAutoplay();
mySwiper.reLoop();
}
})
};
（2）数据获取先后问题
为什么有这个问题：
首先总结一下轮播会出现的问题：
在页面铺设时事先把轮播装载容器设好，数据获取后只进行数据的填充 ==> 轮播要么停止进行只显示一个，要么轮播只运行一次就停止
这个问题主要是针对swiper轮播的
swiper框架功能很强大，但是它的脾气也很大，比如和页面刷新不兼容、数据请求完元素生成以后再进行轮播设置。
上面的代码是部分代码，下面附上轮播完整代码
var UIScrollPicture = api.require('UIScrollPicture');
$api.get('轮播数据请求地址',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]; //把获取到的轮播图片地址变成网络图片地址（添加上服务器域名）
}
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; //公告轮播数据
// 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(); //开始进行轮播
};
},'json');
3、app判断用户是否登录
app一般使用token值进行用户是否登录的判断，使用时直接进行判断即可。
但需要注意的是是否登录进行判断时需要判断的是正负，而不是token是否为空
if($api.getStorage("token")) {
api.openWin({
name: 'name',
url: 'widget://win.html',
pageParam: {
name: name,
title: title,
url: url,
obj: obj
}
});
}else {
// 用户未登录，点击事件触发跳转到登录界面
// api.toast({
// msg: '您还未登录，请先进行登录！',
// duration: 1000,
// location: 'middle'
// });
toLogin();
}
网友评论