换功能。 4 web 应用的实现步骤 4.1 ionic 配置理由准备工作:使用 Hbuilder 编辑器编辑程序,新创建一个 web 项目 wd,具体的 CSS 、 js、和各个子页面存放位置以及命名如下图所示: Script 目录内新建一个 app.js 的js文件,用来存放主要的 js文件。 Service 目录内用来存放 mock.js 文件,用来当做后端数据使用。 Template 目录内再创建一个 pages 目录,再 pages 目录内创建四个 HTML 文档, 分别表示首页,产品页面,个人中心页面,和用来切换的 tabs 。步骤一:创建 index.html 页面,引用 ionic.bundle.js 和ionic.css 。步骤二:在 html 标签内引入 ng-app= ”wdApp ”,ng-controller= ”wdCtrl ”。步骤三:配置路由, .config 内的程序表示配置路由的过程。程序如下: 当点击底部的三个 tabs 切换按钮时,页面会根据路由的配置准确的切换到内容页面。 4.2 各子路由页面的编写首先在 index.html 页面写入<ion-nav-view></ion-nav-view> 在各子路由页面 produce.html 、home.html 、user.html 写入<ion-view></ion-view> 标签,标签内容使用 html 完成页面的编写。例如首页的简单事例: 5 完成首页内容 5.1 mock.js 简介 Mock.js 是一款模拟数据生成器,旨在帮助前端攻城师独立于后端进行开发,帮助编写单元测试。提供了以下模拟功能: ?根据数据模板生成模拟数据?模拟 Ajax 请求,生成并返回模拟数据?基于 HTML 模板生成模拟数据使用方法: 步骤一:安装 mock.js (可去 mock.js 官网下载安装)