[ウィジェット]miniappsエンジニアリングソリューション

滴滴公共フロントエンドチーム-小春
前言:
昨日の夜、ちょうど飛行機に乗っていたので、夜明けに北京に着いた.微信を開くと、突然多くのニュースがありました.
はい、みんな討論しています.
WeChatウィジェット~
滴滴は第1陣の小プログラム開発者として、多くの開発学生と同じように、いくつかの問題に直面したが、多くの方面の助けを得て、内部の各チームの協力があって、微信の小仲間の指導もあって、指導者たちの支持.
私と私たちのチームの学生もそれぞれCSDNの「SDCC 2016中国ソフトウェア開発者大会」とCSDNがモバイル開発者に開催したオフライン共有会に参加し、私たちの技術実践を通じて業界の他のパートナーに共有しました.
今日、この小さなプログラムが発表された良い時、私たちも内部の小さなプログラム開発の利器を公開しました.
miniapps
A useful tool for developing webchat apps
本文:
実はずっと前に多くの内部と外部の学生が私に聞きました.
小春、滴滴内部の小プログラムの開発者の数と開発効率はどうですか.
チーム作戦として、私たちはどのように開発効率を高めますか?
1、人数=>効率
最初の小さなプログラムが出たばかりの頃、ハンドルの小さなプログラムの内訓を手配しました.
全員で開発者ツールをインストールし,1人1章を受け取り,1つずつウィジェットを学び合う
ターゲット:
みんなにウィジェットの
違いは、冷たいAPIなどの知識点ではなく、真実の認識がある.
私たちが審査をした後、皆さんがスタートしたときに直面した問題を心配する必要はありません.
1、開発者ツールをどこにインストールするか分からない
2、開発者がツールをインストールする時、代理店を開くことができない
3、開発者ツール使用
4、基本APIのクエリー方法と使用
もちろん、最大の収益は:
開発クラスメイトから
伝統的なDOM思考が変わった
私たちは早くからVueを適用しているので、ウィジェットというデータやビューの変化した開発ベースライブラリに切り込む際の障害は少ないです.
2、ツール=>>効率
評価されたツール:
*1つのウィジェット固有のファイル構造のプロジェクトを迅速に初期化できます(滴滴業務が多いため、複数の業務がウィジェットを並列に開発しています)
多くの人が公式に提供されている初期化プロジェクトフォルダを使っています
*開発中、新しいページをどんどん増やしていきます
ファイル名を設定し、ページファイル構造を自動的に作成します(多くの人が開発者ツールの下にいる場合は、まだ良いかもしれませんが、新版は自動化されています).
*ES 6とプリコンパイルスタイルは使えますか?
プロジェクトタイプを設定するには、次の手順に従います.
例えば、私がプロジェクトを初期化するときにsassプロジェクトを選んだら、node-sassを呼び出してコンパイルし、コンパイルしたファイルを持っていけばいいです.
例えばES 6を書くとbabel-coreを呼び出してコンパイルします
*共通のコンポーネントはどのように多重化されますか?
マルチページ繰返しコンポーネントは汎用コンポーネントを抽出し,モジュール化方式でダウンロードしてインストールする.例えば私达のこのような多业务线の开発、実は最も多重化することができるのはいくつかの共通のモジュールです:登录、上车点の下车点の选択など、业务の学友の间に対応するモジュールをインストールすればいいです
*運営しているhtmlを直接ウィジェットを満たすバージョンに解析できますか?
これは多くの人が考えていると思いますが、やっています.
運営は常に大きな需要であるため、ウィジェットはwebviewをサポートせずにh 5を開く.
... だからこそ、私たちの内部で使われている足場ツール:miniappsを公開します.
---------------------------------------------------------------------------------------

gitアドレスが来た

DDFE/miniapps

インストール方法

npm i miniapps -g
依存:Node.js and Git.

機能

miniapp -h

ウィジェットプロジェクトの作成

Initコマンドを実行すると、ディレクトリにsrcとdistの2つのフォルダが生成され、srcはソースディレクトリであり、distディレクトリはsrcをコンパイルして生成されたディレクトリであることがわかります.distディレクトリは、ウィジェット開発者ツールで開くために使用できます.

$ miniapp init 

Example:

$ miniapp init miniapp-demo

コンパイル

まず、初期化コマンドの実行時に指定したディレクトリに入り、miniapp buildを実行してsrcディレクトリ内のファイルをコンパイルします.miniappはファイル接尾辞に基づいて自動的に対応するコンパイルを行い、現在sass->wxss、stylus-wxss、ES 6->ES 5のコンパイルをサポートしており、コンパイルされたファイルはdistディレクトリにあります.

$ cd miniapp-demo
$ miniapp build

ファイル変更の監視

--watch、-wオプションでは、ファイルが変更されたときに自動的に再コンパイルできます.

$ cd miniapp-demo
$ miniapp build -w

pageディレクトリをすばやく生成するには、次の手順に従います。

このコマンドは、微信ウィジェットの公式仕様に適合するディレクトリ構造を迅速に生成し、新しいページをappに自動的に登録することができる.jsonファイル

$ miniapp gen 

例:

$ cd miniapp-demo
$ miniapp gen auth

以上のコマンドを実行すると、src/pagesディレクトリとdist/pagesディレクトリにauthフォルダが自動的に生成されます.

 └─┬ src
      ├─┬ pages          
      │ ├── auth                
      │ │ ├── auth.js
      │ │ ├── auth.json
      │ │ ├── auth.wxml
      │ │ ├── auth.sass
      ...
 └─┬ dist
      ├─┬ pages          
      │ ├── auth                
      │ │ ├── auth.js
      │ │ ├── auth.json
      │ │ ├── auth.wxml
      │ │ ├── auth.wxss
      ...

コンポーネントのインストール:

miniapp genを使用してpage構造を迅速に生成するほか、gitから指定ページをインストールするにはminiapp installを使用します.現在、すべてのモジュールがgithubにあります.com/miniapps-te...このアイテムの下で取得します.

$ miniapp i 

例:

$ cd miniapp-demo
$ miniapp i login

以上のコマンドを実行すると、次の手順に従います.1.repo githubからcom/miniapps-te...ダウンロード.2.minapp-widget-login repoのコンポーネントをsrc/pagesおよびdist/pagesの下にコピーします.

未完:

みんなは発見して、私達はh 5 parseを微信の小さいプログラムのフォーマットのを出していないで、期待してください~