今日コラムに来たオタクは、Tencent WeChat支払いチームです。ミニプログラムのパブリックベータ版の1か月後、WeChatの支払いチームは、ミニプログラムのコンポーネント開発フレームワークWePYをオープンソース化しました。このプログラムは、Githubで公開された直後に多くの開発者に求められました。ネチズンが自発的に共有する関連する乾燥品。
WePYオープンソースフレームワークは今や非常に尊敬されていますが、オープンソースの当初の意図を思い起こしますが、WeChat支払いチームのGcaufyは次のように述べています。小さなプログラムの開発で遭遇するいくつかの実際的な問題を解決でき、この解決策を一緒に改善するために外の世界を助けることを望んでいます。」
次に、WePYオープンソースフレームワークの背後にある開発ストーリーを見てみましょう。
開発経験がある場合、アプレットの開発は非常に簡単に開始できると感じるでしょう。アプレット自体は、モジュール性、テンプレート、データバインディングなどの機能を提供し、MVVMフレームワークの使用に慣れているユーザーを非常に容易にします。ただし、同時に、動作環境が限られているため、小さなプログラムでは、市場で一般的なフレームワークをまだ使用できません。
数か月にわたる開発の過程で、作者のGcaufyは、小規模なプログラム開発を現在の開発習慣に近づける可能性が高い一連の計画を設計することを望んでおり、WePYオープンソースフレームワークが誕生しました。
WePYオープンソースフレームワークの原理は非常にシンプルです。WePYオープンソースフレームワークによって開発されたコードがコンパイルされると、小さなプログラム側で完全に実行されるコードを生成し、H5の開発のようにサポートできる従来のH5フレームワーク開発により近い小さなプログラム開発を実現できます。 npmパッケージを導入し、コンポーネントの開発とJSの新機能のサポートなどをサポートして、Vueに似た開発体験を実現します。
小さなプログラムのプリロードを実現するWePYオープンソースフレームワーク
従来のH5はプリロードによってユーザーエクスペリエンスを改善できるため、小さなプログラムを実装できることはわかっていますか？
答えはイエスです。アプレットでのプリロードの使用は、H5よりも実装が簡単で便利ですが、開発者が無視するのも簡単です。
従来のH5が起動すると、page1.htmlはpage1.htmlのページとロジックコードのみをロードします。page1.htmlがpage2.htmlにジャンプすると、page1のすべてのJavascriptデータがメモリから消えます。page1とpage2間のデータ通信は、URLパラメーターまたはブラウザーCookie、localStorgeストレージ処理を介してのみ渡すことができます。
アプレットが起動すると、すべてのページロジックコードがメモリに直接読み込まれます。page2が使用されていない場合でも、page1がpage2にジャンプしても、page1のロジックコードJavascriptデータがメモリから消えることはありません。Page2は、page1のデータに直接アクセスすることもできます。
アプレットのメカニズムのこの違いにより、プリロードが改善されます。
通常、onLoadイベントでデータを書き込むのに慣れています。しかし、アプレットのページ1がページ2にジャンプするため、ページ2のonLoadには300ms〜400msの遅延があります。以下に示すように：
アプレットの特性上、事前にページ1でデータを取得し、ページ2で直接使用できるため、300ミリ秒〜400ミリ秒のリダイレクトを回避できます。以下に示すように：
上記の問題に対して、WePYオープンソースフレームワークは、解決する2つの概念をカプセル化します。
- データのプリロード
小規模なプログラムで、データをpage2にアクティブに転送するために使用されます。たとえば、page2は、時間がかかるデータをロードする必要があります。page1がアイドル状態のときにロードし、page2に入ったときに直接使用できます。
- 事前クエリデータ
リダイレクトの遅延を回避するために使用され、ジャンプするときにpage2プレクエリを呼び出します。
WePYオープンソースフレームワークは、リダイレクト時にアクティブに呼び出されるonPrefetchイベントを追加します。この改善により、ライフサイクルが延長されます。同時に、onLoadイベントは、事前に読み込まれたデータまたは事前にクエリされたデータを受信するためのパラメーターも追加します。
// params
// data.from: 来源页面，page1
// data.prefetch: 预查询数据
// data.preload: 预加载数据
onLoad (params, data) {}小さなプログラムのデータ最適化を実現するWePYオープンソースフレームワーク
一部の開発者は、それを理解していない可能性があります。実際、アプレットのビューレイヤーとロジックレイヤーは完全に分離されています。2つの間の通信は、WeixinJSBridgeに依存しています。など：
- 開発者ツールはwindow.postMessageに基づいています
- iOSはwindow.webkit.messageHandlers.invokeHandler.postMessageに基づいています
- AndroidのWeixinJSCore.invokeHandlerに基づく
データバインディングメソッドthis.setData（）も同じなので、考えるのは簡単です。頻繁にデータバインディングを行うと、通信コストが大幅に増加しますか？
WeChat支払いチームは、setData（）のパフォーマンスの問題を検証するために、関連するテストを行いました。主に次の3つの状況で、パフォーマンステスト用に1000データのリストを動的にバインドします。
- 最適なバインディング：setData（）操作は、メモリに追加された後に最終的に実行されます。
- 最悪のバインディング：レコードを追加するときにsetData（）操作を実行します。
- 最もインテリジェントなバインディング：途中で実行される操作に関係なく、実行の最後にダーティチェックが実行され、設定が必要なデータに対してsetData（）操作が実行されます。
10回の更新とテストの実行後、次の結果が得られました。
テスト結果から、同じロジックを実装した場合のパフォーマンスデータが約40倍異なることがはっきりとわかります。テスト結果を分析することで、開発プロセス中に、同じプロセスで複数のsetData（）オペレーションを回避する必要があることを知ることができます。
それで、最適化方法は何ですか？
手動メンテナンスは確実に実現できますが、ページロジックが原因である場合、メンテナンスに多くの労力が費やされても、setData（）がプロセスごとに1回だけ存在することは必ずしも保証されず、メンテナンス性は高くありません。したがって、WePYオープンソースフレームワークは、データバインディングの最適化にダーティーチェックを使用することを選択しました。
WePYオープンソースフレームワークは構文からVueを借用していますが、原理は完全に異なります。たとえば、WePYオープンソースフレームワークは、Vueのゲッターとセッターの代わりにngのダーティチェックデザインを使用します。ユーザーは、プロセスでデータが変更された回数を気にする必要がなくなり、プロセスの最後にダーティーチェックを実行し、必要に応じてsetData（）を実行するだけで済みます。
WePYオープンソースフレームワークを利用した開発効率の向上
上記のパフォーマンスに基づく最適化に加えて、WePYオープンソースフレームワークは、開発効率の一連の最適化も行いました。
豊富なコンパイラをサポート
- jsは、BabelまたはTypeScriptでコンパイルすることを選択できます。
- WxmlはPug（以前のJade）の使用を選択できます。
- wxssはLess、Sass、Styusの使用を選択できます。
豊富なプラグイン処理をサポート
- プラグインを構成して、生成されたjsの圧縮と難読化、画像の圧縮、wxmlとjsonの圧縮によるスペースの節約などを行うことができます。
ESLint構文チェックをサポート
- 構成の行を追加すると、ESLint構文チェックをサポートできます。これにより、低レベルの構文エラーを回避し、プロジェクトコードのスタイルを統一できます。
ライフサイクルの最適化
- WePYオープンソースフレームワークは、onRouteライフサイクルを追加します。ページジャンプ後にトリガーするために使用されます。この最適化は、アプレットにページジャンプイベントがないためです。onShowイベントはページジャンプイベントとして使用できますが、HOMEボタンを押して元に戻す、支払い後にキャンセルするために引き上げる、共有後に引き上げると、onShowイベントをトリガーするなどの悪影響もあります。
イベント送信を最適化する
参照の元の書き込み方法：
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.target.dataset.alphabeta === 2 // 大写会转为小写
}
})最適化後：
<view @tap="bindViewTap("1", "2")"> DataSet Test </view>
methods: {
bindViewTap(p1, p2, event) {
p1 === "1";
p2 === "2";
}
}：詳細はWePYオープンソースのフレームワークのドキュメントで見つけることができますHTTPS：//tencent.github.io/wep ...。
WePYオープンソースフレームワーク2.0プラン
現在、WePYオープンソースフレームワークは、主にWeChat支払いチームの関係者によって、いくつかの外部の貢献者との余暇に維持されています。技術コミュニティには多くの熱心な貢献者がいます。彼らは参加するだけでなく、いくつかの新しい貢献者の強みをもたらし、時々より多くのコア機能を提供します。
「WePYオープンソースフレームワーク2.0の進捗状況」について質問されたとき、WeChatの支払いチームは、WePY 2.0の内部テストフェーズに入ると言っています。近いうちにあなたと会うと思います。
「Hope 2.0は、新しくて価値のある開発者バージョンです。」
小さなプログラムの開発の詳細については、WeChatが以下のQRコードをスキャンしてWeChat Geek WeGeekパブリックアカウントをフォローし、WeChatエコシステムを構築することを歓迎します。
この記事の複製：Ape 2048 WeGeek | WePYオープンソースフレームワーク