Ionic

2017-11-29  本文已影响60人  壹点微尘

下载指定github路径的插件:npm install https://github.com/snowyu/MQTT.js.git --save
ionic安装指定版本: npm install -g ionic@3.12.0
ionic安装最新版本: npm install -g ionic@latest
安装完成后,查看版本的命令是ionic -v
如果你需要提问或者查看完整的系统版本信息, 命令是 ionic info, 可以帮助别人快速的帮你排除问题.

进入到某个目录下:cd /Volumes/工作和视频/Ionic
创建一个04-01的文件夹: mkdir 04-01
进到这个目录:ls
①.项目的初始化构建 : npm install -g cordova ionic,可以@3.12.0指定版本
②.Start an App: ionic start myApp blank 或者 ionic start myApp tabs 再或者 ionic start myApp sidemenu,

主要看app的页面组成,具体请参考官网

③.Run your App: ionic serve
④.生成iOS代码:sudo ionic cordova platform add ios

ios的运行在xcode需要权限,故可退到工程所在的目录上一级,给工程的文件夹添加权限:sudo chmod -R 777 platforms

⑤.添加生成各平台代码:

Android代码:sudo ionic cordova platform add android
iOS代码:sudo ionic cordova platform add ios
浏览器代码:sudo ionic cordova platform add browser

⑥.ionic打包同时生成安卓和iOS平台:sudo ionic build
打包生成浏览器的代码:sudo ionic cordova build browser
⑦.android 命令行打包生成 apk 文件: ionic cordova build android, 不过还是推荐使用Android Studio进行打包.

生成文件

生成文件:ionic g
然后选择类型:比如,page等
然后输入起的名字:xxx

也可以连起来写:ionic g page xxx

支持的设备
笔记
 // 判断错误是不是 Response类型
 if (error instanceof Response) {

 }

npm install --save @ionic/storage

存:

storage.set('name', 'Max');

取:

storage.get('age').then((val) => {
    console.log('Your age is', val);
});

删除:

this.storage.remove('UserId');

this.navCtrl.push(RegisterPage);

this.navCtrl.pop();

this.rest.getUserInfo(val)
     .subscribe(
        userinfo => {
           this.userinfo = userinfo;
          // 防止头像有缓存，给头像url加一个时间后缀,去除缓存
          this.headface = userinfo['UserHeadFace'] + "?" + (new Date()).valueOf();
       }
     )

  showModal() {
    let modal = this.modalCtrl.create(LoginPage);
    // 关闭后的回调
    modal.onDidDismiss(()=>{
      this.loadUserPage();
    })
    modal.present();
  }

sudo npm install --save @ionic-native/camera @ionic-native/file @ionic-native/file-path @ionic-native/transfer

sudo ionic cordova plugin add cordova-plugin-camera --save

sudo ionic cordova plugin add cordova-plugin-file --save

sudo ionic cordova plugin add cordova-plugin-file-transfer --save

sudo ionic cordova plugin add cordova-plugin-filepath --save

if (this.platform.is('android')) {

}

var d = new Date(),
    n = d.getTime(),

substring 方法用于提取字符串中介于两个指定下标之间的字符

substring(start,end)

开始和结束的位置，从零开始的索引

参数     描述
start     必需。一个非负的整数，规定要提取的子串的第一个字符在 stringObject 中的位置。
stop     可选。一个非负的整数，比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数，那么返回的子串会一直到字符串的结尾。

返回值

一个新的字符串，该字符串值包含 stringObject 的一个子字符串，其内容是从 start 处到 stop-1 处的所有字符，其长度为 stop 减 start。

说明

substring 方法返回的子串包括 start 处的字符，但不包括 end 处的字符。
如果 start 与 end 相等，那么该方法返回的就是一个空串（即长度为 0 的字符串）。
如果 start 比 end 大，那么该方法在提取子串之前会先交换这两个参数。
如果 start 或 end 为负数，那么它将被替换为 0。

2.substr 方法

定义和用法

substr 方法用于返回一个从指定位置开始的指定长度的子字符串。

语法

stringObject.substr(start [, length ])

参数    描述
start   必需。所需的子字符串的起始位置。字符串中的第一个字符的索引为 0。
length 可选。在返回的子字符串中应包括的字符个数。

说明

如果start为负数，则start=str.length+start。

