領導讓我重新做一個微信H5頁面!


leader:我們需要做一個微信H5頁面,效果如圖,功能如描述,時間越快越好。

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

背景描述

前幾天微信轉發相關項目開發后,這是第一個微信相關項目開發,為什么這個才叫第一個?上一個完全沒有用到任何微信相關接口,一個動畫宣傳頁加一個表單,這次這個名曰“微信H5頁面”卻感覺不是那么簡單。只是之前自己寫着玩,關注過微信的相關接口,也就是5分鍾熱度,到現在那個公眾號還是只是會簡單的翻譯(用的百度翻譯接口,完全沒有涉及到微信接口,因為用的就是微信Demo,根本就沒細看)。
說了這么多,總結為一個詞“小白”
www.unofficial.cn

這里我想吐槽一下。有一段時間看見微博上有一些大牛在討論“HTML5簡稱為H5?”,其實一開始我是無所謂的,但就是這次微信項目開發完以后讓我覺得有些討厭了,也許是今天的情緒原因。

現狀分析

  1. 認證訂閱號一枚

分析原型圖需求

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

圖一

www.unofficial.cn
用戶關注了我們“**科技公司”官方微信后的消息推送,下方是官方微信導航。推送活動信息,導航活動添加入口。這里需要用到兩個微信相關的接口。

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

圖二

www.unofficial.cn
用戶開啟或者查看眾籌詳情的時候必須檢測用戶是否關注了我們的訂閱號,以及開啟眾籌詳情需要用到當前微信用戶的用戶信息。此接口僅限微信認證的服務號使用。由於賬號權限沒有,決定申請一個僅用於開發使用的服務號用於配合此次活動,但前提還是用戶必須關注我們的訂閱號才能參與此次活動。於是在兩個賬號直接關聯就需要用到UnionID。
提到UnionID就需要區分一下兩個平台:微信公眾平台微信開放平台,對於我來說一開始是傻傻分不清楚的,在“Dear,Good night~”的解釋下,我才明白如果需要關聯這兩個賬號需要用到UnionID。
首先綁定賬號。

  1. 注冊登錄微信開放平台
  2. 管理中心--公眾號--綁定
    www.unofficial.cn
    其次通過認證訂閱號獲取所有關注用戶的unionid存表備用,關注或者取消關注去更新這個表的數據。
    最后授權登錄后根據當前授權用戶的信息,獲取服務號返回unionid,檢查用戶是否關注訂閱號,沒關注的情況下跳轉一個二維碼展示頁面。
  3. 總結思路圖
    www.unofficial.cn
接口列表
  1. 網頁授權獲取用戶基本信息
  2. 獲取關注者列表
  3. 獲取用戶基本信息(UnionID機制)

圖三

www.unofficial.cn
這個示意圖其實是一個簡要的圖,如果要做的話這個頁面其實需要多個附加頁面。

  1. 開啟眾籌后,這個界面也是展示我的眾籌界面。首頁需要顯示的信息有我的眾籌詳情,我可以自己為自己籌一次,分享讓微信好友幫我籌。
  2. 微信好友進入我分享的界面后,首先是我的邀請語“HI,我正在參加……”,微信好友可以替我籌一次。微信好友也可以開啟自己的眾籌賬戶,也可以分享出去給自己的微信好友。
  3. 我眾籌到錢以后可以按照額度10倍兌換優惠券。
    一些接口需要認證服務號或微信認證。
接口列表
  1. 微信分享
  2. 微信支付
  3. 微信卡卷接口

其他頁面

www.unofficial.cn

  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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM