微信公衆號h5開發總結

下面是一個公衆號h5頁面流程，說一下流程的功能，用戶看到一個營銷活動，選人報名支付參加該活動。

下面從8個點說明要注意的事情

1.頁面跳轉註意事項

h5頁面運行在瀏覽器裏(運行在微信裏的情況也是微信裏內嵌了一個瀏覽器)，瀏覽器默認提供了返回按鈕，用戶在操作返回按鈕時，就有可能出現一些影響體驗的事情，需要在開發是進行規避，如下。

• 從登錄頁面跳轉到選人頁面後，用戶點擊返回，不應該再返回登錄頁面。而應該是活動頁面。因爲已經登錄了。
• 支付完成後返回不應該返回到訂單頁面了，應該是不能返回了，所有的過程頁面應該銷燬了。只能點擊查看活動詳情。

總結在按需登錄的頁面流程裏，一定要做到返回時不再進入登錄頁面。流程完結後就不需要在返回到過程頁面。但是不是所有的情況都不能再返回上一步，因爲用戶有反悔的需要。所以又要容許用戶返回上一步進行反悔。例如用戶進入訂單頁面後，肯定有可能需要返回重新選擇報名人員。所以開發產品時要注意分別對待，不能一律不能返回了。

2.登錄狀態的驗證

• • h5產品有一個特徵，登錄流程容易被打亂。
    用戶可能從任何一個頁面的鏈接點擊進入查看該頁面。只要鏈接不是第一個頁面的鏈接，就會打亂我們原來的登錄流程。如果用戶是從訂單頁面鏈接進入訂單頁面的，用戶就跳過了原來的登錄頁面。意味着用戶就沒有登錄然後進入了該頁面，其實按正常邏輯是一定要登錄才能進入該頁面的。面對這個情況，有兩個處理辦法

• 1.進入該頁面發現未登錄直接跳轉到活動頁面(首頁)，然後走正常流程

• 2.進入該頁面發現未登錄直接跳轉到登錄頁面，登錄成功後再跳轉到訂單頁面，讓一切迴歸正常流程。
  第1種方法，用戶會損失一點便利性，但是會帶來開發上的邏輯清晰感，避免邏輯錯誤帶給用戶的差體驗。因爲用戶從哪個頁面進入難以預測，登錄後應該跳轉哪個頁面不好判斷。例如如果用戶直接從登錄頁面進來的，從支付完成頁面進來的等等。這樣可以把事情變得簡單。
  第2種方法的好處也有，就是可以接着剩餘的流程幹活。流程很長，要填寫的東西很多時，用戶會特別想可以根據剩下的流程來做事情。用戶會收藏未完成的步驟，準備好資料好進行剩下的步驟。特別是政府的報名系統。根據合適的情況來處理吧。

• • 有些頁面是不需要處於登錄狀態也可以進入查看的，這裏要做好判斷
    例如活動頁面(首頁)，登錄頁面，錯誤報告頁面(如斷網，服務器錯誤，訪問的鏈接頁面不存在)

總結 開發時哪些頁面要驗證登錄狀態 哪些頁面不要驗證登錄狀態，需要分清楚。然後登錄後應該往哪個頁面跳要考慮清楚。

3.特殊情況考慮

• 1.斷網， 服務器異常 要有統一的錯誤處理頁面，點擊後要刷新頁面，嘗試是否能夠恢復正常
• 2.用戶點擊的鏈接或拼接出來的鏈接不對應任何頁面，就要給一個頁面不存在的提示。

4.要特別注意iphone x 劉海屏適配，

問題就是這種屏幕的底部有40左右像素不能被用戶點擊了，如果這個區域有需要點擊的按鈕，就可能失去功能。特別是固定在底部的按鈕，最受這個影響。解決辦法很容易，關鍵是要在開發時注意到這個問題。解決辦法可以參考下面這個鏈接
https://blog.csdn.net/dx18520548758/article/details/80010358

5.ui適配問題
簡單就是根據屏幕寬度，對一切進行等比例放大縮小。

6.支付要注意的問題

微信出了一個點金計劃(https://pay.weixin.qq.com/wiki/doc/apiv3/wxpay/goldplan/chapter1_1.shtml)，如果不開通這個，就會遇到支付完成後不能順利返回h5頁面。解決辦法就是開通這個功能，然後對接它的一些api，可以參考如下這個鏈接
https://blog.csdn.net/CrazBarry/article/details/108790227