背景説明

數(shù)日前に WeChat が関連プロジェクト開発を転送した後、これが最初の WeChat 関連プロジェクト開発と呼ばれるのはなぜですか?前回のものはWeChat関連のインターフェースを全く使用しておらず、アニメーションプロモーションページ＋フォームでしたが、今回は「WeChat H5ページ」と呼ばれていますが、それほど単純ではないように感じます。これは、私が以前に趣味で書いたもので、WeChatの関連インターフェイス、つまり5分熱に注意を払っただけですが、これまでのところ、公式アカウントはまだ単純な翻訳しか知りません（使用されているBaidu翻訳インターフェイスにはWeChatインターフェイスは含まれていません）。まったく、WeChat のデモなので、まったく注意深く見ていませんでした）。
ここまで言いましたが、一言で言えば「シャオバイ」です

ここで愚癡を言いたいと思います。一時(shí)期、偉い人たちが「HTML5って略してH5って言うの？」と議論しているのを見かけましたが、実は最初は気にしていませんでしたが、今回のWeChatプロジェクトが開発されてから少しイライラしたのかもしれません。それは今日の私の気分でした。

現(xiàn)狀分析

1. 認(rèn)定購読番號(hào)1件

2. なし

プロトタイプ図要件の分析

リーダーから指名された引き継ぎ擔(dān)當(dāng)者からPPTプロジェクト説明計(jì)畫書とPPTプロトタイプを渡されました寫真、これら寫真は私が下手な PS を使用して再コピーしたもので、同様のコンテンツ インターフェイスの一部は省略されています。

寫真 1

ユーザーが「**Technology Company」の公式 WeChat をフォローした後のメッセージプッシュ 以下は公式 WeChat ナビゲーションです。アクティビティ情報(bào)をプッシュし、ナビゲーション アクティビティにエントリを追加します。ここでは 2 つの WeChat 関連のインターフェイスを使用する必要があります。

インターフェースリスト

1. WeChatイベントのフォロー/フォロー解除
   

2. カスタムメニュー管理インターフェース

図2

ユーザーがクラウドファンディングの詳細(xì)を開いたり表示したりするとき、ユーザーがクラウドファンディングの詳細(xì)を開いているかどうかを検出する必要がありますフォローしました クラウドファンディングの詳細(xì)を開くには、サブスクリプション アカウントと現(xiàn)在の WeChat ユーザーのユーザー情報(bào)が必要です。このインターフェイスは、WeChat 認(rèn)定サービス アカウントによってのみ使用できます。私はアカウント権限を持っていないので、今回のイベントに協(xié)力するために開発専用のサービスアカウントを申請(qǐng)することにしましたが、このイベントに參加するにはサブスクリプションアカウントをフォローしていることが前提となります。したがって、2 つのアカウントを直接接続するには UnionID が必要です。
UnionID に関しては、WeChat パブリック プラットフォーム と WeChat オープン プラットフォーム の 2 つのプラットフォームを區(qū)別する必要があります。これら 2 つのアカウントをリンクする必要がある場(chǎng)合は、UnionID を使用する必要があることに気付きました。
まずアカウントをバインドします。

1. WeChatオープンプラットフォームに登録してログインします
   

2. 管理センター--公式アカウント--バインド
   
   次に、バックアップ用の認(rèn)証サブスクリプションアカウントを介して、フォローしているすべてのユーザーのunionidストレージテーブルを取得します。またはフォローを解除してこのテーブルのデータを更新します。
   最終認(rèn)証ログイン後、現(xiàn)在の認(rèn)証ユーザーの情報(bào)に従ってサービス番號(hào)を取得してunionidを返し、ユーザーがサブスクリプションアカウントをフォローしているかどうかを確認(rèn)し、フォローしていない場(chǎng)合はQRコード表示ページにジャンプします。

3. 概要アイデアマップ
   

インターフェースリスト

1. ユーザー基本情報(bào)を取得するためのWebページ権限
   

2. フォロワーリストを取得
   

3. ユーザー基本情報(bào)を取得IDメカニズム)

図 3

この概略図は、実際には簡(jiǎn)単な図です。これを?qū)g行するには、実際には複數(shù)の追加ページが必要です。

1. クラウドファンディングを開始すると、このインターフェースには私のクラウドファンディングインターフェースも表示されます。ホームページに表示する必要がある情報(bào)には、私のクラウドファンディングの詳細(xì)が含まれており、一度自分で資金を集めて、それを WeChat の友達(dá)と共有して資金集めに役立てることができます。
   

2. WeChat の友達(dá)が私が共有するインターフェースに入ったら、最初に「こんにちは、私は參加しています...」という私の招待が表示されます。 WeChat の友人は、自分のクラウドファンディング アカウントを開設(shè)して、それを WeChat の友人と共有することもできます。
   

