整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

ionic环境搭建

ionic环境搭建

. 环境依赖关系叙述

移动端混合开发的一个明显优势就是，一套代码两套部署，开发一套项目代码，可分别打成Android的包和ios的包。无论是混合开发还是原生开发，都是会需要原生的平台。我们先以Android平台为例，首先肯定需要AndroidSDK,Android环境缘起于java，所以必须先安装JDk,这是平台的环境.混合开发顾名思义需要前端和原生两块环境内容。混合开发平台，我们选择的是cordova,那么它依赖于node.js环境，并且需要node.js的npm模块来帮它下载插件。创建项目还需调试运行，那么就会需要Android模拟器。由于原生的Android模拟器启动过于慢，而且由于网络限制，google的cpu渲染加速器环境也难以下载。我们这里使用的是一个国外的好用且免费的第三方模拟器Genymotion。东西是免费的，但是需要注册和登陆。

一共需要搭建的环境也就这么几个JDK，AndroidSDK,node.js,cordova, Genymotion。

开发环境：

  1. node.js
  2. cordova6.0.0
  3. ionic

测试运行环境：

  1. JDK
  2. AndroidSDK
  3. Genymotion

2.安装说明

2.1 JDK

安装教程很多，记住安装时下载1.8版本

菜鸟教程：http://www.runoob.com/java/java-environment-setup.html

2.2 AndroidSDK

androidSDK由于国内限网，推荐一个国内的一个下载网站：http://www.androiddevtools.cn/

下载后根据提示安装，推荐下载的包就不要取消。系统一般会帮你默认勾选安卓最新版本Android9.0，但是Android9.0会出现模拟器启动不了的问题，坑很多，建议安装9.0以下的，我选的Android6.0，勾选下图的选项即可。

下载完配置Android环境变量

打开安卓的安卓目录如图，我画圈的两个目录，需要加入到path里面

D:Program Filesandroidplatform-tools; D:Program Filesandroidtools;

2.3Genymotion 安装

  • 官网下载官方只需注册即可免费使用，使用下面链接注册即可。

注册：https://www.genymotion.com/

下载：https://www.genymotion.com/download/

下载后按照提示安装即可，打开软件时登录选择个人登录即可。

  • 下载安卓镜像打开后如图，点击add。

?

  • 找自己需要的版本下载即可

  • 参考学习

w3school:https://www.w3cschool.cn/cuhkj/cuhkj-lf832655.html

2.4安装nodejs

  • 官网下载nodejs免安装版https://nodejs.org/en/download/

选择windows免安装版64位

  • 解压到要安装的目录


  • 添加环境变量计算机(右键)-->属性(左键)-->高级系统设置(左键)-->环境变量(左键)


  • 检查是否配置成功
 node -v
 npm -v
  • 正常显示出版本号则说明安装成功
  • 更换npm镜像源

首先来说为什么要更换镜像源，由于npm的镜像源是国外的，我们使用npm工具安装软件环境时，由于网速问题会导致很多难以解决的问题，而且下载巨慢，故将镜像源更换为淘宝的镜像源。

执行下面命令更换软件源

npm install -g cnpm --registry=https://registry.npm.taobao.org

查看是否更换成功

cnpm -v

不报错且出来一段信息则说明更换成功。

  • 参考学习菜鸟教程：http://www.runoob.com/nodejs/nodejs-tutorial.html
  • w3school:https://www.w3cschool.cn/nodejs/nodejs-install-setup.html
  • npm基本使用：https://www.w3cschool.cn/nodejs/nodejs-npm.html

2.5安装cordova平台

  • 官网https://cordova.apache.org/
  • 使用npm安装平台
cnpm install -g cordova@6.0.0
  • 上面安装指定版本的cordova，我们这里安装cordova6.0.0,建议不要安装7版本和8版本，后面创建项目时会出现很多问题。
cordova -v
  • 检查是否安装成功，正确显示出版本号则说明安装成功。
  • 项目相关命令
#1.创建项目
cordova create MyApp
cd ./MyApp
#2.添加平台
cordova platform add browser #添加浏览器平台
cordova platform add android #安卓平台
cordova platform add ios #ios平台
#注意添加相关平台需要拥有相关平台的环境
#3.编译打包
cordova build android #打成android平台的包 .apk
cordova build ios #打成ios平台的包
#4.运行到androidSDK自带的模拟器
cordova emulate android
#5.运行到第三方模拟器或真机
cordova run android
  • 参考学习w3school:https://www.w3cschool.cn/cordova/cordova_overview.html

