APICloud 多端开发教程｜《服饰商城》项目开发要点

点击APICloud 关注并星标

一起学习多端开发

◔

hi~APICloud多端开发技术系列课程更新啦！

本次讲解项目是一个在线服饰商城类应用，主要功能包括商品展示、商品搜索、购物车、订单管理等。

前端使用了avm.js多端开发技术，可同时编译为Android & iOS App和微信小程序；

后端使用 APICloud 数据云3.0 云函数自定义接口。

■技术要点

本项目课程要点包括 TabLayout 布局、swiper 轮播图、rich-text 富文本、scroll-view 滚动视图、下拉刷新、组件封装等。

■使用步骤

1. 使用 APICloud Studio 3 作为开发工具。

2. 下载本项目源码。

3. 在开发工具中新建项目，并将本源码导入新建的项目中，注意更新 config.xml 中的appid为你项目的appid。

4. 使用AppLoader进行真机同步调试预览。

5. 或者提交项目源码，并为当前项目云编译自定义Loader 进行真机同步调试预览。

6. 云编译生成Android & iOS App 以及微信小程序源码包。

如果之前未接触过 APICloud 开发，建议先了解一个简单项目的初始化、预览、调试和打包等操作，请参考APICloud多端开发快速上手教程：

https://docs.apicloud.com/apicloud3/?uzchannel=238。

■开发详情

┋网络请求接口封装

在 script/util.js 中，封装了统一的网络请求接口 ajax 方法，对整个项目的请求进行统一管理，包括处理传入参数、拼装完整请求url、设置请求头等，最后调用 api.ajax 方法发起请求，在请求的回调方法里面还对 cookie 是否过期做了全局判断，过期后会清除本地用户登录信息，并提示重新登录。

┋ 用户登录信息管理

在 script/user.js 中，对用户登录信息进行了封装，做了统一管理，可以方便地判断是否登录、保存和获取用户信息、以及判断登录是否过期的 accessToken 等。

┋ TabBar 和导航栏的实现

首页使用了 TabLayout 布局来实现 TabBar 和导航栏，在config.xml 里面配置 content 字段，值为 json 文件路径，在 json 文件中配置 TabBar、导航栏和页面信息。

config.json文件内容如下，设置了navigationBar的背景色和标题文字颜色，设置了tabBar每项的icon和文字，以及每项对应的页面。

在首页 main1.stml 的 apiready 方法里面则监听了 tabBar 每项的点击事件，在 App 端，我们需要在点击事件里面动态设置页面显示、隐藏导航栏。

┋ 轮播图实现

首页和商品详情页面都使用了轮播图，这里以首页为例，首页路径为 pages/main1/main1.stml，里面轮播图使用 swiper 组件实现，使用 v-for 指令循环 swiper-item，bannersList 为定义的数组类型的属性。这里监听了图片的 click 事件，点击后需要跳转到对应的详情页面。这里使用了自定义的指示器，通过设置指示器容器的 position 定位属性为 absolute，来让指示器显示到当前轮播图的上面。

为保持不同分辨率设备上面图片显示比例不变，需要让轮播图的宽度跟随屏幕宽度变化，高度则通过计算属性 swiperHeight 来动态计算得到。

┋ rich-text 富文本的使用

在商品详情页中，商品详情部分就是使用的 rich-text 来展示的，使用时如果没为 rich-text 设置高度，其高度就为里面内容的高度。

rich-text 用于展示 HTML String 片段，在从服务器获取到 HTML String 后，我们调用 $util.fitRichText 方法处理了一下 HTML String，在 fitRichText 方法中为 img 标签加了最大宽度的限制，以防止图片宽度过大导致显示溢出。

┋ 下拉刷新、滚动到底部加载更多

在“分类商品列表”页面（pages/goodslist/goodslist.stml），通过 scroll-view 实现了商品列表展示，同时实现了下拉刷新、滚动到底部加载更多功能。

下拉刷新使用了 scroll-view 默认的下拉刷新样式，使用 refresher-enabled 字段来开启下拉刷新，为 refresher-triggered 字段绑定了 refresherTriggered 属性来控制下拉刷新状态。需要注意的是，在刷新的事件回调方法里面，我们需要主动设置 refresherTriggered 的值为 true，在数据加载完成后再设置为 false，这样绑定的值有变化，刷新状态才能通知到原生里面。

滚动到底部监听了scroll-view的scrolltolower事件，在滚动到底部后自动加载更多数据，加载更多和下拉刷新都是调用 loadData 方法请求数据，通过 loadMore 参数来进行区分，做分页请求处理。

┋ 平台差异化处理

在多端开发中，难免会遇到不同平台差异化的地方，需要在运行期间做判断处理，为此在 utils/util.js 中封装了 isApp、isMp 方法，里面通过 api.platform 属性判断当前运行环境是 App 端还是小程序端。

历史多端开发教程