3. クラウドファンディングで資金を集めたら、金額の10倍のクーポンと交換できます。
   一部のインターフェイスでは、認(rèn)証サービス アカウントまたは WeChat 認(rèn)証が必要です。

インターフェースリスト

1. WeChat共有
   

2. WeChat支払い
   

3. WeChatカードインターフェース

その他のページ

1. ゲームのルールを説明します
   

2. サブスクリプションアカウントをフォロー

よくある質(zhì)問のまとめ

1. トークン開発者センターの設(shè)定について
   パブリックアカウントの背景を設(shè)定したら、トークンなどの情報(bào)を設(shè)定します。サーバー環(huán)境のデモファイルにトークンを設(shè)定します。トークンの保存に失敗した場(chǎng)合は、モードがプレーン テキスト モードに設(shè)定されていることを確認(rèn)し、最初に情報(bào)を処理してから、デモ ファイルに設(shè)定されたトークンがバックグラウンドと一致していることを確認(rèn)してください。公式アカウントの設(shè)定を行い、最後に echostr

   <?php
   //簡(jiǎn)單總結(jié)后就應(yīng)該是這樣子，為了后續(xù)開發(fā)不應(yīng)該是這樣子，結(jié)合實(shí)際開發(fā)情況使用，但token驗(yàn)證僅僅如此就夠了
   define("TOKEN", "unofficial");
   function checkSignature() {
       // you must define TOKEN by yourself
       if (!defined("TOKEN")) {
               throw new Exception(&#39;TOKEN is not defined!&#39;);
       }
   
       $signature = $_GET["signature"];
       $timestamp = $_GET["timestamp"];
       $nonce = $_GET["nonce"];
   
       $token = TOKEN;
       $tmpArr = array($token, $timestamp, $nonce);
       // use SORT_STRING rule
       sort($tmpArr, SORT_STRING);
       $tmpStr = implode( $tmpArr );
       $tmpStr = sha1( $tmpStr );
   
       if( $tmpStr == $signature ){
           return true;
       }else{
           return false;
       }
   }
   
   if( checkSignature() ) {
       echo $_GET[&#39;echostr&#39;];
   }
   ?>

2. を出力します。サブスクリプションアカウントには十分な権限がありません。現(xiàn)時(shí)點(diǎn)では、別途適用されたサービスアカウントを利用して開発されています。 UnionIDの使用に関する問題點(diǎn)
   この問題については上で説明したので詳しくはまとめません

3. 開発プロセスでは、テストアカウントを申請(qǐng)することでテストを開発できます
   UnionIDの使用にはいくつかの制限がありますテスト アカウントによって開発された Web アカウントは承認(rèn)されています。テストする前にテスト アカウントをフォローする必要があります。そうしないと、テスト アカウントがフォローされていないことを示すメッセージが表示されます

4. 一部のインターフェイスのテストでは、次に従ってリクエストを開始する必要があります。設(shè)定された URL
   私の一般的な方法は、ローカル ホスト ファイルを変更してこれを?qū)g現(xiàn)することです。他にも解決策はいくつかありますが、これが私が通常使用する方法です。

5. accessTokenの區(qū)別
   access_tokenは公式アカウントのグローバルに一意なチケットであり、公式アカウントは各インターフェースを呼び出す際にaccess_tokenを使用する必要があります。開発者はそれを適切に保存する必要があります。 access_token ストレージ用に少なくとも 512 文字のスペースを予約する必要があります。 access_token の有効期間は現(xiàn)在 2 時(shí)間であり、定期的に取得を繰り返すと最後の access_token が無効になります。リクエストの數(shù)は限られているため、キャッシュすることが最善です。ただし、ここで言いたいのは、Web アカウントのリクエストには accessToken も必要であり、accessToken は必要ないということです。 Web ページの認(rèn)証は、access_token のコードを交換することによって行われます。リクエストの制限はありませんが、ユーザー情報(bào)をリクエストするときやページを切り替えるときに、現(xiàn)在ログインしているユーザー情報(bào)をキャッシュする必要があります。最初は混亂がありましたので、ここで要約します。
   

6. saeをサーバー環(huán)境として使用する際に注意する必要があるいくつかの問題
   このプロジェクトの開発にはsaeバージョンを使用しました。saeコードバージョン管理ツール。 git を選択してコードを送信しましたが、なぜエラーが報(bào)告されるのでしょうか? sae の環(huán)境要因により、Memcache を使用するときに初期化する必要があることが決まります。
   データベースのリンク モードは 5.3 以降で PDO シミュレーションを使用することを推奨します。そのため、ここでの設(shè)定の問題については、sae の公式バージョンを使用して組み込みの設(shè)定を直接使用する場(chǎng)合は、オンライン チュートリアルに従う必要はありません。構(gòu)成 config_sae.php を手動(dòng)で作成して追加します。

7. URL 內(nèi)のデータをエンコードするために使用される php 関數(shù)の最適化について學(xué)習(xí)します

   //base64_encode();
   //base64_decode();
   function base64url_encode($data) {
       return rtrim(strtr(base64_encode($data), '+/', '-_'), '=');
   }
   
   function base64url_decode($data) {
       return base64_decode(str_pad(strtr($data, '-_', '+/'), strlen($data) % 4, '=', STR_PAD_RIGHT));
   }

8. フロントエンド ルーティング ツール
   去年の初め、私は當(dāng)時(shí)、會(huì)社のプロジェクトの問題に直面していました。変更されていない一連の CMS ページの問題を解決するために、ページ自體も非リフレッシュ読み込みを?qū)g裝するときにこの問題を研究しましたが、変更可能な作業(yè)條件に関しては実際には成功しませんでしたが、基本的には一連の CMS ページが存在しました。パフォーマンスを考慮していないソリューションは、最終的には「使用されない、使用されない」最適化して放置されます。ちょうどそのとき、張大深さんがmobilebone移動(dòng)端的骨架，后來由于公司重心的偏移，也就沒有繼續(xù)思考這個(gè)問題了，沒想到的是這次還會(huì)用到mobileboneを作っているのを見ました。
   問題をうろうろしているときに、angularについて考えましたが、それは必要ありませんでした。當(dāng)初はvue-routerを使用する予定でしたが、それは私が望んでいたものとは少し違うように感じたので、あげました。當(dāng)面は機(jī)能しますが、しばらくは vue が非常に優(yōu)れていることに注目してください。グループ內(nèi)でアドバイスを求めたとき、@葉小釵さんは自分の剣を勧めましたが、時(shí)間の都合上、研究を続けることはできませんでした。私は今でも偉大な巨匠、チャイ?ガーから多くのことを?qū)Wびたいと思っています。

