APICloud AVM多端开发 |《生鲜电商app开发》项目源码深度解析

此项目为生鲜电商app开发类应用，主要功能包括商品列表、商品详情展示、购物车、登录注册、个人中心等。
项目源码在 https://github.com/apicloudcom/avm-simple 仓库下”多端案例-生鲜电商“目录下。

项目中前端采用APICloud AVM多端开发技术进行开发，要点包括 scroll-view 滚动视图、下拉刷新、输入处理、swiper 轮播图、网络请求封装等。使用 APICloud 多端技术进行开发，实现一套代码多端运行，支持编译成 Android & iOS App 以及微信小程序。

项目后端则是使用的 APICloud 数据云 3.0 自定义云函数来构建的。

使用步骤

1. 使用 APICloud Studio 3 作为开发工具。
2. 下载本项目《生鲜电商app开发》源码。
3. 在开发工具中新建项目，并将本源码导入新建的项目中，注意更新config.xml 中的 appid 为你项目的 appid。
4. 使用 AppLoader 进行真机同步调试预览。
5. 或者提交项目源码，并为当前项目云编译自定义 Loader 进行真机同步调试预览。
6. 云编译 生成 Android & iOS App以及微信小程序源码包。

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

网络请求接口封装

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

// kn.js
u.ajax = function(p, callback) {
   var param = p;
   if (!param.headers) {
       param.headers = {};
   }
   param.headers['x-apicloud-mcm-key'] = 'cZKzX7DabDmYyfez';
   if (param.data && param.data.body) {
       param.headers['Content-Type'] = 'application/json; charset=utf-8';
   }
   if (param.url) {
       var baseUrl = 'https://a8888888888888-pd.apicloud-saas.com/api/';
       param.url = baseUrl + param.url;
   }
   api.ajax(param, function(ret, err) {
       if (callback) callback(ret, err);
       if (ret) {
           var status =  ret.status;
           if (status && status == 4001) {
               var didShowLogoutAlert = api.getGlobalData({
                   key: 'didShowLogoutAlert'
               });
               if (!didShowLogoutAlert) {
                   api.setGlobalData({
                       key: 'didShowLogoutAlert',
                       value: true
                   });

                   u.setUserInfo('');
                   api.alert({
                       msg: '登录已失效，请重新登录'
                   }, function() {
                       api.setGlobalData({
                           key: 'didShowLogoutAlert',
                           value: false
                       });
                       api.closeToWin({
                           name: 'root'
                       });
                   });
               }
           }
       }
   });
}

使用示例：

// 在 stml 页面通过 import 引入
import $kn from "../../script/kn.js"

// 调用 ajax 方法
// main.stml，从服务器端更新商品分类列表
fnGetWareTypeList() {
  var that = this;
  $kn.ajax({
      ur