検索

ホームページ  >  記事  >  ウェブフロントエンド  >  Angularjs は WeChat UI (weui) を統合します

Angularjs は WeChat UI (weui) を統合します

PHP中文网
PHP中文网オリジナル
2017-03-16 09:35:032751ブラウズ

この記事で推奨しているのは、Angularjs を使用して WeChat の新しく開始された UI (weui) を統合するプロセス全体を実装することです。同じニーズを持つ友人は、次の

はじめにを参照してください。

少し前、WeChat は独自の UI セットを立ち上げ、それを次のようなフロントエンド フレームワークに適用したようです。反応して表示します。最近 Angularjs を勉強しているので、この UI をこのフレームワークに統合したいと思っています。ここ数日試してみました。分離がうまくいかない場合は、それを共有します。専門家からアドバイスをもらいます。

Angularjs の基礎があり、ngRoute と ngAnimate を理解している読者

に適しています。

インクルードファイル

統合する際は公式デモページを参考に、完全にAngularjsを使用してデモページを自分で作りました他のフレームワークを参照します。まずはインポートしたファイルについて説明します。

  1. angular.min.js 1.4.9 を使用します

  2. angular-route.min.js 1.4.9 を使用します

  3. angular-animate.min.js 1.4.9 を使用します

  4. weui.min.css 0.4.0 を使用します

最初は公式デモページのような単一のページを作りたかったのですが、開発後にすべてのコンテンツを1つのファイルに入れるのはあまりにも煩雑であることがわかったので、Angularjsのルーティング機能を使用して小さな機能ごとに分離しました。必要に応じて別のページにロードします。これは、テンプレート読み込み機能を使用して実現されます。したがって、ナビゲーション ページのコードは非常にきれいに表示され、関数コードのどの部分を使用したい場合でも、対応する html ページと js スクリプト ファイルを直接使用できるため、便利で高速です。

以下はナビゲーション ページのコードです: 


<!DOCTYPE html>
<html lang="en" ng-app="weuiapp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
  <title>WeUI</title>
  <link rel="stylesheet" href="./css/weui.css" />
</head>
<style type="text/css">
.home,
.view {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}
</style>
<body ng-controller="home">
  <p class="home" ng-if="homeShow">
    <p class="weui_grids">
      <a href="#/button" class="weui_grid js_grid" data-id="button" ng-click="showBlock(&#39;button&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_button.png" alt="">
        </p>
        <p class="weui_grid_label">
          Button
        </p>
      </a>
      <a href="#/cell" class="weui_grid js_grid" data-id="cell" ng-click="showBlock(&#39;cell&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_cell.png" alt="">
        </p>
        <p class="weui_grid_label">
          Cell
        </p>
      </a>
      <a href="#/toast" class="weui_grid js_grid" data-id="toast" ng-click="showBlock(&#39;toast&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_toast.png" alt="">
        </p>
        <p class="weui_grid_label">
          Toast
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="dialog" ng-click="showBlock(&#39;dialog&#39;)">
        <p class="weui_grid_icon">
         <img src="./images/icon_nav_dialog.png" alt="">
        </p>
        <p class="weui_grid_label">
          Dialog
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="progress" ng-click="showBlock(&#39;progress&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_progress.png" alt="">
        </p>
        <p class="weui_grid_label">
         Progress
        </p>
      </a>
      <a href="#/msg" class="weui_grid js_grid" data-id="msg" ng-click="showBlock(&#39;msg&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_msg.png" alt="">
        </p>
        <p class="weui_grid_label">
          Msg
        </p>
      </a>
      <a href="#/article" class="weui_grid js_grid" data-id="article" ng-click="showBlock(&#39;article&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_article.png" alt="">
        </p>
        <p class="weui_grid_label">
          Article
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="actionsheet" ng-click="showBlock(&#39;actionsheet&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_actionSheet.png" alt="">
        </p>
        <p class="weui_grid_label">
          ActionSheet
        </p>
      </a>
      <a href="#/icons" class="weui_grid js_grid" data-id="icons" ng-click="showBlock(&#39;icons&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_icons.png" alt="">
        </p>
        <p class="weui_grid_label">
          Icons
        </p>
      </a>
      <a href="#/panel" class="weui_grid js_grid" data-id="panel" ng-click="showBlock(&#39;panel&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_panel.png" alt="">
        </p>
        <p class="weui_grid_label">
          Panel
        </p>
      </a>
      <a href="javascript:;" class="weui_grid js_grid" data-id="tab" ng-click="showBlock(&#39;tab&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_tab.png" alt="">
        </p>
        <p class="weui_grid_label">
          Tab
        </p>
      </a>
      <a href="#/searchbar" class="weui_grid js_grid" data-id="searchbar" ng-click="showBlock(&#39;searchbar&#39;)">
        <p class="weui_grid_icon">
          <img src="./images/icon_nav_search_bar.png" alt="">
        </p>
        <p class="weui_grid_label">
          SearchBar
        </p>
      </a>
    </p>
  </p>
  <p class="view" ng-view ng-if="viewShow"></p>
  <script type="text/javascript" src="./js/angular.min.js"></script>
  <script type="text/javascript" src="./js/angular-animate.min.js"></script>
  <script type="text/javascript" src="./js/angular-route.min.js"></script>
  <script type="text/javascript" src="./js/toast.js"></script>
  <script type="text/javascript" src="./js/example.js"></script>
