領導讓我從新作一個微信H5頁面！

leader：咱們須要作一個微信H5頁面，效果如圖，功能如描述，時間越快越好。

需求是否是很簡單呢？2015-11-24 12:44:00文末有最新更新

背景描述

前幾天微信轉發相關項目開發後，這是第一個微信相關項目開發，爲何這個才叫第一個？上一個徹底沒有用到任何微信相關接口，一個動畫宣傳頁加一個表單，此次這個名曰「微信H5頁面」卻感受不是那麼簡單。只是以前本身寫着玩，關注過微信的相關接口，也就是5分鐘熱度，到如今那個公衆號仍是隻是會簡單的翻譯（用的百度翻譯接口，徹底沒有涉及到微信接口，由於用的就是微信Demo，根本就沒細看）。
說了這麼多，總結爲一個詞「小白」

這裏我想吐槽一下。有一段時間看見微博上有一些大牛在討論「HTML5簡稱爲H5？」，其實一開始我是無所謂的，但就是此次微信項目開發完之後讓我以爲有些討厭了，也許是今天的情緒緣由。

現狀分析

1. 認證訂閱號一枚
2. 無

分析原型圖需求

leader指定的交接員給個人是一個PPT的項目解說方案，以及一個PPT作的原型圖，這些圖是我用蹩腳的PS從新COPY的一份，部分類似內容界面略去。

圖一

用戶關注了咱們「**科技公司」官方微信後的消息推送，下方是官方微信導航。推送活動信息，導航活動添加入口。這裏須要用到兩個微信相關的接口。

接口列表

1. 關注/取消關注微信事件
   
2. 自定義菜單管理接口

圖二

用戶開啓或者查看衆籌詳情的時候必須檢測用戶是否關注了咱們的訂閱號，以及開啓衆籌詳情須要用到當前微信用戶的用戶信息。此接口僅限微信認證的服務號使用。因爲帳號權限沒有，決定申請一個僅用於開發使用的服務號用於配合這次活動，但前提仍是用戶必須關注咱們的訂閱號才能參與這次活動。因而在兩個帳號直接關聯就須要用到UnionID。
提到UnionID就須要區分一下兩個平臺：微信公衆平臺與微信開放平臺，對於我來講一開始是傻傻分不清楚的，在「Dear，Good night～」的解釋下，我才明白若是須要關聯這兩個帳號須要用到UnionID。
首先綁定帳號。

1. 註冊登陸微信開放平臺
   
2. 管理中心--公衆號--綁定
   
   其次經過認證訂閱號獲取全部關注用戶的unionid存表備用，關注或者取消關注去更新這個表的數據。
   最後受權登陸後根據當前受權用戶的信息，獲取服務號返回unionid，檢查用戶是否關注訂閱號，沒關注的狀況下跳轉一個二維碼展現頁面。
3. 總結思路圖
   

接口列表

1. 網頁受權獲取用戶基本信息
   
2. 獲取關注者列表
   
3. 獲取用戶基本信息(UnionID機制)

圖三

這個示意圖實際上是一個簡要的圖，若是要作的話這個頁面其實須要多個附加頁面。

1. 開啓衆籌後，這個界面也是展現個人衆籌界面。首頁須要顯示的信息有個人衆籌詳情，我能夠本身爲本身籌一次，分享讓微信好友幫我籌。
   
2. 微信好友進入我分享的界面後，首先是個人邀請語「HI，我正在參加……」，微信好友能夠替我籌一次。微信好友也能夠開啓本身的衆籌帳戶，也能夠分享出去給本身的微信好友。
   
3. 我衆籌到錢之後能夠按照額度10倍兌換優惠券。
   一些接口須要認證服務號或微信認證。

接口列表

1. 微信分享
   
2. 微信支付
   
3. 微信卡卷接口

其餘頁面

1. 描述遊戲規則
   
2. 關注訂閱號

常見問題總結

1. 關於token開發者中心配置的問題
   公衆號後臺配置好之後，設置好token等信息。服務器環境下的demo文件設置好token。保存若是出現token失敗，確認模式設置的是明文模式，其它模式須要對信息先處理再驗證返回，確認demo文件設置的token與公衆號後臺配置一致，最後輸出echostr

<?php
    //簡單總結後就應該是這樣子，爲了後續開發不該該是這樣子，結合實際開發狀況使用，但token驗證僅僅如此就夠了
    define("TOKEN", "unofficial");
    function checkSignature() {
        // you must define TOKEN by yourself
        if (!defined("TOKEN")) {
                throw new Exception('TOKEN is not defined!');
        }

        $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['echostr'];
    }
?>

1. 訂閱號權限不夠時，藉助單獨申請的服務號開發。unionid的使用問題
   上述已經描述過這個問題了，不細總結了
2. 在開發過程當中咱們能夠經過申請測試帳號來開發測試
   測試號的使用有一些限制，測試號開發的網頁帳號受權需先關注測試號才能進行測試，不然提示未關注測試號
