APICloud实战--每日生鲜App

每日生鲜App布局及窗口切换

关于APICloud的一些入门操作,这里我就不废话了,不清楚的建议去看看我的另一篇APICloud的入门博客https://blog.csdn.net/qq_40976321/article/details/99933311

步骤一:登录APICloud并创建一个新应用

首先去APICloud的官网平台登陆https://www.apicloud.com/ 之后创建一个新应用。

添加界面图标及启动页,注意图片为png格式,且按照规定的图片尺寸去调整。

去创建证书

成功创建证书,IOS的证书需要IOS的账户,不过这个IOS证书并不会对项目有影响,后期需要可以再去创建IOS证书。

在云编译中设置好自己的应用属性,之后点击云编译进行编译。

云编译完成之后,选择模块—自定义loader—编译,之后打开浏览器,扫描二维码,下载测试版的app进行真机测试。

在手机上安装测试app,打卡效果

步骤二:使用APICloud IDE打开项目,并同步手机

实际上在我们的应用创建成功以后,就已经生成了一个本地应用框架,可以打开IDE查看

--下载APICloud IDE http://www.apicloud.com/dev

下载完成之后,进行解压,并且运行exe文件,这是弹出一个登陆窗口,输入我们的账户密码进行登录。

在APICloud IDE中 顶部菜单栏 代码管理—代码检出—APICloud云端应用—x选择自己的项目,选择自己存放的路径,就可以看到代码了。

ApiCloud一键真机测试,选择自己的项目—右击—查看wifi真机同步IP和端口

连接上app之后,选择项目—右击—wifi全量同步,之后会更新界面内容,这时基本默认界面就已经出现了,接着可以设置自己的页面了。

步骤三:在APICloud IDE编辑器中清除默认布局样式,搭建自己的布局

--(1)清除index默认样式,并设置打开的窗口页面main.html。

--(2)清除main页面的默认样式,添加自己的样式 ,添加顶部导航

Login界面导航栏

Register界面导航栏

手机app中效果展示:

--(3)搭建app整体框架,完成app静态数据版本

将导航栏的父盒子设置成弹性布局,子盒子平分父盒子空间

实现左右滑动初步效果(测试阶段就随意编辑了页面,望见谅)

效果展示

在左右滑动切换时添加函数,使得内容与标题始终保持一致。

手机端效果展示:

目前已经实现了滑动切换,但是点击切换还未实现,下一步实现点击导航进行切换,我们需要在菜单栏内设置点击事件,点击时触发函数。

组件之间的传值,通过pageParam,另一个窗口通过api.pageParem.name来获取传递过来的值。

手机app中效果展示:

项目源码:链接:https://pan.baidu.com/s/1sAfjQgC8diR67IhuIMUBAQ

提取码:x6w4

本教程只是基本的布局及窗口切换教程,希望对您能有所帮助,如果对于本教程还有不清楚的地方,建议去看看相关的视频教程https://ke.qq.com/course/328624?taid=2559186328421296

