标签: ionic2

我希望创建一个6页的Ionic 2应用程序,我不确定是否为各个类别页面使用管道或过滤器以及我需要执行此操作的代码.

每个类别页面都可以加载"applecat"类别定义的相关产品.以下是API,通过Google表格以电子表格格式显示产品以及非常快速的主页样机构思:

https://sheetsu.com/apis/v1.0/04c2d2906a10 https://docs.google.com/spreadsheets/d/1RNLXsxTFymqRwq_S538qX1p1PAEDIEA6s5sV8etkfLU/edit?usp=sharing

概述

6页

• home - 无需加载产品 - 只需链接到页面
• allproducts -loads所有产品
• ipad - 在applecat类别下加载列为ipad的所有项目
• iphone - 在applecat类别下加载列为iphone的所有项目
• 键盘 - 在applecat类别下加载列为iphone的所有项目
• 笔记本电脑 - 在applecat类别下加载列为iphone的所有项目

情景(潜在的用户流程)

用户打开应用程序,点击Home然后Ipad类别链接(加载所有Ipad产品)然后回到Home决定点击All(加载所有产品),后面点击另一页....

问题

它会将2个阵列加载到内存/控制台吗？类别页面是否应使用过滤器或管道？代码应如何查找与现有API调用和产品列表数组相关的管道/过滤器？

PROVIDERS

getRemoteData(): any{
        return this.http.get('https://sheetsu.com/apis/v1.0/04c2d2906a10')
                .map(res => res.json());
}

列表页面

