最近、建築家のリーダーシップの下、Iと最初から別のフロントエンドは、マイクロ文字のアプレットを開発します。これは、いくつかの点から、私はいくつかの分析やアーキテクチャアプレットのプレゼンテーションを行い、このプロジェクトに基づいて、より完全なプロジェクトの開発です。
限られた容量に、省略およびエラーがあるかもしれません、それを歓迎します。
ディレクトリ
コンテンツ
1.プロジェクト
これは軽量で、アプレット、すべての元学生アプレットのページです。私たちは、7つのモジュールに分割し、ユーザー、アドレス、クーポン、店舗を購入、注文、赤、返金されます。
最初のプロジェクトは、UI設計、フロントエンドの開発が同期され、サーバーを開発し、唯一のプロトタイプです。最初に、我々は、我々は変更を加えます別のアウト後提供バックエンド・サービス時間にプロトタイプのアーキテクチャおよびページの開発者、UIデザインとインターフェースに従っている、ここでは非常に重要があるだろう、それはこれは、モックデータますです後述します。
2.プロジェクトの構造
共通成分に分け、プロジェクト構造、画像リソース、ページ、データ処理ツールをフォーマットします。
├─ components（公用组件）
├─ images（图片资源）
├─ libs（库）
│ ├─ mock.js（mock数据）
│ ├─ sdk.js（接口封装）
├─ pages（页面）
│ ├─ account（用户相关）
│ ├─ address（地址相关）
│ ├─ coupon（优惠券相关）
│ ├─ group（团购商城相关）
│ ├─ order（订单相关）
│ ├─ redPackage（红包相关）
│ └─ refund（退款相关）
├─ service（数据格式处理）
└─ utils（工具类）
├─ public.js
└─ request.js
コンポーネントベースの開発3.？
我々はすべて知っているように、コンポーネントベースの開発は、多くの利点があります。
- コンポーネントの再利用、より少ないコード、より高速なコンパイル。
- 独立の論理コンポーネントは、変更が他のファイルには影響しません。
- 他の従業員を使用して簡単にクリアファイル構造。
コンポーネントデザインは無理がある場合は、事業を分割しないように、重複したコード、混沌とマルチコンポーネント通信ワークロードやその他の問題を発生します。プロジェクトの開発者は、全体の状況をコーディネイト分析し、裁判官する必要があります。だから、我々は機能モジュールとサービスモジュールを分析したプロトタイプマップ、見て、私たちは、グローバルなコンポーネントライブラリに出て抽出し、同じまたは再利用可能なモジュールになります。一方、我々はまた、それぞれのライブラリの下に置かれ、分割モジュールアセンブリの単一のモジュールアセンブリを行いました。
モジュールでは、我々はまた、アセンブリで書かれたアウトコード、比較的独立したページにいくつかのロジックを描き、一部は再利用することができ、いくつかの簡単なページの可読性に高くなっています。マルチプレックス例：注文状況や機能ボタンについて注文の詳細および順序リストは、同じですが、私たちは、この1の書かれた行動を取り出すことになります。可読性例：限り、最終的な結果は、ライン上の赤い封筒を選択した親コンポーネントに渡されるように、2つの間の境界が明確である、別の部品に書かれたポップの赤い封筒を、選択、注文ページを確認してください。
4. HTTPリクエストパッケージ
小さなマイクロチャネルネットワーク通信プログラム、最初のドメイン名を設定する、または違法促します。詳細 - - ドメイン情報を参照してください？情報は、開発者向けツールのドメイン名を設定することができます。
使用wx.request可以发起一个http请求
wx.request({
url: 'test.php', // 开发者服务器接口地址
data: { // 请求的参数
x: '', y: '' }, method: 'GET', // HTTP 请求方法, 默认GET header: { // 设置请求的 header 'content-type': 'application/json', // 默认值 'cookie': 'token=' + token }, dataType: 'json', // 返回的数据格式, 默认json responseType: 'text', // 响应的数据类型, 默认text success (res) { // 接口调用成功的回调函数 console.log(res.data) }, fail () { // 接口调用失败的回调函数 }, complete () { // 接口调用结束的回调函数（调用成功、失败都会执行） } }) 在平时项目使用中，我们往往会对HTTP请求做一层封装。
从图中可以看到，在自定义的SDK中封装HTTPS请求的数据或MOCK的数据。在各个七个模块的services中分派，然后再在页面pages或者组件components中调用。
- request模块封装，方便网络请求。
- 定义了一个名为SDK的类，集成所有接口获取的方法。
- 在app.js中，通过new命令生成对象实例，将初始化后的sdk赋值globalData.API_SDK，方便项目中中调用。
- Services中获取globalData.API_SDK对象实例中的接口方法，并导出。
- 在页面中引用Services中的方法，并调用方法。
5. 文档书写
软件开发文档是软件开发使用和维护过程中的必备资料。它能提高软件开发的效率，保证软件的质量，而且在软件的使用过程中有指导，帮助，解惑的作用，尤其在维护工作中，文档是不可或缺的资料。
在项目中，我们维护了两份文档，分别为API文档和组件README文档。 在API文档中，将每次SDK修改的内容都写在文档中，标注版本、时间、说明。并说明SDK接口的使用方式、传参说明、API响应说明等。在README文档中，则写明目录结构说明和全局组件说明。这样，开发者就可以通过文档来比较方便的了解此项目的情况。
6. 总结
在写这个项目前，前端约定了小程序开发规范。明确了页面、命名、样式、行为等规范。因此，在开发过程中，我们格外注意开发的风格，尽量做到统一。
在原型出来以后，架构师根据原型图进行了模块和功能的划分，明确了每个人所做的开发内容，制定了前端开发排期。
在开发过程中，因为UI图还没出来，我们根据原型图先进行了开发，后来在修改样式的时候，感觉还是挺麻烦的。不过，虽然存在样式返工问题，但是加快了后续的开发速度。
建築家は、SDKにインタフェースのすべてをカプセル化し、そして私たちは、より速い速度利便性の多くをドッキングされたときに、バックエンドプログラマは、（知識がバックエンドを理解するための強力であり、世界的な協調）データ内容との約束をしたのでたくさん。デバッグ時にAPIドキュメントは、コンテンツ記述を修正座って（そう多人数コラボレーション、文書を持っているに一方、お尻で、我々はフォローアップのリストに追加されたサービス端末が提供されていないフィールドの欠如、あるいは全くSDKパッケージの一部を変更本当に重要）。
このプロジェクトは、高速後半、初期の非常に遅いです。オンラインの日付くるプロジェクトは、実際には、我々はそれが（すでに我々がアップ書いた別のテストモジュールの後に1をテストした）いくつかのインタフェースを終らなかったライン上の日付与えられた、建築家が言った、拡張することができますが、私は、非常に心配を感じますしかし、我々がおよそ上の好きなのは驚くべきことです。
これは私がプロジェクト全体を完了し、小さなプログラムを書いた第二のプロジェクトです。わずかなモジュールを書かれた小さなプログラムの前にプロジェクトなので、気持ちはまだ大きな成長を得ています。過去に他の開発プロジェクト、同様のVUE、反応し、アリペイ小さなプログラムと比較すると、私は非常に同じ開発フレームワークを感じて、基本的な概念とプロセスは似ていますが、実装言語や方法の開発が異なります。