实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构

简介: 系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构  实战使用Axur...

系列文章

实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 

实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目  

实战使用Axure设计App,使用WebStorm开发(3) – 构建页面架构 

实战使用Axure设计App,使用WebStorm开发(4) – 实现页面UI

实战使用Axure设计App,使用WebStorm开发(5) – 实现页面功能

实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

 

在本文中,将继续介绍在 WebStorm 中开发,去实现App的功能需求。 就像盖房子一样,第一步需要把整个工程的页面结构先勾勒出来,先让各个页面流转起来,然后再去细化每个页面。
所有工程代码放在了 https://github.com/zhangsichu/DeliveryApp 同时上篇文章中创建的初始化工程,也Tag了 TheInitialProject,您可以使用 Git checkout 这个Tag, 也可以直接到:https://github.com/zhangsichu/DeliveryApp/releases/tag/TheInitialProject 去下载初始化的工程代码,得到最初的 ionic 创建好的工程。

git checkout TheInitialProject

在本App中,咱们采用了 Ionic 作为基础的工程框架,Ionic 是基于 AngularJS 来构建的,所以第一步就是先把页面路由和URL设定好。创建工程的 service 和 controller,并在 app.js 添加路由设定。 咱们在 AngularJS 中 ng-app 的名字取名为 ddApp.

1. 在 js 目录下添加 services.js 和 controllers.js 并在 index.html中添加引用。

a) 在 service.js 下声明 ddApp.services Module

angular.module(ddApp.services, []);

b)在controller.js下声明ddApp.controllers Module

angular.module(ddApp.controllers, [ddApp.services])

c)在app.js 添加Module依赖

angular.module(ddApp, [ionic, ddApp.services, ddApp.controllers])

d)在 index.html中添加 Javascript 文件引用

<script src="js/app.js"></script>
<script src="js/services.js"></script>
<script src="js/controllers.js"></script>

Click to Open in New Window
到这一步您可以执行以下 ionic serve

ionic serve

在浏览器里看看现在的页面情况

2. 添加路由和功能页面

a) 在 app.js 里添加app的路由。
Click to Open in New Window
代码很简单,设定App中Url对应的状态,和对应要访问的页面,同时也需在 www 目录下创建 templates 文件夹和对应的页面文件。
b) 修改 controller.js 添加空的 Controller
当 templates 下对应的 html 创建完成后,需要在 controllers.js 下为每个页面先写一个空的 controller,稍后我们会去实现实际的业务功能。
Click to Open in New Window
c) 修改 index.html
修改 App 为 navigate view
Click to Open in New Window
到这一步您可以执行以下 ionic serve

ionic serve

在浏览器里访问 http://localhost:8100/#/login 或者 http://localhost:8100/#/login 看看效果。

3. 让页面动起来

功能页面都创建好了,现在就要在页面里写功能了,让页面动起来了。
给每个页面添加按钮,在对应的 Controller 里添加功能代码。如在 Login页面里 添加 login 按钮,给它添加功能。

<h1>Login</h1>
<button ng-click="doLogin();">登陆</button>

在Controller 里添加页面跳转的功能。
Click to Open in New Window
页面最后完成的样子。
Click to Open in New Window
到这一步完成的代码在:https://github.com/zhangsichu/DeliveryApp/releases/tag/AllPages 可以下载到。 你也可以执行 git checkout AllPages

git checkout AllPages

原文链接 http://zhangsichu.com/blogview.asp?Content_Id=157

相关文章
用PyTorch从零构建 DeepSeek R1:模型架构和分步训练详解
本文详细介绍了DeepSeek R1模型的构建过程,涵盖从基础模型选型到多阶段训练流程,再到关键技术如强化学习、拒绝采样和知识蒸馏的应用。
72 3
用PyTorch从零构建 DeepSeek R1:模型架构和分步训练详解
|
3月前
|
使用PaliGemma2构建多模态目标检测系统:从架构设计到性能优化的技术实践指南
本文详细介绍了PaliGemma2模型的微调流程及其在目标检测任务中的应用。PaliGemma2通过整合SigLIP-So400m视觉编码器与Gemma 2系列语言模型,实现了多模态数据的高效处理。文章涵盖了开发环境构建、数据集预处理、模型初始化与配置、数据加载系统实现、模型微调、推理与评估系统以及性能分析与优化策略等内容。特别强调了计算资源优化、训练过程监控和自动化优化流程的重要性,为机器学习工程师和研究人员提供了系统化的技术方案。
236 77
使用PaliGemma2构建多模态目标检测系统:从架构设计到性能优化的技术实践指南
Java高级应用开发:基于AI的微服务架构优化与性能调优
在现代企业级应用开发中,微服务架构虽带来灵活性和可扩展性,但也增加了系统复杂性和性能瓶颈。本文探讨如何利用AI技术,特别是像DeepSeek这样的智能工具,优化Java微服务架构。AI通过智能分析系统运行数据,自动识别并解决性能瓶颈,优化服务拆分、通信方式及资源管理,实现高效性能调优,助力开发者设计更合理的微服务架构,迎接未来智能化开发的新时代。
工厂人员定位管理系统架构设计:构建一个高效、可扩展的人员精确定位
本文将深入探讨工厂人员定位管理系统的架构设计,详细解析前端展示层、后端服务层、数据库设计、通信协议选择等关键环节,并探讨如何通过微服务架构实现系统的可扩展性和稳定性。
72 10
建筑施工一体化信息管理平台源码,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
智慧工地云平台是专为建筑施工领域打造的一体化信息管理平台,利用大数据、云计算、物联网等技术,实现施工区域各系统数据汇总与可视化管理。平台涵盖人员、设备、物料、环境等关键因素的实时监控与数据分析,提供远程指挥、决策支持等功能,提升工作效率,促进产业信息化发展。系统由PC端、APP移动端及项目、监管、数据屏三大平台组成,支持微服务架构,采用Java、Spring Cloud、Vue等技术开发。
102 7
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
206 3
构建全天候自动化智能导购助手:从部署者的视角审视Multi-Agent架构解决方案
在构建基于多代理系统(Multi-Agent System, MAS)的智能导购助手过程中,作为部署者,我体验到了从初步接触到深入理解再到实际应用的一系列步骤。整个部署过程得到了充分的引导和支持,文档详尽全面,使得部署顺利完成,未遇到明显的报错或异常情况。尽管初次尝试时对某些复杂配置环节需反复确认,但整体流程顺畅。
如何基于服务网格构建高可用架构
分享如何利用服务网格构建更强更全面的高可用架构
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
163 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章