本项目前端采用APICloudAVM多端开发技术进行企业APP开发，重点包括TabLayout布局、swiper轮播、rich-text富文本,scroll-view滚动查看,下拉刷新等。项目后台使用API??CloudDataCloud3.0自定义云函数搭建。使用API??Cloud多端技术进行企业APP开发，实现一套代码多端运行，支持编译成Android&iOSApp和微信小程序。项目源码在https://github.com/apicloudco...仓库的widget目录下。使用步骤：使用API??CloudStudio3作为开发工具。下载这个项目的源代码。在开发工具中新建一个项目，并将这段源码导入到新建的项目中，注意update，config.xml中的appid就是你项目的appid。使用AppLoader进行真机同步调试预览。或者提交项目源码，为当前项目云编译自定义Loader，用于真机同步调试预览。CloudCompiler为Android&iOS应用程序和微信小程序生成源码包。如果之前没有接触过APICloud开发，建议先了解一个简单项目的初始化、预览、调试、打包。请参考APICloud多端开发快速入门教程。网络请求接口封装在utils/model.js中，为每个网络请求接口封装了相应的方法。例如企业APP开发首页获取轮播接口Model.getbannersList。这些方法最终会在Model中调用Model.request方法。在请求方法中，统一管理整个项目的请求，包括处理传入参数、组装请求URL、设置请求头等，最后调用api.ajax方法发起请求。使用示例：//通过import导入import{Model}from"../../utils/model.js"//调用Model对象方法Model.getbannersList({},(res)=>{});TabBar和导航栏的实现首页使用TabLayout布局实现TabBar和导航栏，在config.xml中配置content字段，值为json文件的路径，配置TabBar、导航栏和json文件中的页面信息。//config.xmlconfig.json文件内容如下，设置navigationBar的背景色和标题文字颜色，设置每个tabBar项的图标和文字，和每个相应的页面。{"name":"root","hideNavigationBar":false,"navigationBar":{"background":"#fff","color":"#000","hideBackButton":true},"tabBar":{“scrollEnabled”：false，“background”：“#fff”，“shadow”：“#f1f1f1”，“color”：“#5e5e5e”，“selectedColor”：“#333333”，“preload”：0，“frames”":[{"name":"page1","url":"pages/index/index.stml","title":"首页"},{"name":"page2","url":"pages/case/case.stml","title":"案例"},{"name":"page3","url":"pages/join/join.stml","title":"加入联盟代理"}],"list":[{"iconPath":"images/toolbar/home@no_selected.png","selectedIconPath":"images/toolbar/home@selected.png","text":"首页"},{"iconPath":"images/toolbar/case@no_selected.png","selectedIconPath":"images/toolbar/case@selected.png","text":"案例"},{"iconPath":"images/toolbar/join@no_selected.png","selectedIconPath":"我mages/toolbar/join@selected.png","text":"JoinAgent"}]}}从上面的企业APP开发效果图我们可以看到，“JoinAgent”页面隐藏了导航栏，而其他页面有not隐藏的“加入代理”页面路径为pages/join/join.stml，我们参考微信小程序的语法将join.json文件放在同级目录下，并将其中的navigationStyle字段配置为自定义.{"navigationBarTitleText":"JoinProxy","backgroundColor":"#FFFFFF","navigationStyle":"custom"}在首页index.stml的apiready方法中，每个item的点击事件tabBar是监听的，在App端，我们需要在点击事件中动态设置页面显示和隐藏导航栏。//index.stmlapi.addEventListener({name:'tabitembtn'},function(ret){varhideNavigationBar=ret.index==2;api.setTabLayoutAttr({hideNavigationBar:hideNavigationBar,animated:false});api.setTabBarAttr({index:ret.index});});轮播图的首页路径为pages/index/index.stml，里面的轮播图是使用swiper组件实现的，使用v-for指令循环swiper-item，bannersList是定义数组类型的属性。在首页的apiready方法中，我们通过调用getbannersList方法发起网络请求，获取轮播图列表数据，赋值给bannersList属性。这里监听swiper-item的点击事件，点击跳转到详情页。轮播的宽度随着屏幕的宽度而变化，高度计算属性swiperHeight是动态计算的。计算：{swiperHeight(){返回api.winWidth*0.42;}}rich-text富文本的使用APICloud是一个企业应用开发项目，是一种信息展示类型。运营商会在管理后台直接编辑提交富文本信息，所以在项目中很多地方都使用了富文本来展示信息。例如，在主页上，产品展示和关于信息部分使用富文本。如果富文本没有设置高度，那么它的高度就是里面内容的高度。富文本用于展示HTMLString片段。从服务器获取HTMLString后，我们调用$util.fitRichText方法来处理HTMLString。在fitRichText方法中，为img标签添加了最大宽度限制，防止图片因宽度过大而溢出。//util.jsfitRichText(richtext,width){varstr=`<视图类="item"data-id={item.id}onclick={this.openCaseInfo}v-for="(item,index)incaseList">{{item.title}}{loadStateDesc}下拉刷新使用scroll-view默认的下拉刷新样式，使用refresher-enabled字段开启下拉刷新，绑定refresherTriggered属性给refresher-triggered字段来控制下拉刷新状态，需要注意的是，在刷新事件回调方法中，我们需要主动将refresherTriggered的值设置为true，数据后设置为false被加载，这样绑定值发生变化，刷新状态可以通知到原来的。onrefresherrefresh(){this.data.refresherTriggered=true;this.loadData(false);}滚动到底部监听scroll-view的scrolltolower事件，滚动到底部后自动加载更多数据。加载更多下拉刷新就是调用loadData方法请求数据，通过loadMore参数区分，做分页请求处理。loadData(loadMore){如果(this.data.loading){返回;}this.data.loading=true;那个=这个；变量限制=10；varskip=loadMore?that.data.skip+1:1;letparams={data:{values:{status:1,skip:skip,limit:limit}}}Model.getCasesList(params,(res)=>{if(res&&res.status==0){让项目=res.data.items;that.data.haveMoreData=items.length==limit;if(loadMore){that.data.caseList=that.data.caseList.concat(items);}else{that.data.caseList=items;}that.data.skip=skip;}else{that.data.haveMoreData=false;}that.data.loading=false;that.data.refresherTriggered=false;});}滚动视图滚动到指定元素在“联盟代理”页面（pages/join/join.stml），最外层是一个滚动视图，里面有两个类别：类别列表和类别内容。点击分类列表中的某一项后，会自动滚动到对应的分类内容，使分类内容可见{item.title}{item.title}滚动到指定视图是通过scroll-view的scroll-into-view属性实现的，这里绑定了viewId属性，在类别列表项的点击事件onitemclick中，改变viewId属性的值，即类别内容中某一项的id，从而实现滚动到指定视图。onitemclick(e){varid=e.currentTarget.数据集.id;this.data.viewId='内容'+id;this.data.viewId=null;}平台差异化在多终端开发中，难免会遇到不同平台的差异，需要在运行时进行判断处理，在utils/util.js中封装了isApp方法，通过api.platform属性判断当前运行环境。//util.jsisApp(){if(api.platform&&api.platform=='app'){returntrue;}returnfalse;}例如在pages/web/web.stml中我们使用v-if,v-else指令加载不同平台使用不同组件的网页链接。本文只是简单介绍一下使用API??CloudAVM需要注意的问题企业APP开发多端工具，想要熟练掌握开发技巧，还是需要自己通过源码不断练习！