2.6angularjs环境搭建

  • 官网https://www.angular.cn/guide/quickstart
  • 安装项目脚手架
npm install -g @angular/cli
  • 这里只是为了给ionic创建项目提供环境，但是要使用ionic开发就必须学会angularjs。

2.7ionic安装配置

  • 官网https://ionicframework.com/docs/cli/
  • 安装
  • -g是全局的意思，latest是最新版的意思。
cnpm install -g ionic@latest
  • 项目相关命令
#1创建项目
ionic start myNewProject tabs #tabs是项目模板的一种，ionic平台自身会提供几种项目模板
#进入到项目
cd ./myNewProject
#2.添加平台
ionic cordova platform add android #平台同上一样可选
#3.打包
ionic cordova build android
#4.运行
ionic serve #运行在浏览器
ionic cordova run android #运行到android,ios
  • 可能会出现的问题创建项目时，会问你是否使用ionic4创建项目，选择n即可，也可创建尝试下，但运行性项目到android模拟器显示空白。
  • 参考学习菜鸟教程：http://www.runoob.com/ionic/ionic-tutorial.html
  • 中文文档：http://www.ionic.wang/js_doc-index.html

3.可能会遇到的问题

  1. node.js 使用免安装版能避免许多未知错误。
  2. cordova安装6.0.0不要安装7.0或8.0的，后面出现的错误会很多。
  3. cordova添加android平台，会多次失败，由于资源在国外会失败多次，插件下载完成就可以成功。
  4. 安卓模拟器需要cpu加速器，不然会一直黑屏，所以选用了第三方模拟器。
  5. 谷歌真机调试chrome://inspect。
  6. android9.0不能用使用。

言：

在本文中，我们将着重介绍如何将WijmoJS与Ionic一起使用，来创建一款移动端支持优先、快捷高效的应用程序。在之前的文章中，我们已经介绍了使用WijmoJS与Angular、React、Vue三大框架结合搭建您的Web应用程序。这篇将是本系列的最后一篇文章。

什么是Ionic？

Ionic是一个专注于用Web开发技术，基于HTML5创建类似于手机平台原生应用的一个开发框架，它绑定了AngularJS和Sass。这个框架的目的是从web的角度开发手机应用，基于PhoneGap的编译平台，可以实现编译成各个平台的应用程序。

使用Ionic不但可以优化html、css和js的性能，构建高效的应用程序，而且还可以用于构建Sass和AngularJS的优化。对于用以开发混合手机应用的项目来说，ionic是一个值得信赖的框架。

WijmoJS VS Ionic

WijmoJS 与 Ionic 共同搭建移动支持优先的全新一代Web应用

Ionic专注于应用程序的外观和用户界面交互。它基于Angular，并使用Cordova提供对特定设备本地功能的访问，包括传感器，数据，网络状态等。

作为同样流行的前端框架之一，WijmoJS也同样注重更灵活、更智能的用户操作体验。秉承“快如闪电，触控优先”的设计理念，WijmoJS在提供优质服务和产品的同时，不断优化产品架构，与时俱进。凭借其先进的触控设计、全面的 AngularJS 支持、灵活的 API 接口、轻松的操作体验，WijmoJS可全面满足企业开发所需。

那么，我们如何将二者结合，搭建出一款可完美融合全新一代移动框架的Web应用程序呢？本文会给你答案。

在所有框架中创建和维护应用程序的基本步骤都是类似的：

l 安装适当的CLI（命令行界面实用程序）以生成，运行，维护和部署应用程序。

l 使用CLI创建应用程序。

l 使用NPM将WijmoJS添加到应用程序。

l 导入您要使用的组件并添加适当的标记。

具体步骤如下：

第1步，创建一个新的Ionic应用程序

按照以下步骤创建一个新的Ionic应用程序，启动并运行：

第2步，添加WijmoJS模块

打开“src / app / app.module.ts”文件，为网格和图表添加WijmoJS模块：

// src/app/app.module.ts