</body>

</html>


上記のコードのほとんどは次のコードから来ています。公式ホームページのコードには Angularjs を使用しているため、機能デモページを表示する ngApp、ngController、ngClick、ngIf、ngView などの対応する属性が追加されています。

このコードでは、ngClick で showBlock 関数が使用されています。パラメーターは、ルーティング関数の使用後は使用されず、非表示および表示されたナビゲーションのみです。コードのこの関数部分と関数デモ部分に追加されています。詳細については、以下のスクリプト コードを参照してください。 


angular.module(&#39;weuiapp&#39;, [&#39;ngAnimate&#39;, &#39;ngRoute&#39;])
  .config(function($routeProvider) {
    $routeProvider
      .when(&#39;/&#39;, {
        controller: &#39;home&#39;,
        templateUrl: &#39;&#39;
      })
      .when(&#39;/button&#39;,{
        controller: &#39;button&#39;,
        templateUrl: &#39;button.html&#39;
      })
      .when(&#39;/cell&#39;, {
        controller: &#39;cell&#39;,
        templateUrl: &#39;cell.html&#39;
      })
      .when(&#39;/toast&#39;, {
        controller: &#39;toast&#39;,
        templateUrl: &#39;toast.html&#39;
      })
      .when(&#39;/msg&#39;, {
        controller: &#39;msg&#39;,
        templateUrl: &#39;msg.html&#39;
      })
      .when(&#39;/article&#39;, {
        controller: &#39;article&#39;,
        templateUrl: &#39;article.html&#39;
      })
      .when(&#39;/icons&#39;, {
        controller: &#39;icons&#39;,
        templateUrl: &#39;icons.html&#39;
      })
      .when(&#39;/panel&#39;, {
        controller: &#39;panel&#39;,
        templateUrl: &#39;panel.html&#39;
      })
      .otherwise({
        redirectTo: &#39;/&#39;
      })

  })
  .controller(&#39;home&#39;, function($scope) {
    $scope.homeShow = true;
    $scope.viewShow = false;

    $scope.showBlock = function() {
      $scope.homeShow = false;
      $scope.viewShow = true;
    }
  })
  .controller(&#39;toast&#39;, [&#39;$scope&#39;, &#39;$interval&#39;, toast])
  .animation(&#39;.aweui-show&#39;, [&#39;$animateCss&#39;, toastAnimate])
  .animation(&#39;.home&#39;, [&#39;$animateCss&#39;, function($animateCss) {
    return {
      enter: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: &#39;100%&#39;, top: 0, opacity: 0 },
          to: { left: 0, top: 0, opacity: 1 },
          duration: .3
        });
      },
      leave: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: 0, top: 0, opacity: 1 },
          to: { left: &#39;-100%&#39;, top: 0, opacity: 0 },
          duration: .3
        });
      }
    }
  }])
  .animation(&#39;.view&#39;, [&#39;$animateCss&#39;, function($animateCss) {
    return {
      enter: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: &#39;100%&#39;, top: 0, opacity: 0 },
          to: { left: 0, top: 0, opacity: 1 },
          duration: .3
        });
      },
      leave: function(element, doneFn) {
        return $animateCss(element, {
          from: { left: 0, top: 0, opacity: 1 },
          to: { left: &#39;-100%&#39;, top: 0, opacity: 0 },
          duration: .3
        });
      }
    }
  }])