@Component({
selector: 'page-master',
templateUrl: 'master.html',
providers: [Sheetsu]
})
export class MasterPage {

// declare publicly accessible variable
public sheetsuData: any;

constructor(public navCtrl: NavController, public navParams: NavParams, public sheetsuService: Sheetsu) {}

ionViewDidLoad() {
    this.sheetsuService.getRemoteData()
    .subscribe(response => {
    // assign variable (async) …

我已经获得了一些我需要用于离子2项目的JQuery代码.我如何包含它和JQuery库？

代码看起来像这样(这只是它的一部分):

// on 'Left Down' button click:
jQuery('body').on('click', '.left-down', function (e) {
  
	jQuery('body #top-scale').stop();
	jQuery('body .right-hand-weight').stop();
	jQuery('body .left-hand-weight').stop();
	//top of scale animation
	jQuery("body #top-scale").animate({
  		transform: "rotate("+ setWeights(3,0) +"deg)"
	})
	

		//===rotate + reposition each weight *** 
		jQuery("body .right-hand-weight").animate({
		 	transform:"rotate("+ getWeights() +"deg) translateX("+getX("right")+"px,"+getY("right")+"px)"
		 })

		jQuery("body .left-hand-weight").animate({
		 	transform:"rotate("+ getWeights() +"deg) translateX("+getX("left")+"px,"+getY("left")+"px)"
		 })

		//console.log(getWeights());

		// set number value in weight 
		jQuery( "body .text-1" ).text( leftWeightPercentage );

});

我正在考虑在index.htm中为JQuery库和我给出的jquery代码文件添加一个脚本src标记,但是我无法弄清楚如何将代码导入到我的离子2项目中.

我试图让Auth0在浏览器中使用

离子运行浏览器

我遵循了Auth0的指南.我在用

auth0-7.6.1.min.js

锁定/ 10.10.2/lock.min.js

版本.导航到谷歌登录页面,但回调失败,空白屏幕.通过回电我的意思是加载

https://n00b.au.auth0.com/login/callback?state=blahblahblah ...

网址.它使用引发exeption的JavaScript加载白色html

没有找不到中继帧

在这些代码行中

     onOpen: function(cb) {
        var o = "*";
        var msgTarget = isIE ? findRelay() : window.opener;
        if (!msgTarget) throw "can't find relay frame";

显然,一个全局的window.opener属性预计会存在.知道整个URL由Auth0提供,我无法找到解决问题的方法.

我已经检查过Auth0中的日志,从他们的角度来看它都是绿色的并显示成功登录.

任何想法为什么会失败？

更新:在iPhone和iOS模拟器上测试,两者都只显示空白屏幕.下载了示例Auth0项目,没有任何修改就有这个问题.我的猜测是它与Cordova的InApp Browser插件有关,在一个新的safari窗口中打开登录页面

我试图设置#name1如下所示的值.但它显示编译时错误,如下所示.您能告诉我如何设置text组件的值？在这里,我使用单向数据绑定和模板驱动方法.

[ts]'ElementRef'类型中不存在属性'value'.

html的

<ion-input type="text" name="{{question?.name}}" #name1="ngModel" ngModel> </ion-input>

.TS

  @ViewChild('name1') name1: ElementRef;

  constructor(){

   }

 getAnswer(){
     this.name1.value = 'Hello';//here it shows the above error
  }

我完全陷入了疯狂的问题.我无法在Google Play商店中发布我的应用更新,因为当前版本代码为101002.

现在,我不明白该代码是如何生成的.在我的config.xml中,我尝试使用以下版本:

1.3
1.3.1
1.3.1.1

但每次它生成一个版本代码,如:

10300
10310
10311

它始终低于当前版本代码:101002

我还尝试使用以下命令构建:

ionic cordova build android --prod --release -- -- --versionCode=103020

但它不起作用

我无法手动设置Manifest文件的版本代码,因为它是由ionic 2构建过程生成的.任何的想法？

我已经开发了一个应用程序6个月了.我从来没有在设备上测试它,总是在浏览器中,但它已经到了我想在我的Android手机上测试的地步.

所以我这样做ionic cordova run android --device,我得到一个错误:

错误:无法在新BuildError的BuildError.Error(native)上转换程序(C:\ xampp\htdocs\project x\projectx \node_modules\@ionic\app-scripts\dist\util\errors.js:16:28) at C:\ xampp\htdocs\project x\projectx \node_modules\@ionic\app-scripts\dist\transpile.js:159:20 at transpileWorker(C:\ xampp\htdocs\project x\projectx \node_modules\@ionic\app-scripts\dist\transpile.js:107:12)在Object.transpile(C:\ xampp\htdocs\project x\projectx \node_modules\@ionic\app-scripts\dist\transpile.js:64:12) )在C:\ xampp\htdocs\project x\projectx \node_modules\@ionic\app-scripts\dist\build.js:109:82 [18:05:02]复制完成4.95秒

这似乎无法解决.

我很好奇,如果它可能是我的机器,电话或其他东西的问题所以我创建了一个新的离子项目ionic start ionic-test,然后再次运行它ionic cordova run android --device,这次它完美地工作.它在我的设备上运行.

所以考虑到这一点,我可以简单地将我的src文件粘贴到新项目中吗？或者我还能做些什么才能让这个工作？有什么想法/提示吗？谢谢!

编辑:

这是一个完整结果的pastebin ionic cordova run android --device. https://pastebin.com/x1zX5U1e(注意:打字稿中有大约200个代码警告,但它们都是非常小的东西)

这是一个pastebin ionic info

https://pastebin.com/A628WpAW

编辑2:我找到了解决方案.我很快就会发布一个详细的答案!

我需要在Ionic 2应用程序中使用swipeup/swipedown手势.当我做

<div (swipe)='someFunction($event)'></div>

然后我someFunction(e)被召唤,但只在水平滑道上 - 所以我无法听到上下方向的滑动.(swipeup)而且(swipedown)似乎根本不做任何事情.您是否知道Ionic beta是否可行？

一些元素,如按钮,对Ionic 2有原生的连锁反应.其他像卡片则没有.如何在任意Ionic 2元素上添加对涟漪效应的支持？

如何更改标题颜色？我试过下面但没有成功

 <ion-header>
  <ion-navbar danger>
    <ion-title>TITLE</ion-title>
  </ion-navbar>
</ion-header>

我的variable.scss是:

$colors: (
  primary:    #387ef5,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222
);

离子的背景地理定位插件未更新.我想要的功能是每30秒向插件询问一个lat lng值(如果可用).问题是,它只是给我最初的值,然后背景停止.前景很好,它确实是背景.基本上我无法在后台第一次初始发送后发送请求.

gps.ts

startTracking() {

    console.log('started tracking')
    const config: BackgroundGeolocationConfig = {
      desiredAccuracy: 10,
      stationaryRadius: 20,
      distanceFilter: 30,
      debug: false, //  enable this hear sounds for background-geolocation life-cycle.
      stopOnTerminate: false
    };

    this.backgroundGeolocation.configure(config)
    .subscribe((location: BackgroundGeolocationResponse) => {


      this.zone.run(() => {
        this.lat = location.latitude
        this.lng = location.longitude
        this.bearing = location.bearing
        this.speed = location.speed
        this.accuracy = location.accuracy
        this.timestamp = location.time
      })


      this.backgroundGeolocation.finish(); // FOR IOS ONLY
      this.backgroundGeolocation.stop()

      });


  this.backgroundGeolocation.start();

  }

sendGPS(){
this.optionsService.sendGPS(gpsData).subscribe(result => {
          }
        })
}

stopTracking() {

   this.sendGPS()
}

app.component.ts

constructor(){ …