APICloud实战--每日生鲜App相关推荐

  1. Apicloud开发新闻类App实战项目-老孟编程

    Apicloud开发新闻类App实战项目-老孟编程 课程名称:Apicloud开发新闻类App实战项目 讲师:孟老师 课程介绍: 技术点包括: 1:vue实现apicloud开发脚手架--超级实用通用 ...

  2. Android项目实战:账本APP开发

    好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star,更多文章请前往:目录导航 Java项目实战:账本APP服务 ...

  3. 有没有能够在待办事项完成后标记任务已完成的每日计划APP?

    有没有一款每日计划APP能够在待办事项完成后标记任务已完成?这样一款每日计划APP是有的,而且还能够苹果安卓双系统同步使用- 云便签敬业签是一款待办事项任务清单.每日计划安排类办公工具,其手机APP包 ...

  4. 生鲜APP开发解决方案

    生鲜APP概述 生鲜APP是针对社区的生鲜宅配平台手机客户端,以B2C电子商务为载体,以生鲜直投站为社区服务点,由农业生产基地直供地产生鲜至社区,短途冷链配送,直投保鲜柜智能保鲜,从农产品基地到餐桌全 ...

  5. 搭建开发环境——Python实战:Web App 开发 Day 01

    1. 背景介绍 Python 的功能十分强大,因其强大而丰富的开源包,让其可以实现高级爬虫,可以实现机器学习算法,可以应用到深度学习中,也可以开发Web App 项目. 本次的Python实战就是We ...

  6. 数据仓库之【用户行为数仓】11:【dws层:数据汇总层】【appc层:数据应用层】需求4:每日启动App次数相关指标

    一.每日启动App次数相关指标分析 这个需求就是对每日打开app上报的数据进行统计. 针对这个需求我们需要统计两个指标 1.每日人均启动App次数 2.每日APP启动次数分布(1次.2次.3次及以上) ...

  7. 【Android项目实战 | 从零开始写app(十二)】实现app首页智慧服务热门推荐热门主题、新闻

    说在前面,由于各种adapter,xml布局,bean实体类,Activity,也为了让看懂,代码基本都是"简单粗暴直接不好看",没啥okhttp和util工具类之类的封装,本篇幅 ...

  8. 【Android项目实战 | 从零开始写app (六) 】用TabLayout+ViewPager搭建App 框架主页面底部导航栏

    本篇实现效果: 搭建app框架的方式有很多,本节主要用TabLayout+ViewPager搭建App框架,这种方式简单易实现,在主页中加载Fragment碎片,实现不同功能页面的切换效果图如下: 文 ...

  9. 【Android项目实战 | 从零开始写app(十三)】实现用户中心模块清除token退出登录信息修改等功能

    五一后,被ji金伤了,哇呜呜,还是得苦逼老老实实打工写代码,看下面吧 本篇实现效果: 实现登录用户名展示到用户中心页面上,并且页面有个人信息,订单列表,修改密码,意见反馈发送到服务端,前面登录后,通过 ...

最新文章

  1. GameMaker Studio从头开始学习设计和开发3款游戏
  2. Oracle数据库迁移-基础
  3. java webapps路径_java 获取服务器端的webapps路径 | 学步园
  4. selenium java封装_selenium2.0的初步封装(java版本)
  5. sublime配置python2和3_请教各位,关于sublime text3 配置python环境的两个小问题。
  6. linux 正则表达式
  7. 利用WebUtil删除Cookies
  8. multisim常用d触发器_怎么在multisim找D触发器
  9. hashcat在windows上的安装与简单使用
  10. 登陆共享服务器的用户名和密码怎么修改
  11. VUE 使用animated 动画
  12. 宽带换了新的账号怎么连接服务器地址,宽带换了路由器设置步骤图解
  13. efci 计算机网络,数值型关联规则挖掘在网络入侵检测系统中的应用研究
  14. matlab获得模型切面,基于MATLAB的STL模型切片分层算法
  15. nmon和nmon analyser的下载和使用
  16. 什么是多媒体应用开发?
  17. git push 出现 The current branch dev has no upstream branch.的问题
  18. 科技英语写作句型积累
  19. c语言作业i love gplt,Jmete 入门一
  20. 矩阵知识:矩阵乘法、单位矩阵、数量矩阵、初等矩阵、行等价

热门文章

  1. 利用Python实现自动批量图片格式转换
  2. 如何在局域网下建立共享文件夹?
  3. 2020年笔记本电脑计算机专业,适合女生用的笔记本电脑排名2020
  4. for循环 for循环嵌套
  5. 核心频率个加速频率_今年前 9 个月全工序实现负能炼钢,本钢板材炼钢厂绿色清洁生产频率加快...
  6. with grant option作用
  7. js中的事件委托或是事件代理详解
  8. java web热区链接_HTML图片热区map area的用法
  9. 一个ONLYOFFICE编辑器的在线演示地址
  10. python自动读取短信_自动化测试-自动获取手机短信验证码