c语言软件开和网站开发区别,滁州seo网站推广,防止做网站的人修改数值,搜索引擎优化至少包括哪几步第一章 绪论创建移动app有三种安卓原生App#xff0c;使用java语言#xff0c;目前推荐kotlin语言#xff0c;开发工具Android studioIOS原生App#xff0c;使用Objective-C或者Swift语言#xff0c;开发工具Xcode混合移动App#xff0c;使用web通用语言#xff08;HTML…第一章 绪论创建移动app有三种安卓原生App使用java语言目前推荐kotlin语言开发工具Android studioIOS原生App使用Objective-C或者Swift语言开发工具Xcode混合移动App使用web通用语言HTMLcssjs开发框架Ionic 了解三个独立的App编写Ionic应用程序Ionic框架一个用HTMLcssjs构成的用户界面框架专门用于混合移动app的开发包含一个强大的命令行接口CLI和一套附属服务如Ionic View和Ionic Creator最上层是Ionic框架自身--中间层是AngularJSweb应用框架--最下层是Apache Cordova允许web应用程序调用设备原生能力并将APP转换成原生App 使用原生app的优劣势优点开发工具和设备平台紧密绑定IDE明确所有的原生api和功能对开发者都可用不需要桥接方案app性能尽可能优化没有中间层的性能开销缺点开发语言只能使用一种或几种主要是因为部署app到IOS和Android需要熟悉多种语言和工具 最早的app是没有app商店的属于移动web App应用通过设备上的web浏览器进行加载只使用web技术创建App并通过设备浏览器进行发布优点可以部署到多个平台只需要考虑目标市场升级也只需上传新包到服务器缺点app直接运行在本地浏览器可能会受到浏览器无法访问设备的全部能力搜索url也不是人人都喜欢 于是乎出现了混合移动App它也是一种原生移动app使用web浏览器运行web应用只是在设备和webview之间用了一个原生app容器桥接优点多平台部署能够访问设备的全部能力插件系统缺点性能和容量受浏览器限制使用插件进行通信会出现一种依赖不能保证API是可用的UI组件可用度低 因此出现了改善这种插件的框架Ionic Ionic技术栈Ionic自身、AngularJS、cordovaIonic提供了web app不具备的UI组件CLI命令行接口创建、编译、发布Ionic应用程序、图形化设计构造工具Ionic主要目标是UI层集成Angular和Cordova提供接近于原生的体验AngularJS构造复杂、单页面web app的MVW框架Cordova能够利用web技术构建嵌入webview的原生app提供了webview和设备原生层之间的接口桥接框架支持多平台这也是混合移动app的好处cordova还可以使用自身的命令工具搭建脚手架、编译和部署移动应用。需要准备的学习条件HTML、CSS、JSAngular基础TypeScript工具,移动设备 第二章 环境配置基本Ionic安装、指定平台SDK安装配置安装环境才能使用模拟器能够在设备上部署和测试应用程序并实现app发布Ionic框架安装需要四个组件Node.jsGitIonicApache CordovaIonic和CLI都是用Node.js编写的node.js安装打印node.js版本node -vNPM(Node的包管理器)更新npm -v更新NPM安装npm istall npm -g Git安装省略 Apache cordova CLI安装npm install -g cordova Ionic CLI安装:npm install -g ionic查看ionic -v 新建Ionic项目ionic start testApp --v2Ionic框架通过一系列初始模板来创建一个项目的脚手架模板包括指定的模板blank,sidemenu,tabsGitHub库Codepen一个本地目录默认使用tabs 在浏览器中预览ionic serve 安装平台工具IOS的XcodeAndroid studio较好Windows Universal配置模拟器配置设备添加移动平台ionic platform add android模拟器上测试ionic emulate[platform] ionic emulate ios --targetiPad-Air 日志ionic emulate ios -l -c设备上测试ionic run ios -l -c ionic run android -l -c 第三章 Ionic命令行界面CLI它的功能使用GitHub的模板创建App的例子ionic start myApp https://github.com/driftyco/ionic2-start-blank --v2CLI使用TypeScript作为开发语言修改APP名称ionic start myAPP -a My awesome Ionic App指定编译平台ionic platform add android管理cordova插件ionic plugin add cordova-plugin-geolocation(添加)ionic plugin rm cordova-plugin-geolocation(移除)ionic plugin ls查看ionic允许你自己搭建指定的模板ionic g [page|component|deirective|pipe|provider|tabs][element name]ionic g page mypage运行appionic serve 或ionic serve --lab显示多个浏览器窗口 指定ipionic serve --address 112.365.365.321查看CLI信息ionic info 第四章 AngularJS和TypeScriptAngularJS是基于组件的组件 import {Component} from angular/core //定义组件元数据 Component({ selector:myfirstapp//标签 template:divHello,my name is {{name}}. button (click)sayMyName()Log my name/button/div//模板 }) export class MyCompanet{ constructor(){ this.nameInigo Montoya } sayMyName(){ console.log(Hello my name is,this.name,you killed my father,prepare to die) } }输入需要将信息传递到组件的机制通过Input模块实现 比如组件current-user current-user [user]current-user/current-user 这个组件的定义如下 import {Component,Input}fromangular/core; Component({ selector:current-user, template:div{{user.name}}/div//模板 }) export class UserProfile{ Input()user; constructor(){} }通过Input绑定user变量angularJS会传递currentUser变量给这个组件让模板渲染出user.name的值从而实现数据的传递和参数的设置模板 渲染{} 如div{{user.name}}/div 绑定属性[] 如current-user [user]current-user/current-user 事件处理()类似点击事件 如my-component (click)onUserClick($event)/my-component 双向数据绑定[{}] 如input [(ngModal)]username 星号**告诉模板以指定的方式进行处理 如my-component *ngForlet item of items/my-component事件事件使用标记 button (click)clicked()click/button 该组件的定义是 Component(...) class MyCompanent{ clicked(){ } } 方法可以带参数只需在clicked方法加入参数名 button (click)clicked($event)click/button 该组件的定义是 Component(...) class MyCompanent{ clicked(event){ } } 如果你的组件需要向其他组件广播自定义事件可以导入Output模块和EventEmitter模块 使用Output修饰符定义事件这个事件是一个EventEmitter实例 import {Component,Output,EventEmitter}from angular/core; Component({ selector:user-profile template:divHi,my name is/div }) export class UserProfile{ Output() userDataUpdated new EventEmitter(); constructor(){ //修改user //... this.userDataUpdated.emit(this.user); } } 可以绑定user-profile组件的事件了 user-profile (userDataUpdated)userDataUpdated($event)/user-profile 生命周期事件允许访问生命周期中的每一个环节通常与创建、渲染、销毁相关 NgModule实现App的引导方式它使用元数据对象告诉Angular如何编译和运行模块代码允许将所有的依赖进行前置声明而不用在app中多次声明 import {NgModule}from angular/core; import {BrowserModule}from angular/platform-browser; import {AppComponent}from ./app.cpmponent; NgModule({ imports:[BrowserModule], declarations:[AppComponent], bootstrap:[AppComponent] }) exports class AppModule{} 这段代码是基本的app.module.ts文件的例子使用了BrowserModule模块才能运行在web浏览器中 这个模块会被main.ts所用引导过程 import {platformBrowserDynamic}from angular/platform-browser-dynamic; import {AppModule}from ./app.module; const platform platformBrowserDynamic(); platform.bootstrapModule(AppModule) 初始化app运行的平台然后用这个平台引导AppModule 组件被创建时构造器会被调用所以需要对构造器进行初始化提供了一个ngOnInit事件Ionic事件掌握事件描述的意义省略 管道符过滤器将一个值转换成新的值|pThe authors birthday is {{birthday|date}} /p 经常需要读写子组件的方法当父组件需要这些方法需要将子方法注入父组件中ViewChild TypeScript改进js所有改进的js语言版本都面临必须将代码转换成标准的js就是所谓的转译一种语言转换成另一种语言TypeScript是对javaScript 的扩展提供了强大的类型检查和面向对象特性是Ionic的主要语言它的转译已经内置在Ionic编译中 变量指定let变量的作用域仅限最近的块for(let i 0; i10;i){ console.log(i)} 类定义和大多数语言定义相似 promise用于延迟和异步需要和远程服务器打交道或者加载本地数据时用到该方法三种状态Pengding、Fullfilled、Rejectedvar greetingPromise sayHello();greetingPromise.then(function(greeting){ console.log(greeting);},function(error){ console.error(uo,error)}); Angular很多服务使用Observable而不使用promise他可以解决多个值的同步 Angular内置了模板引擎使用符号进行连接箭头函数简化函数作用域和this关键字可以不用输入function关键字、return关键字以及大括号var multiply (x,y){return x*y};箭头函数通常用来数组操纵,数组就不需要定义了 var missions[{},{}...];console.log(mission.map(missionmission.flights)); 类型string/number/boolean特殊类型any/null/undefined/void类型化函数变量可以类型化函数返回值也可以类型化 function sayHello(theName:string):string{ return Hello,theName;} :void用于表示函数没有返回类型 function log(message):void{ console.log(message);} 第五章 Apache cordova cordova开源框架允许使用HTML、CSS、JS创建针对各种移动设备的本地应用它会将web应用渲染到原生的webView中web view是一个原生的app组件cordova将web app无法访问的电话号码等信息通过插件都暴漏给开发者插件提供了一个web app和设备原生能力的桥接层说白了就是管理各种插件的集合一般是通过第三方插件提供NFC通信、压感触控、推送通知如Battery status监控设备电池状态虽然cordova为开发者提供了大量的功能但是缺少一个重要的组件用户界面组件因此最好的方法是使用第三方框架如Ionic这就是Ionic技术的底层 第六章 理解Ionic这一章节还需要找项目查看平安小区app就可以ionic页面组成html文件定义要显示的组件、Sass文件定义组件的可视化样式、TypeScript文件定义组件的自定义功能它是基于web技术开发的所以会用到很多传统web app的技术我们只需要定义真正需要展示给用户的组件因为ionic页面的html文件是在App容器中渲染不需要像传统的HTML页面那样定义body等初始标签。app.html:ion-split-pane !-- logged user menu -- ion-menu idloggedUserMenu[content]content ion-header ion-toolbar ion-title平安小区/ion-title /ion-toolbar /ion-header ion-content classouter-content ion-list ion-list-header 我的相关 /ion-list-header button ion-item menuClose *ngForlet p of personalPages(click)openPage(p) ion-icon item-start [name]p.icon[color]isActive(p)/ion-icon {{p.title}} /button /ion-list /ion-content /ion-menu !-- main navigation -- ion-nav [root]rootPage#content swipeBackEnabledfalse main nameapp/ion-nav/ion-split-pane app.scss包含了变量声明如$company-brand:#ff11dd,直接通过变量来代替这个颜色值所有的Ionic组件都使用Sass变量设置样式具体参看Ionic文档Ionic使用gulp这个构建工具来预编译sasspage-app{ .content{ } .toolbar-title-md{ } .bar-button-default-md{ } .content_{ } each $track,$value in auxiliary-categories(){ } ion-row{ }}App级别的主题样式会有一个单独的sass文件 TypeScript编写和页面交互逻辑相关的Angular/TypeScript代码功能实现文件后缀.ts 基本.ts前面已经写过省略177行平安小区的包含两个ts文件.module.ts和.ts主要应用了NgModule模块.ts文件实例如下 import { Component,ViewChild } from angular/core; import { MenuController,IonicPage, NavController, App, ToastController,InfiniteScroll } from ionic-angular; import { ApiHttpProvider } from ../../providers; import rxjs/add/operator/share; import { Storage } from ionic/storage; /** * Generated class for the AccountPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. * Author 葛明 * Date 2018-6-8 15:12 * Note 用户信息页面 * Version 1.0 */ IonicPage() Component({ selector: page-account, templateUrl: account.html, }) export class AccountPage { ViewChild(infinitescroll, { read: InfiniteScroll }) infiniteScroll: InfiniteScroll; //用户对象 residentObjs: { userName: string , userVillage: string, sex:string,idCard:number ,loginName:string,loginPwd:string,kinsfolk:string,grid:string ,building:string,unit:string,room:string,userMobile:string,userType?:number} { userName: , userVillage:, sex: , idCard : 1, loginName: , loginPwd:, kinsfolk: , grid:, building: , unit : , room: , userMobile: }; constructor(public menu: MenuController,public storage: Storage,public app: App,public navCtrl: NavController,public toastCtrl: ToastController, public apiHttp: ApiHttpProvider) { } ionViewDidLoad() { console.log(ionViewDidLoad AccountPage); //this.app.setTitle(用户信息); this.update(); } //查询 update() { this.storage.forEach( (value, key) { if(keyuserName) this.residentObjs.userNamevalue; else if(keyuserVillage) this.residentObjs.userVillagevalue; else if(keysex) this.residentObjs.sexvalue; else if(keyidCard) this.residentObjs.idCardvalue; else if(keyloginName) this.residentObjs.loginNamevalue; else if(keyloginPwd) this.residentObjs.loginPwdvalue; else if(keykinsfolk) this.residentObjs.kinsfolkvalue; else if(keygrid) this.residentObjs.gridvalue; else if(keybuilding) this.residentObjs.buildingvalue; else if(keyunit) this.residentObjs.unitvalue; else if(keyroom) this.residentObjs.roomvalue; else if(keyuserMobile) this.residentObjs.userMobilevalue; else if(keyuserType) this.residentObjs.userTypevalue; }) } } 总结学习了前面的Ionic、Angular、Cordova后以及需要的插件他们之间到底有什么关系呢Ionic和AngularIonic只是对Angular进行了扩展利用Angular实现了很多符合移动端应用的组件并搭建了很完善的样式库是对Angular最成功的应用样例。即使不使用IonicAngular也可与任意样式库如Bootstrap、Foundation等搭配使用得到想要的页面效果混合开发中扮演的是不同的角色–Ionic/Angular负责页面的实现而Cordova负责将实现的页面包装成原生应用Android:apkiOS:ipa就像花生最内层的花生仁是Angular花生仁的表皮是Ionic而最外层的花生壳则是Cordova。 Cordova插件的作用是提供一个桥梁供页面和原生通信首先我们的页面不能直接调用设备能力所以需要与能够调用设备能力的原生代码Android:JavaiOS:OC通信此时就需要Cordova插件了。 Cordova插件能够再任何Cordova工程中使用和使用什么前端框架如Ionic无关。 Ionic 2中封装了Ionic Native方便了Cordova插件的使用但在Ionic 2中仍然可以像Ionic 1中一样使用Cordova插件Ionic Native不是必须的。 即使在Ionic 2中使用了Ionic Native也首先需要手动添加插件如cordova plugin add cordova-plugin-pluginName。 转载于:https://www.cnblogs.com/jacksonlee/p/10244853.html