話はここまで

進(jìn)捗の為、週末在宅勤務(wù)しながら頑張って進(jìn)めてました、今日連絡(luò)してたらリーダーが『これをH5+CSS3でやり直す必要がある。 」最初は、私は実際に上司に何らかの補(bǔ)償をしてもらいたかったのですが、結(jié)局のところ、それが私に當(dāng)然のことだと思っていました。しかし、上司が上司に私に話してくれるよう直接頼んだので、私は職場(chǎng)に戻って上司に報(bào)告しなければなりませんでした。直屬の上司に「いや、前回の報(bào)酬はいりません。少なくとも私の精神的なバランスは崩れています?！工长韦瑜Δ摔筏?、私はリーダーを拒否しました。今後どうなるかはわかりませんが、この件に関してはまだ原則の問題があると思います。
時(shí)間の無駄だったし、精神的に少し殘念な気持ちもありましたが、それ以上に「楽しい」経験でした！
最新の狀況では、要件が変更されたため、別の同僚がプロジェクトを引き継いだため、今後もこのエンディングを改善し続けます。

2015年11月24日12時(shí)31分、詳しくお話しましょう。同社は純粋に技術(shù)的なインターネット企業(yè)ではありません。他の部門が技術(shù)プロジェクトを開発する必要がある場(chǎng)合は、要求の承認(rèn)文書を提供する必要があります。現(xiàn)在、部門のリーダーが社內(nèi)でいくつかの計(jì)畫を議論し、最終的に計(jì)畫 A を選択しました。計(jì)畫 A の要件に従って技術(shù)支援が実裝されました。納品中に部門のリーダーが直接計(jì)畫を一時(shí)的に変更し、以前の作業(yè)は変更されました。無駄だったが、このことには理由があった。この部門は上司の直屬の部署であり、稟議書はプロジェクトの策定後にのみ記入することができ、最終的には直接計(jì)畫を変更することができる。私の理解では、これはリーダーであろうと何であろうと、自分の決斷を尊重し、技術(shù)的な仕事を尊重するのが基本です。技術(shù)的な話でなければ、これは靜的な HTML5 ページだと思われるかもしれません。いつ計(jì)畫を変更しても、予定どおりに完成させるだけで済みます。これは私にとって失禮なことだと思います。私の最終的な選択は、次の新しい要件を拒否することです。これまでの開発は、単に自分で學(xué)習(xí)してプレイしているだけです。実際には、実際に目にしたり感じたりするほど単純ではないこともあります。これは、「このプロジェクトにどれくらいの費(fèi)用がかかるか」や「この機(jī)能の開発にどれくらいの時(shí)間がかかるか」ということと同じです。精度には問題がありますが、絶対的なものではありません。

以上がWeChat H5 ページの作成プロセスの詳細(xì)な説明の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。