如果 length 为 0 或负数，将返回一个空字符串。
如果没有指定该参数，则子字符串将延续到stringObject的最后。

举例：
var str = "0123456789";

alert(str.substring(0));------------"0123456789"
alert(str.substring(5));------------"56789"
alert(str.substring(10));-----------""
alert(str.substring(12));-----------""
alert(str.substring(-5));-----------"0123456789"
alert(str.substring(-10));----------"0123456789"
alert(str.substring(-12));----------"0123456789"
alert(str.substring(0,5));----------"01234"
alert(str.substring(0,10));---------"0123456789"
alert(str.substring(0,12));---------"0123456789"
alert(str.substring(2,0));----------"01"
alert(str.substring(2,2));----------""
alert(str.substring(2,5));----------"234"
alert(str.substring(2,12));---------"23456789"
alert(str.substring(2,-2));---------"01"
alert(str.substring(-1,5));---------"01234"
alert(str.substring(-1,-5));--------""

alert(str.substr(0));---------------"0123456789"
alert(str.substr(5));---------------"56789"
alert(str.substr(10));--------------""
alert(str.substr(12));--------------""
alert(str.substr(-5));--------------"56789"
alert(str.substr(-10));-------------"0123456789"
alert(str.substr(-12));-------------"0123456789"
alert(str.substr(0,5));-------------"01234"
alert(str.substr(0,10));------------"0123456789"
alert(str.substr(0,12));------------"0123456789"
alert(str.substr(2,0));-------------""
alert(str.substr(2,2));-------------"23"
alert(str.substr(2,5));-------------"23456"
alert(str.substr(2,12));------------"23456789"
alert(str.substr(2,-2));------------""
alert(str.substr(-1,5));------------"9"
alert(str.substr(-1,-5));-----------""   

[http://www.cnblogs.com/chinafine/archive/2009/02/26/1398771.html](http://www.cnblogs.com/chinafine/archive/2009/02/26/1398771.html)


<div (tap)="gotoQuestion()">
     <ion-icon name="create"></ion-icon> 提问
</div>

  selectTab(index: number) {
    var tabs: Tabs = this.navCtrl.parent;
    tabs.select(index);
  }

<button ion-button small [disabled]="isMyQuestion" (click)="showAnswerPage()">
        <ion-icon name="add"></ion-icon>&nbsp;回答
</button>

// 设置默认选中 第一个 发现页面
<ion-tabs selectedIndex="1">
  <ion-tab [root]="tabHome" tabTitle="首页" tabIcon="list-box"></ion-tab>
  <ion-tab [root]="tabDiscovery" tabTitle="发现" tabIcon="navigate"></ion-tab>
  <ion-tab [root]="tabChat" tabTitle="聊天" tabIcon="chatbubbles"></ion-tab>
  <ion-tab [root]="tabNotification" tabTitle="通知" tabIcon="notifications"></ion-tab>
  <ion-tab [root]="tabMore" tabTitle="更多" tabIcon="menu"></ion-tab>
</ion-tabs>

<ion-list>
    <ion-item [navPush]="ChatdetailsPage" [navParams]="userinfo">
      <ion-avatar item-left>
        <img src="http://img.mukewang.com/user/57a322f00001e4ae02560256-40-40.jpg">
      </ion-avatar>
      <h2>慕女神</h2>
      <p>给大家演示聊天组件的开发</p>
    </ion-item>
  </ion-list>

其中userinfo中存储的数据为

this.userinfo = {
   userid: '111222333',
   username: '江小白'
}

在ChatdetailsPage页面获取导航传递过来的参数

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.chatUserName = navParams.get('username');
    console.log(navParams.get('username'));
  }

当然 也可以将icon图片和启动图同时放到工程resources目录下,执行命令 sudo ionic cordova resources 

  requestContent(aid){

    //  http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=30

    var url='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid+'&callback=JSONP_CALLBACK';
    this.jsonp.get(url).subscribe((data)=>{
        console.log(data);

        this.list=data['_body'].result[0];

        console.log(this.list);
    },function(err){


    })

  }

<ion-header>
  <ion-navbar color="primary">
    <ion-title>首页</ion-title>
  </ion-navbar>
</ion-header>
设置导航条背景颜色
上一篇 下一篇

猜你喜欢

热点阅读