Question

情况：

我需要在我的Ionic应用程序中显示Twitter时间轴。只是。无需进一步操作（登录，转推等）。

ATTEMPT 1 - SIMPLE EMBED （如在普通网站中）

在视图中：

<a class="twitter-timeline" href="https://twitter.com/MY_TWITTER" data-widget-id="TWITTER_WIDGET_ID">Tweets by @MY_TWITTER</a>

index.html中的脚本：

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

不工作。测试手机中的实际应用程序并未显示。只在刷新页面后，才会在浏览器中测试应用程序。

如果我将相同的代码行放入一个简单的角度Web应用程序（不是Ionic应用程序），而不是工作正常。为什么会出现这种奇怪的行为？与离子有关吗？

ATTEMPT 2 - NGTWITTER

这是本教程中解释的代码：http://devdactic.com/twitter-rest-api-angularjs/

控制器：

.controller('TwitterCtrl', function($scope, $ionicPlatform, $twitterApi, $cordovaOauth) {


  var twitterKey = 'STORAGE.TWITTER.KEY';
  var clientId = 'MY_CLIENT_ID';
  var clientSecret = 'MY_CLIENT_SECRET';
  var myToken = '';

  $scope.tweet = {};

  $ionicPlatform.ready(function() {

    myToken = JSON.parse(window.localStorage.getItem(twitterKey));
    if (myToken === '' || myToken === null) {
      $cordovaOauth.twitter(clientId, clientSecret).then(function (succ) {
        myToken = succ;
        window.localStorage.setItem(twitterKey, JSON.stringify(succ));
        $twitterApi.configure(clientId, clientSecret, succ);
        $scope.showHomeTimeline();
      }, function(error) {
         console.log(error);
      });
     } else {
      $twitterApi.configure(clientId, clientSecret, myToken);
      $scope.showHomeTimeline();
    }

  });


  $scope.showHomeTimeline = function() {
    $twitterApi.getUserTimeline({screen_name: 'MY_TWITTER_FEED'}).then(function(data) {
       $scope.home_timeline = data;
     });
  };

  $scope.submitTweet = function() {
   $twitterApi.postStatusUpdate($scope.tweet.message).then(function(result) {
      $scope.showHomeTimeline();
    });
  };

  $scope.doRefresh = function() {
    $scope.showHomeTimeline();
    $scope.$broadcast('scroll.refreshComplete');
  };

  $scope.correctTimestring = function(string) {
    return new Date(Date.parse(string));
  };

});

观点：

    <div class="list">
      <div class="item item-input-inset">
        <label class="item-input-wrapper">
          <input type="text" placeholder="My tweet..." ng-model="tweet.message" ng-maxlength="140">
        </label>
        <button class="button button-small" ng-click="submitTweet()">
          Tweet
        </button>
      </div>
    </div>

    <ion-refresher on-refresh="doRefresh()"></ion-refresher>

    <div ng-show="home_timeline.length == 0">Loading tweets...</div>

    <div ng-repeat="entry in home_timeline" class="list card">
      <div class="item item-avatar">
        <img ng-src="{{entry.user.profile_image_url}}"/>
        <h2>{{entry.user.name}}</h2>
        <p>{{correctTimestring(entry.created_at) | date:'medium'}}</p>
      </div>

      <div class="item item-body">
        <p ng-bind-html="entry.text"></p>
        <img ng-if="entry.extended_entities" ng-src="{{ entry.extended_entities.media[0].media_url }}" style="width: 100%;"/>
      </div>

    </div>

通过这种方式，我可以正确地看到所请求的Twitter提要以及编写推文的可能性。这不是我想要的，因为它要求用户登录Twitter并允许应用程序被授予访问他的Twitter帐户的权限，而我只是想显示一个Twitter提要而已。

此外，一旦应用程序的推特部分打开，应用程序不再工作，例外，菜单中的某些链接停止工作。

问题：

如何在Ionic应用程序中简单显示推特时间线？

谢谢！

Answer 1

我在Ionic框架中的Twitter Login git hub上传了一个示例项目如果您有任何疑问请告诉我在克隆项目之前，请遵循以下步骤：
1）在Twitter Developer console中创建开发人员项目 2）用您在twitter开发者控制台中创建的值替换项目中的APPID和APPSECRET 3）请在twitter开发者应用程序中将回拨URL写为http://tinyurl.com/krmpchb
4）看一下github中的README.md文件

如何在Ionic app中显示Twitter时间线？

1 个答案: