GitChat著者：オフノースポールペン
元：マイクロチャネル開発として穴を埋める：マイクロ文字のWeb開発プロセスの支払いとスキルをピット埋めるために
懸念マイクロチャネル公共番号を：技術についての深刻さ「のためのGitChat技術トピック」
[記事の最後にある卵をお見逃しなく]
張小龍はWeChatの父として、小さなプログラムを厳選し、その製品を何度も公に宣伝しました。この特別な優遇措置により、ミニプログラムが開始された後、内部テスト資格は100wから300wに解雇されたと言われています。本当かどうかにかかわらず、チームとミニプログラムに対する市場の期待だけで注目を集めることができます。開発者として、小さなプログラムの開発原理とプロセスを学び、理解することも非常に必要です。
小規模なプログラム開発を行う準備ができている場合は、この記事が間に合います。ビジネスでアプレットに関与する必要がない場合は、この記事を使用して、予期しないニーズに備えて、アプレット開発の基本を理解することもできます。
この記事では、アプレットのフロントエンド開発、アプレットサーバーの開発、アプレットのリリースとレビューの3つの側面からアプレットの開発プロセスを説明します。
1.小さなプログラムのフロントエンドの紹介と開発
小さなプログラムの開発には、フロントエンド開発とバックエンド開発が含まれます。フロントエンドは、携帯電話で表示できる部分を指します。フロントエンドは、主にページのレイアウトと表示を担当します。バックエンドは、データとビジネス処理機能を提供します。フロントエンドによって呼び出されるAPIインターフェース。
アカウントを登録する
アプレットの登録は比較的簡単です。まず、WeChatパブリックアカウントプラットフォーム（http://mp.weixin.qq.com）にログインし、右上隅の[今すぐ登録]ボタンをクリックします。
アプレットを選択
アプレットを登録
アプレットを登録する場合、ここに入力するメールボックスは、Tencentプラットフォームの未使用のメールボックスである必要があります。そうでない場合、メールボックスが使用されていることを通知します。WeChatパブリックアカウントの登録に使用するメールボックスや、ペンギンアカウントの登録に使用するメールボックスなど、ここで説明するTencentプラットフォームは使用できないことに注意してください。
登録が成功したら、アクティブ化するメールボックスを入力する必要があります。アクティベーション後、要件に従って、登録して開くアプリケーションのタイプを選択します。
プロジェクトを作成する
小さなプログラムの開発をサポートするために、WeChatは正式にWeChat Developer Toolと呼ばれるツールを開発しました。このツールは当初、開発中のWeChat公式アカウント開発者を支援するために使用されました。WeChatMini Programが起動すると、WeChat開発者ツールは同期して更新されます。 、小さなプログラムの開発もサポートしています。アプレットのページと構文の一部はWeChatによって完全にパッケージ化されており、アプレットのコンパイルとリリースはWeChat開発者ツールでのみ完了できるため、WeChat開発者ツールがアプレット開発者の大多数になっています。使用した開発ツール。他の開発ツールと比較して、WeChat開発者ツールの使いやすさはまだ比較的貧弱です。そのため、開発に他の開発ツールを使用し、コンパイルと公開にWeChat開発者ツールのみを使用しますが、面倒ですが、効率は大幅に向上しています価格比較の推奨ツールは、国内のEgretWingです。
WeChat開発者ツールのダウンロードアドレス：
https：//mp.weixin.qq.com/debu ...
青いフォント「開発者ツール」をクリックするだけです。
WeChat開発者ツールをインストールすると、初めてそれを開いたときに、QRコードをスキャンするように求められます。これは開発の承認にすぎません。WeChatがアプレットのバックグラウンドで開発者のWeChatにバインドされている限り、スキャンは可能です。スキャン後、開発ツールにログインします。
ログインに成功したら、プロジェクトリストページにアクセスします。アプレットが以前に開かれている場合は、リストに表示されます。
[アイテムの追加]をクリックして、ミニプログラムの作成ページに入ります。
ここでのアプリIDは、アプレット開発機関の認証ですので、記入しない場合は「アプリIDなし」を選択して開発してくださいが、正常にリリースできません。APPIDは、図に示すように、アプレットのバックグラウンドで取得できます。
アプレットのプロジェクト名は、実際のプロジェクトに応じて入力でき、中国語と英語をサポートします。
プロジェクトディレクトリは開発ディレクトリを指し、開発するアプレットディレクトリを指定するだけです。[OK]をクリックすると、新しいアプレットプロジェクトが正常に作成されます。
エンジニアリング構造
新しく作成されたアプレットプロジェクトを図に示します。
上の図では、ブロック1がメニューバーで、アプレットの操作メニューがここにあります。
編集：これはデフォルトモードでもあり、このモードではアプレットのソースコードを編集できます。
コンパイル：このモードでは、アプレットをコンパイルおよびデバッグでき、アプレットのログ出力がログ領域に出力されます。
プロジェクト：このモードでは、開発済みまたはテスト可能な小さなプログラムをパッケージ化してリリースできます。
ブロック2はプレビュー領域です。アプレットのページ表示とページ間の相互作用はすべてここにあります。このアプレットは、リリースされたときに携帯電話に表示されるアプレットとまったく同じです。
ブロック3はエンジニアリングコードの構造で、プロジェクト内のすべてのファイルとファイル間の関係を示しています。
ブロック4はコード領域であり、開発は主にこの領域でエンコードされます。
各WeChatアプレットには3つの公開エントリファイルがあります。
app.json：構成ファイル、構成ルーティングリスト、プログラム情報など
app.js：公開エントリファイル、アプレット起動時のInitロジック。
app.wxss：パブリックスタイルファイル。パブリックビューは各ビューで使用されます。
同時に、すべてのフロントエンドページファイルを含む、pagesというフォルダーもあります。
メインファイル
アプレットのフロントエンドには、js、json、wxml、wxssの4種類のファイルがあります。
js：主に、データのやり取りやページロジック処理のためのバックエンドインターフェースの呼び出しを担当します。
json：主にデータコンテンツを格納するために使用され、通常はあまり使用されません。
wxml：htmlに相当し、主にページ情報を表示するために使用されます。
wxss：cssと同等、基本的にcss構文と一致。
示されているように：
アプレットでは、上図のリストのように、各ページでフォルダを作成する必要があり、このフォルダの下に上記の4つのファイルを作成する必要があります。これら4つのファイルのファイル名は、フォルダと一致している必要があります。
一般的な方法
WeChatアプレット自体は新しいプログラミング言語を作成していません。その本質は依然としてh5、css、jsであり、最も基本的なフロントエンドテクノロジーです。したがって、アプレットの技術的なしきい値は低く、多くのアプレットが1週間で開発および起動されます。
ただし、図に示すように、WeChatはh5の代わりにwxmlを使用して、上記の3つのフロントエンドテクノロジーの特定のカプセル化を行い、そのタグは多くのカプセル化を行いました。
同時に、cssをwxssとしてカプセル化してもほとんど変化はありません。
jsのほかに、WeChat内の多くのjsがカプセル化されています。小さなプログラムでは、これらのカプセル化されたjsメソッドはコンポーネントと呼ばれます。より一般的に使用されます：
wx.request：ネットワークリクエストを作成するために使用され、アプレットのフロントエンドはバックエンドAPIと対話し、このコンポーネントが使用されます。
wx.navigateTo：現在のページを保持し、アプリケーション内のページにジャンプします。元のページに戻るにはwx.navigateBackを使用します。
wx.pageScrollTo：ページを目的の位置までスクロールします。
wx.setNavigationBarTitle：現在のページのタイトルを動的に設定します。
すべてのコンポーネントはここで表示できます：
https：//mp.weixin.qq.com/debu ...
2.小さなプログラムサーバーの紹介と開発
アプレットのフロントセクションはコンテンツの表示を担当します。純粋に静的なページを開発している場合は、上記を習得するだけで済みます。ただし、動的なページを作成する場合、つまりページのコンテンツがデータベースとやり取りする場合は、データのやり取りを提供するサーバーが必要です。アプレットでは、サーバーはインターフェースとして実装され、結果はjsonデータ形式で返されます。
サービスインターフェースの紹介
サーバーのインターフェース開発は、一般的なインターフェースと同じです。これは、任意のバックエンド開発言語で実装できます。インターフェース開発が完了すると、小さなプログラムのフロントエンドは、コンポーネントwx.requestを介してインターフェースを呼び出し、サーバーとの対話を実装します（図を参照）。
誰もがこのメソッドに精通している必要があります。実際、wx.requestはjqueryのajaxであり、使用方法はまったく同じです。このインターフェイス呼び出しでは、アプレットのフロントエンドがバックエンドインターフェイスを呼び出してニュースリストを取得し、結果セットをリスト変数に割り当てます。
図に示すように、アプレットに対応するフロントエンドページnews.wxmlで、リストをたどって表示します。
このようにして、小さなプログラムでリストページを完成させました。他のサーバー側の相互作用も同様です。小さなプログラムの開発は実際にはここにあります。以下は関連する構成です。
安全証明書の申請
前述のように、アプレットでのサーバー側インターフェースの開発は一般的なインターフェースと同じです。ほとんどの一般的なインターフェースはHTTPプロトコルを使用しますが、アプレットはそれがhttpsセキュリティプロトコルであることを要求します。それ以外の場合、インターフェースの呼び出しは失敗します。必須です。したがって、サーバーはセキュリティ証明書をインストールし、httpsプロトコルを使用してインターフェイスを公開する必要があります。
Symantecなど、インターネットでセキュリティ証明書を提供しているサービスプロバイダーはたくさんありますが、無料の証明書とは何ですか？エンタープライズアプリケーションの場合は、エンタープライズレベルのセキュリティ証明書を購入することをお勧めします。個人的な開発と研究のみを目的とする場合は、信頼できる無料のセキュリティ証明書であるAlibaba Cloudをこちらから入手してください。Alibaba Cloudは、個々のユーザーに無制限の期間の無料の証明書を提供します。これは、個々のユーザーでなければならないことに注意してください。エンタープライズユーザーには、このメリットはありません。まず、図に示すように、個人ユーザーアカウントでAlibaba Cloudにログインし、「CA証明書サービス」を見つけます。
証明書サービスのページに入ったら、図に示すように、「今すぐ購入」をクリックします。
無料の証明書を選択して今すぐ購入：
コンソールで「証明書サービス」を見つけ、必要に応じて情報を入力して、指定したドメイン名にバインドされた証明書を生成します。
証明書が生成されたら、それをダウンロードできます。ダウンロードした証明書ファイルには、さまざまな環境でセキュリティ証明書をすばやくインストールして構成する方法を説明した詳細な説明ドキュメントがあります。ここでは繰り返さないことにします。
第三に、小さなプログラムのリリースとレビュー
送信して公開
小さなプログラムの開発が完了したら、図に示すように、WeChat開発者ツールで送信できます。
プロジェクトモードで、[アップロード]をクリックしてアプレットコードのアップロードを完了します。アップロードが完了したら、図に示すように、アプレット管理のバックグラウンドにログインし、関連する項目を設定する必要があります。
まず、正当なドメイン名、つまりサーバーインターフェイスのドメイン名アドレスを設定します。ここでエラーを入力しないように注意してください。
次に、アプレットの基本情報を入力します。
ここで注意する点は、サービスカテゴリの選択です。自分の小さなプログラムに対応するカテゴリを必ず選択してください。カテゴリの選択が一致しない場合、拒否されます。再送信すると、3〜5営業日かかります。多くのこの場所では1か月以上消費されます。
基本情報のレビューに合格している限り、図に示すように、プログレッシブスモールプログラムでレビューを公開できます。
アプレットのリリースレビューに合格すると、すでに公開されているアプレットをWeChatで検索でき、アプレットの開発プロセスが完了します。
4.まとめ
小さなプログラムの開発は、開発スキルの面では完全にフロントエンドの開発です。新しいスキルは必要ありません。基本的に、開発に問題はありません。h5、css、jsを習得する開発者である限り、それらは有能である場合があります。さらに厄介なのは、小規模なプログラムの開発プロセスと、開発完了後のさまざまな資格のレビューです。WeChatの公式ドキュメントは不明確です。多くの場合、私の小規模なプログラムがどのようなプログラムに属しているかわからないので、試さなければなりません。 1週間は無駄になるので、この記事ではアプレットの開発部分について詳しく説明していません。オンラインには多くの関連記事がありますが、アプレットの開発プロセスとレビューとリリースに焦点を当てており、アプレットの開発中または開発中の友人を助けることを期待しています。質問がある場合は、WeChatパブリックアカウント「Jibi Beike」またはWeibo「Jibi Beike」に注目してください。
トランスクリプト：「Wang Dongqiang：小さなプログラムが迅速に開発と分析を開始する」
イースターエッグ
ヘビーチャット共有：
「効率的な学習、迅速な収益化：回り道をしない5つの学習戦略」
共有者：
ステーションBでライブコードを書き、ボールをジャグリングし、ウクレレを演奏し、エクストリームフィットネス、ランニング、パラグラフを書く、描画、翻訳、ライティング、スピーキング、トレーニングを行えるプログラマー。私はプログラミングを使用して自分のアイデアを実現し、Androidマーケットでお金を稼ぎ、多くの起業家としての経験を持っています。学習、習慣開発、時間管理が得意です。他の人に物理的に影響を与え、前向きな変化を起こします 現在、ThoughtWorksで働いており、幸せで効率的なプログラミング概念の普及に取り組んでいます。ソフトウェア職人コミュニティであるCodingStyle.cnは、彼の余暇に設立され、30以上の技術イベントを組織しました。チャットの概要：
学習に関しては、それは非常に大きなものです。断片化され、継続的に学習する時間はなくなり、集中することが難しくなり、本を持ち続けることが難しくなりますが、電話が呼び出されます：是非、幸せですとにかく、時間がたくさんあります〜いいえ、たくさんの本を読みましたが、私は人生でそれを読むことができませんでした。方法とツールを学びました。非効率的な使用シナリオを見つけることができませんでした。学習の速度は知識の速度に追いつけませんでした。学習の速度は、忘れる速度に追いつけませんでした。蔓延する知識と国境を越えた競争のこの時代では、学習能力がコア競争力です。考えてみてください、この1週間で学習せずに仕事が完了しましたか？非常に重要であるにもかかわらず、ほとんどの人は学習の問題を研究したことがなく、仕事への行き帰りで「get」リスニングブックを開くことは断片化された時間の生涯学習者であると考えています。私はプログラマーであり、コンサルタントであり、トレーナーでもあります。このセッションでは、Chatは学習の「傾向、原則、戦略」を分析し、より高い視点から学習を表示し、「コンテンツ、動機、相互作用、収益、リソース」の5つの側面から戦略を策定して、学習の問題点を解決し、効率的な学習者！
このチャットに無料で参加したいですか？非常にシンプルな「GitChatテクニカルチャット」パブリックアカウントが「効率的な学習」に戻る
この記事の再現先：Ape 2048 がWeChat開発の穴を埋める：WeChat Web支払い開発プロセスと穴埋めスキル