import { NgModule, ErrorHandler } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';

import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';

import { ContactPage } from '../pages/contact/contact';

import { HomePage } from '../pages/home/home';

import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';

import { SplashScreen } from '@ionic-native/splash-screen';

// import Wijmo modules

import { WjGridModule } from 'wijmo/wijmo.angular2.grid';

import { WjChartModule } from 'wijmo/wijmo.angular2.chart';

// apply Wijmo license key

import { setLicenseKey } from 'wijmo/wijmo';

setLicenseKey('your license goes here');

@NgModule({

declarations: [

MyApp,

AboutPage,

ContactPage,

HomePage,

TabsPage

],

imports: [

BrowserModule,

IonicModule.forRoot(MyApp),

WjGridModule,

WjChartModule

],

…

})

export class AppModule {}

本段代码除了导入我们想要的WijmoJS模块外，还会自动匹配WijmoJS许可证密钥，并从应用程序中删除水印。

第3步，向控件添加数据

首先打开“src / pages / home / home.ts”文件，并给“HomePage”组件一些控件数据：

// src/pages/home/home.ts

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

// import Wijmo components

import { CollectionView } from 'wijmo/wijmo';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

constructor(public navCtrl: NavController) {

}

data=this.getData();

getData() {

var countries='US,Germany,UK,Japan,Italy,Greece'.split(','),

data=[];

for (var i=0; i < countries.length; i++) {

data.push({

country: countries[i],

sales: Math.random() * 10000,

expenses: Math.random() * 5000,

downloads: Math.round(Math.random() * 20000),

});

}

return new CollectionView(data);

}

}

注意getData返回一个CollectionView而不是一个常规数组。 CollectionView类支持排序，筛选，分组，货币和通知。 在这个例子中，我们将它用作网格和图表的数据源。

第4步，将Ionic控件添加到应用程序中

要将表格和图表添加到应用程序，请编辑“src / pages / home / home.html”文件，如下所示：

<!-- src/pages/page/home.hmtl -->

<ion-header>

<ion-navbar>

<ion-title>Home</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<h2>Welcome to Wijmo in Ionic!</h2>

<p>

This starter project comes with simple tabs-based layout for apps

that are going to primarily use a Tabbed UI.

</p>

<p>

Take a look at the <code>src/pages/</code> directory …

</p>

<h4>Here are some Wijmo controls to help you get started:</h4>

<div class="App-panel">

<wj-flex-grid [itemsSource]="data">

</wj-flex-grid>

<wj-flex-chart [itemsSource]="data" [bindingX]="'country'">

<wj-flex-chart-series [binding]="'sales'" [name]="'Sales'">

</wj-flex-chart-series>

<wj-flex-chart-series [binding]="'expenses'" [name]="'Expenses'">

</wj-flex-chart-series>

<wj-flex-chart-series [binding]="'downloads'" [name]="'Downloads'">

</wj-flex-chart-series>

</wj-flex-chart>

</div>

</ion-content>

请注意，代码中使用的wj-flex-grid，wj-flex-chart和wj-flex-chart-series指令，是从表格和图表模块导入的。

第5步，更新样式表

首先，我们需要添加包含所有WijmoJS控件的CSS样式文件 - “wijmo.css”。 有几种方法可以将自定义css文件添加到Ionic构建过程中。 在这个例子中，我们将使用最简单的一个：

将“node_modules \ wijmo \ styles \ wijmo.css”文件复制到应用程序的“src / assets / css”文件夹中即可。

打开应用程序的“src / index.html”文件并添加以下行：

<!-- src/index.hmtl -->

<link href="build/main.css" rel="stylesheet">

<link href="assets/css/wijmo.css" rel="stylesheet">

除了WijmoJS的标准CSS，我们还可以添加其他样式来使我们的应用程序更美观。 打开“app / app.scss”文件并添加以下代码：

// app/app.scss

// http://ionicframework.com/docs/theming/

// App Global Sass

// --------------------------------------------------

// …

//

.App-panel {

margin: 0 48pt;

text-align: center;

.wj-control {

display: inline-block;

width: 400px;

height: 300px;

vertical-align: top;

}

}

.wj-flexgrid .wj-cell {

padding: 8px;

text-align: left;

}

第6步,在浏览器中运行