$scope.showBlock = function() {
  $scope.homeShow = false;
  $scope.viewShow = true;
}


このセクションは、関数によって実装される関数コードであり、実装する変数 homeShow と viewShow をそれぞれ制御します。ナビゲーションと機能の 2 つの部分の表示と非表示を示します。 


.animation(&#39;.home&#39;, [&#39;$animateCss&#39;, function($animateCss) {
  return {
    enter: function(element, doneFn) {
      return $animateCss(element, {
        from: { left: &#39;100%&#39;, top: 0, opacity: 0 },
        to: { left: 0, top: 0, opacity: 1 },
        duration: .3
      });
    },
    leave: function(element, doneFn) {
      return $animateCss(element, {
        from: { left: 0, top: 0, opacity: 1 },
        to: { left: &#39;-100%&#39;, top: 0, opacity: 0 },
        duration: .3
      });
    }
  }
}])


上記はナビゲーション部分を表示する際のアニメーションエフェクトコードです。ナビゲーション部分は絶対位置に初期化されているため、表示領域の左側から外れてフェードアウトして消えます。機能のデモを見てナビゲーションに戻ると、アニメーションが反転します。ここではngAnimateの$animateCssサービスを利用しており、このサービスが提供する入場イベントenterと退出イベントleaveを利用します。その他のアニメーション機能は同様です。 


$routeProvider
  .when(&#39;/&#39;, {
    controller: &#39;home&#39;,
    templateUrl: &#39;&#39;
  })
  .when(&#39;/button&#39;,{
    controller: &#39;button&#39;,
    templateUrl: &#39;button.html&#39;
  })
  .when(&#39;/cell&#39;, {
    controller: &#39;cell&#39;,
    templateUrl: &#39;cell.html&#39;
  })
  .when(&#39;/toast&#39;, {
    controller: &#39;toast&#39;,
    templateUrl: &#39;toast.html&#39;
  })
  .when(&#39;/msg&#39;, {
    controller: &#39;msg&#39;,
    templateUrl: &#39;msg.html&#39;
  })
  .when(&#39;/article&#39;, {
    controller: &#39;article&#39;,
    templateUrl: &#39;article.html&#39;
  })
  .when(&#39;/icons&#39;, {
    controller: &#39;icons&#39;,
    templateUrl: &#39;icons.html&#39;
  })
  .when(&#39;/panel&#39;, {
    controller: &#39;panel&#39;,
    templateUrl: &#39;panel.html&#39;
  })
  .otherwise({
    redirectTo: &#39;/&#39;
  })


これはルーティング サービスであり、HTML の a タグの href 属性に対応するため、showBlock 関数はこのプログラムでは使用されません。パラメータはもう役に立ちません。この関数は、動的効果を追加するためにのみ作成されました。

次に、機能デモ部分のページコードを見てみましょう。 


