如何制作一個微信H5頁面

這篇文章將為大家詳細講解有關如何制作一個微信H5頁面，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

分析原型圖需求

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

2. 訂閱號權限不夠時，借助單獨申請的服務號開發。unionid的使用問題
   上述已經描述過這個問題了，不細總結了

3. 在開發過程中我們可以通過申請測試賬號來開發測試
   測試號的使用有一些限制，測試號開發的網頁賬號授權需先關注測試號才能進行測試，否則提示未關注測試號

4. 部分接口的測試需要按照配置的url來發起請求
   這個我常用的方法是修改本地host文件來實現，還有一些其他的解決方案，但是我就是常用這個。

5. 區分accessToken
   access_token是公眾號的全局唯一票據，公眾號調用各接口時都需使用access_token。開發者需要進行妥善保存。access_token的存儲至少要保留512個字符空間。access_token的有效期目前為2個小時，需定時刷新，重復獲取將導致上次獲取的access_token失效。由于請求次數有限制，最好緩存一下。但這里要說的是網頁賬號的請求也需要一個accessToken，此非彼。網頁授權是通過code換取access_token這個是沒有請求限制的，但是對于當前登錄用戶還是需要緩存一下，請求用戶信息或切換頁面是還是需要驗證用戶信息的。一開始有混淆，這里總結一下。
   

6. sae來做服務器環境的情況下需要注意的一些問題
   我使用的sae版本的thinkphp來開發的本次項目，官網下載sae版本的，sae代碼版本管理工具選擇的是git，提交代碼，為什么報錯了？sae的環境因素決定使用時需要初始化Memcache。
   數據庫的鏈接模式在5.3以后建議使用pdo模擬，于是這個地方配置的問題，如果使用sae官方版本直接使用內置配置，不需要按照網上教程手動創建添加配置config_sae.php。

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

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

關于“如何制作一個微信H5頁面”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。