3. 部分接口的測試須要按照配置的url來發起請求
   這個我經常使用的方法是修改本地host文件來實現，還有一些其餘的解決方案，可是我就是經常使用這個。
4. 區分accessToken
   access_token是公衆號的全局惟一票據，公衆號調用各接口時都需使用access_token。開發者須要進行妥善保存。access_token的存儲至少要保留512個字符空間。access_token的有效期目前爲2個小時，需定時刷新，重複獲取將致使上次獲取的access_token失效。因爲請求次數有限制，最好緩存一下。但這裏要說的是網頁帳號的請求也須要一個accessToken，此非彼。網頁受權是經過code換取access_token這個是沒有請求限制的，可是對於當前登陸用戶仍是須要緩存一下，請求用戶信息或切換頁面是仍是須要驗證用戶信息的。一開始有混淆，這裏總結一下。
   
5. sae來作服務器環境的狀況下須要注意的一些問題
   我使用的sae版本的thinkphp來開發的本次項目，官網下載sae版本的，sae代碼版本管理工具選擇的是git，提交代碼，爲何報錯了？sae的環境因素決定使用時須要初始化Memcache。
   數據庫的連接模式在5.3之後建議使用pdo模擬，因而這個地方配置的問題，若是使用sae官方版本直接使用內置配置，不須要按照網上教程手動建立添加配置config_sae.php。
6. php函數優化使用的學習，用途是針對url中的數據編碼
   

//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));
    }

1. 前端路由工具
   早在去年的時候面對公司項目的問題，當時爲了解決一套cms的頁面不修改頁面自己，實現無刷新加載時也研究個這個問題，可是對於多變的工做狀況，沒能有實際的成功，可是基本上仍是出現了一套沒有考慮性能的方案，可是最後「沒使用，沒優化」，不了了之了。就在這時我看到張大神出了一個mobilebone移動端的骨架，後來因爲公司重心的偏移，也就沒有繼續思考這個問題了，沒想到的是此次還會用到mobilebone。
   在問題面前徘徊的時候我有想到過angular，可是不必，也有想到過vue，原本是準備用vue-router的，可是感受與我想要的有些不同，暫時放棄了，不過仍是能夠關注一下，vue挺好的。羣內請教時，@葉小釵 有推薦他的blade，可是因爲時間的緣由，也就沒有繼續研究了，回頭仍是要好好看看多多向釵哥大神學習。

故事結局

爲了進度，週末在家值班的時候還全力趕進度，今天溝通的時候，leader說「這個要從新作，從新作一個H5+CSS3的」。一開始其實我是想讓領導能打發一點報酬，畢竟我以爲這是我應得的，可是領導直接讓我經理給我談，我只好回到本身的工位，告訴個人直屬領導我不作了，前面的報酬我也不要了，畢竟給的也不夠，至少我心理的平衡點丟失了。就這樣我拒絕了領導，不知道後面的日子如何，但原則性問題仍是要有，我以爲這事兒我辦的漂亮。
雖然是白忙一場，心理有些虧欠，但更多的倒是「爽」！
最新狀況是項目讓另一位同事接手，因爲需求什麼的都變化了，也就不能幫忙了，後續會繼續完善這個結局。

**
截止2015年11月24日08時52分，居然還有人點擊反對，不知道什麼心理。最新狀況是另一個同事也拒絕了，緣由不明，不是說複雜度問題，也不是說錢的問題，但更多的時候我以爲作事仍是要對得起本身的心，這點到哪裏我都適可維持。

出於閱讀人數多的問題，決定修改一下標題。原標題《領導讓我從新作一個微信H5頁面，我拒絕了！》

2015年11月24日12時31分，詳細說一下。公司非純技術性質互聯網公司，若是其餘部門須要作技術項目開發，須要提供需求呈批文件。如今是該部門領導內部討論了一些方案，最後選出方案A，技術幫忙按照需求方案A已經實現項目，交付時該部門領導直接臨時換方案了，前面的工做也就白作了，但事出有因，該部門是老闆直接管理，呈批文件須要項目開發完之後才能填寫，最後直接換方案。對於個人理解這就是不尊重，不管是領導仍是什麼，尊重本身的決定，尊重技術的工做，這都是一種基本的。也許我說的有些過，不是技術也許看來這就是一個靜態的HTML5頁面，不管什麼時候我更換方案，你都能按時交付，大家須要作的就是完成。我以爲這是對個人不尊重，我最後選擇的就是拒絕接下來的新的需求，前面的開發就是我本身在學習，作着玩，以上僅是對待本次開發的總結，而且說清楚事實，有些事情真的不是看到的或者感受到的那麼簡單，這和《這個項目須要多少錢》《你開發完這個功能須要多少時間》實際上是同樣的道理，經驗只能提高咱們判斷問題的準確性，但不能絕對。
**
本文同步更新在博客www.unofficial.cn