<p class="page">
  <p class="hd">
    <h1 class="page_title">Toast</h1>
  </p>
  <p class="bd spacing">
    <a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showToast()">点击弹出Toast</a>
    <a href="javascript:;" class="weui_btn weui_btn_primary" ng-click="showLoadingToast()">点击弹出Loading Toast</a>
  </p>
  <!--BEGIN toast-->
  <p id="toast" ng-if="toastHide" class="aweui-show">
    <p class="weui_mask_transparent"></p>
    <p class="weui_toast">
      <i class="weui_icon_toast"></i>
      <p class="weui_toast_content">已完成</p>
    </p>
  </p>
  <!--end toast-->
  <!-- loading toast -->
  <p id="loadingToast" ng-if="loadingToastHide" class="weui_loading_toast aweui-show">
    <p class="weui_mask_transparent"></p>
    <p class="weui_toast">
      <p class="weui_loading">
        <p class="weui_loading_leaf weui_loading_leaf_0"></p>
        <p class="weui_loading_leaf weui_loading_leaf_1"></p>
        <p class="weui_loading_leaf weui_loading_leaf_2"></p>
        <p class="weui_loading_leaf weui_loading_leaf_3"></p>
        <p class="weui_loading_leaf weui_loading_leaf_4"></p>
        <p class="weui_loading_leaf weui_loading_leaf_5"></p>
        <p class="weui_loading_leaf weui_loading_leaf_6"></p>
        <p class="weui_loading_leaf weui_loading_leaf_7"></p>
        <p class="weui_loading_leaf weui_loading_leaf_8"></p>
        <p class="weui_loading_leaf weui_loading_leaf_9"></p>
        <p class="weui_loading_leaf weui_loading_leaf_10"></p>
        <p class="weui_loading_leaf weui_loading_leaf_11"></p>
      </p>
      <p class="weui_toast_content">数据加载中</p>
    </p>
  </p>
</p>


これは、待機プロンプト関数をロードするためのデモ ページ コードです。 1 つは、合計 2 つのスタイルです。テキストの表示; 次に、読み込み待機アニメーションがあり、プロンプト テキストが表示されます。

ページには 2 つのボタンがあり、それぞれこれら 2 つのスタイルを吐き出すと、3 秒後に自動的に消えます。

ナビゲーション ページの js には、この関数ページのスクリプト コード内の関数を呼び出すコントローラーとアニメーション関数、つまりコントローラー関数 toast() とアニメーション関数 toastAnimate() があります。スクリプトファイルのコードは以下の通りです。 


//toast控制器
function toast($scope, $interval) {
  $scope.toastHide = 0;
  $scope.loadingToastHide = 0;

  $scope.showToast = function() {
    $scope.toastHide = 1;

    $interval(function() {
      $scope.toastHide = 0;
    }, 3000, 1);
  }

  $scope.showLoadingToast = function() {
    $scope.loadingToastHide = 1;

    $interval(function() {
      $scope.loadingToastHide = 0;
    }, 3000, 1);
  }
}

//显示与隐藏时的动画，使用ngAnimate中的$animateCss服务
function toastAnimate($animateCss) {
  return {
    enter: function(element, doneFn) {
      return $animateCss(element, {
        from: { opacity: 0 },
        to: { opacity: 1 },
        duration: .3
      });
    },
    leave: function(element, doneFn) {
      return $animateCss(element, {
        from: { opacity: 1 },
        to: { opacity: 0 },
        duration: .3
      });
    }
  }
}


この時点で、ナビゲーションと機能デモ ページが実装されました。ほとんどの UI は静的で動的ではないため、公式デモをコピーするだけで済みます。動的コードを追加する必要がある場合は、現時点ではこれのみを行っており、今後も追加して完成させる予定です。

関連記事:

WeChat WEUI で画像をアップロードする方法、バックグラウンドで PHP で処理する方法は?

WEUI アプリケーションで一般的に使用される情報プロンプトの JS ポップアップ レイヤーのカプセル化

WeChat の WeUI を通じてどのような知識を学ぶことができますか?

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：Jquery は単純なカルーセル効果を実装します (コードは機能します)_jquery次の記事：Jquery は単純なカルーセル効果を実装します (コードは機能します)_jquery

関連記事

続きを見る