按ctrl + S保存所有文件中的更改并切换回浏览器以查看结果：

Wijmo与Ionic搭建web应用

由于表格和图表绑定到同一个CollectionView，因此对表格中的数据所做的任何更改都会自动反映在图表中。 例如，您可以单击列标题对数据进行排序或使用键盘编辑一些值。

总结

1. 将WijmoJS集成到现代JavaScript应用程序中只需要使用NPM进行安装并从库中导入所需的组件即可。

2. 使用WijmoJS能够确保在不同的框架中使用完全相同的UI组件，让您轻松地使用两个或多个框架，或者在未来随意切换框架。

扩展阅读

《用 WijmoJS 玩转您的 Web 应用 — Angular6》

https://mp.weixin.qq.com/s?__biz=MzA4MTMwMDY2NQ==&mid=2650548183&idx=4&sn=a0f9b6e02008f75f5840c9ce6ea6c972&chksm=879f9a01b0e81317c55ca77f5cd055518dadfa315937f32a0ef2d6daf0a4c567aec9b5877635&pass_ticket=cw8VmKrkX0WJUtL%20hFFK5chqx%20pzdn4rGGzHOV6MyvaR6mM7e9V06n8SrZnOCJ5%20&scene=21#wechat_redirect

《用 WijmoJS 玩转您的 Web 应用 —— React》

https://mp.weixin.qq.com/s?__biz=MzA4MTMwMDY2NQ==&mid=2650548194&idx=4&sn=e5ea9991b53cff1a79f8bce8101a71c1&chksm=879f9a34b0e8132282bc2374ee61fe30947600fcd2cda973acf3d6b676a955c633fec384c916&mpshare=1&scene=1&srcid=0626nO6EBXTG77dVyvm9JQAt&pass_ticket=4OdUrFMRsgXbNAjWnWNlY%2BwNAg5FpyfBcfbMJwywU74nSVIwsDKFA%2FBQQY82SIwD#rd

《用 WijmoJS 玩转您的 Web 应用之 Vue 框架》

https://mp.weixin.qq.com/s?__biz=MzA4MTMwMDY2NQ==&mid=2650548157&idx=3&sn=219734f099e8a0e9873d0465cbabd793&chksm=879f9a6bb0e8137d2585b5fe64404fc34b3bd174292f6d836c8b55f0580365c472bc92fcfcf8&mpshare=1&srcid=0620PPEWOB74p7ZwlFLyLyhe&pass_ticket=cw8VmKrkX0WJUtL%20hFFK5chqx%20pzdn4rGGzHOV6MyvaR6mM7e9V06n8SrZnOCJ5%20&scene=21#wechat_redirect

近期活动

【问卷调查】扬帆万里，因您前行 --- ComponentOne 使用反馈意见征集

onic

ionic 是一个强大的 HTML5 应用程序开发框架(HTML5 Hybrid Mobile App Framework )。 可以帮助您使用 Web 技术，比如 HTML、CSS 和 Javascript 构建接近原生体验的移动应用程序。

ionic 主要关注外观和体验，以及和你的应用程序的 UI 交互，特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。

ionic是一个轻量的手机UI库，具有速度快，界面现代化、美观等特点。为了解决其他一些UI库在手机上运行缓慢的问题，它直接放弃了IOS6和Android4.1以下的版本支持，来获取更好的使用体验。

ionic 特点

  • 1.ionic 基于Angular语法，简单易学。

  • 2.ionic 是一个轻量级框架。

  • 3.ionic 完美的融合下一代移动框架，支持 Angularjs 的特性， MVC ，代码易维护。

  • 4.ionic 提供了漂亮的设计，通过 SASS 构建应用程序，它提供了很多 UI 组件来帮助开发者开发强大的应用。

  • 5.ionic 专注原生，让你看不出混合应用和原生的区别

  • 6.ionic 提供了强大的命令行工具。

  • 7.ionic 性能优越，运行速度快。

学习前你需要了解？

学习前你需要了解以下基础知识：

  • HTML

  • CSS

  • Javascript

  • Angular


在线咨询
上一篇：「CSS」文字特效（text-shadow）
下一篇：若用户浏览器禁用JavaScript，谷歌将不再允许

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 盈江县 名山县 合肥 夏河县 利津县 荔城区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服