素材巴巴 > 程序开发 >

使用ionic开发移动端项目学习实例(1)

程序开发 2023-09-09 22:28:43

以下学习实例来自于《Ionic实战:基于AngularJS的移动混合应用开发》,运行的前提,是安装了ionic环境,需要安装git,方便从远程下载切换项目。
本组实例使用方法为:
打开Git Bash
1.git clone完整项目
2.cd 项目目录
3.git checkout -f 步骤
4.ionic serve启动
5.ionic q退出
6.git checkout -f 步骤
7.。。。。

AngularJS学习实例
1.打开Git Bash,输入
git clone https://github.com/ionic-in-action/chapter3.git
cd chapter3
git checkout step1

本实例需要服务器,所以先安装node,打开命令行,进入项目目录,输入:npm install,安装成功,输入node server
这里写图片描述

这里写图片描述

这里写图片描述

这里写图片描述

在浏览器中输入上述网址可以查看项目,通过git checkout -f step2等切换项目,查看不同的功能,这个实例可以切换到step10

step1效果:
这里写图片描述
step10效果:
这里写图片描述

Ionic导航和核心组件
这个项目的重点是:

  1. 管理用户状态并实现应用内导航
  2. 用图标、列表和卡片来组织内容
  3. 从外部加载数据并显示载入效果
  4. 使用无线滚动来不断加载数据
  5. 使用幻灯片展示组建来显示应用介绍
    使用方法:打开Git Bash
    这里写图片描述

不过好像step1没什么效果,切换到step2的效果图:
这里写图片描述
这个实例有step7,切换到step7的界面如下
这里写图片描述
选项卡、高级列表和表单组件
项目要点:

  1. 使用选项卡组件并单独保存导航历史
  2. 让列表元素支持设置开关和重新排序
  3. 使用下拉刷新来重载数据
  4. 使用移动端表单输入框

项目使用跟之前差不多
这里写图片描述

切换到step2的效果图
这里写图片描述
总共有step8,切换到step8的效果图是
这里写图片描述

这里写图片描述
浏览器切换到手机界面,效果
这里写图片描述

这个图表效果是使用了第三方库,配置第三方库,需要ionic add命令,会用Bower把第三方库下载到项目中,安装方法
命令行输入:
npm install -g bower
ionic add highcharts-release#4.0.4 highcharts-ng#0.0.7
下载下来会保存在www/lib目录中
在index.xml中引用



在js/app.js中声明
angular.module(‘App’, [‘ionic’, ‘highcharts-ng’])
不过运行以后,不知道为什么会报错。。。


标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。