apicloud总结

使用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自己或子元素时，自动初始化swiperobserveParents:true,//修改swiper的父元素时，自动初始化swiperautoplay: {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();
}

apicloud总结相关推荐

apiCloud中的数据库操作mcm-js-sdk的使用
1.引入js  <script type="text/javascript" src="../pl ...
APICloud：让你的APP边框显示原生的1px
2019独角兽企业重金招聘Python工程师标准>>> APICloud无疑已是相当火的APP开发工具了,面对从web到移动APP转变的开发者可能有很多小常识并不是特别熟悉,比如这个 ...
html5转apicloud,使用APICloud编写优雅的HTML5代码
使用APICloud编写优雅的HTML5代码<一>一.实现下拉刷新: 默认样式>代码清晰简洁明了,符合ECMA262规范的callback,最少只需5行代码: apiready = ...
apicloud 基础
时间成本人力成本很多人想开发app 又碍于时间和金钱成本 . 本色对app 要求不高的话. 混合app 开发是一种很好的方式. apicloud 就是一种很好的方式. apicloud ...
一年两次新产品发布，APICloud上线App定制服务平台
9月20日,APICloud在既有的移动应用开发平台之上,推出了全新的服务体系--App定制平台,让传统企业和互联网创业公司多一个快速高效.高性价比的App开发选择.从钻研产品技术升级到提供专业企业服 ...
APICloud创始人兼CEO刘鑫：论API经济和企业移动战略
人工智能.区块链.容器技术等新兴技术的快速演进和发展,正在不断地推进企业数字化变革.8月10日,由上海市经济和信息化委员会.上海市国有资产监督管理委员会指导,上海市国有资产信息中心.上海市计算机用户协 ...
ApiCloud云端管理平台（v.20151022）
为什么80%的码农都做不了架构师?>>> ApiCloud云端管理平台标签: ApiCloud AcAdmin 在线演示 http://acadmin.weiduzi.com ...
win10 无法打开 APICloud Studio 2 的解决方案
坑爹. 新搭建了系统 apicloud studio2 打开无反应无任何报错提示双击没有方案. 弄了一天最后搞定. . 百度搜索 win10 null.sys 替换进去 C:/W ...
APICloud学习第二天——操作云数据库
//连接apicloud云数据库 var model=api.require('model');model.config({appId: 'A6008558346855',appKey: '600A5 ...
Error APICloud iOS null is not an object
简介 APICloud iOS modules 开发错误,打包上传后,编译出来的ipa包安装运行后调用modules的方法报错,错误信息"null is not an object" ...

apicloud总结

apicloud总结

1、手机白屏问题：分清楚网络数据连接原因还是代码原因

（1）网络数据连接问题

（2）代码原因

2、图片轮播问题：多个轮播块之间的冲突和获取数据顺序

（1）多个轮播块之间发生冲突

左右轮播使用apicloud封装好的模块“UIScrollPicture”，按照文档实例将数据带入即可

上下轮播引入swiper轮播框架进行公告轮播

（2）数据获取先后问题

3、app判断用户是否登录

apicloud总结相关推荐

最新文章

热门文章

apicloud总结

apicloud总结

1、手机白屏问题：分清楚网络数据连接原因还是代码原因

（1）网络数据连接问题

（2）代码原因

2、图片轮播问题：多个轮播块之间的冲突和获取数据顺序

（1）多个轮播块之间发生冲突

左右轮播 使用apicloud封装好的模块“UIScrollPicture”，按照文档实例将数据带入即可

上下轮播 引入swiper轮播框架进行公告轮播

（2）数据获取先后问题

3、app判断用户是否登录

apicloud总结相关推荐

最新文章

热门文章

左右轮播使用apicloud封装好的模块“UIScrollPicture”，按照文档实例将数据带入即可

上下轮播引入swiper轮播框架进行公告轮播