微信網頁開發(fā)-起步指南
本文介紹如何入門開發(fā)微信網頁。
微信網頁，就是在普通網頁運行在微信內置瀏覽器中時，可以有一些微信能力實現。
在入門之前，需要你具備基本的網頁開發(fā)基礎，如果你是零基礎入門，可以先學習前端網頁開發(fā)，或者嘗試學習更簡單的微信小程序。
一、起步前準備
首先準備一個基礎的網頁
將網頁 html 文件上傳至服務器（后端服務器、對象存儲等均可），通過特定的網址訪問在瀏覽器訪問到。甚至你也可以直接用本地開發(fā)工具打開，使用 localhost 、127.0.0.1 等打開也可以。
在瀏覽器中訪問的效果：
此時，你可以將相同的網址復制到微信桌面客戶端的任意聊天框，發(fā)送后點擊鏈接消息，你會發(fā)現在微信內置瀏覽器打開了與上圖相同的網頁。
這個時候，你就已經完成了在微信內置瀏覽器中打開網頁的前置任務。
根據你的前端技術棧，你可能是原生網頁開發(fā)，也可能使用 vue、react 等框架進行開發(fā)；可能本地開發(fā)，也可能是遠程服務器開發(fā)，無論什么形式，只要你能持續(xù)的對打開的網頁做編碼，就已經完成了前置準備工作。
二、申請開發(fā)者
由于微信內置瀏覽器無法打開調試控制臺，另外還有一些特殊的觸發(fā)動作不太好模擬。因此微信開發(fā)團隊為網頁開發(fā)做了微信開發(fā)者工具，它通過模擬微信客戶端的表現，我們可以很方便地在 PC 或者 Mac 上進行開發(fā)和調試工作。
另外微信網頁的相關特定支持，是依賴服務號的，你必須是一個「服務號」的開發(fā)者，才可以用該「服務號」做開發(fā)調試工作。
綁定為服務號網頁開發(fā)者的流程如下
1. 登錄服務號管理后臺進入對應的服務號。
2. 在「設置與開發(fā)-開發(fā)接口管理-開發(fā)者工具-web開發(fā)者工具」中，綁定開發(fā)者微信號。
對應開發(fā)者的微信號必須關注該「服務號」，綁定后即可在微信開發(fā)者工具使用該賬號 appid 調試開發(fā)。
每個服務號最多可同時綁定 50 個開發(fā)者微信號。
三、微信開發(fā)者工具
下載微信開發(fā)者工具，使用微信掃碼登錄后，點擊「服務號網頁」開發(fā)。
打開后，展示內容如下圖所示：
這張圖中對各個功能區(qū)做了一些標記，接下來解釋各功能區(qū)的作用：
1. 網址輸入器
主要輸入要調試的網頁地址，支持本地和云端 URL（只要是你在本地瀏覽器能訪問到，都可以用填寫）
- 輸入框左側是「刷新」按鈕，點擊可以強制刷新網頁。
- 輸入框右側是「收藏」按鈕，類似瀏覽器里的書簽功能，你可以把你經常需要調試的網頁通過點擊URL地址欄上的星星的icon將其收藏。取消收藏也很簡單，在已經收藏的URL的星星上再點擊一次就可以取消收藏。
- 收藏按鈕后是「收藏文件夾」按鈕，收藏之后你可以在收藏夾里看到所收藏的URL。
2. 模擬器
網址的內容將在模擬器中渲染，默認是手機端風格。你可以在模擬器左上角修改模擬器的機型和顯示比例，以完成各種情況下的頁面開發(fā)。
3. 調試控制臺
開發(fā)者工具集成的是 Chrome DevTools，操作體驗與正常的瀏覽器一致，這里不過多介紹。
4. 工具欄
「預覽」按鈕，會將當前網址轉換為二維碼，方便你直接用微信客戶端掃碼打開。
「清緩存」按鈕，主要對當前模擬器中打開的內容緩存進行清理，用于模擬未打開等業(yè)務場景。
5. 云開發(fā)
微信開發(fā)團隊集成的后端服務能力，方便開發(fā)者無需搭建服務器即可實現前后端開發(fā)，快速上線和迭代。
具體內容可詳細閱讀云開發(fā)
四、微信能力開發(fā)
現在，你可以正式開發(fā)微信網頁了，主要的內容有三個：
| 內容 | 介紹 |
|---|---|
| 網頁授權 | 通過此機制獲取用戶身份信息，進而實現業(yè)務邏輯。（僅服務號支持） |
| JS-SDK | 微信內置瀏覽器提供的能力集合，開發(fā)者可通過 sdk 接口完成相應的動作。 |
| 開放標簽 | 微信內置瀏覽器在打開頁面時，會將特定的標簽渲染成對應的功能組件，用于完成一些特定的任務。 |
你可以訪問各文檔，掌握相關內容。
五、云開發(fā)
開發(fā)發(fā)者可以使用云開發(fā)開發(fā)微信小程序、小游戲、服務號，無需搭建服務器，即可使用云端能力。
云開發(fā)為開發(fā)者提供完整的原生云端支持和微信服務支持，弱化后端和運維概念，無需搭建服務器，使用平臺提供的 API 進行核心業(yè)務開發(fā)，即可實現快速上線和迭代，同時這一能力，同開發(fā)者已經使用的云服務相互兼容，并不互斥。
云開發(fā)提供了幾大基礎能力支持：
| 能力 | 作用 | 說明 |
|---|---|---|
| 云函數 | 無需自建服務器 | 在云端運行的代碼，微信私有協(xié)議天然鑒權，開發(fā)者只需編寫自身業(yè)務邏輯代碼 |
| 數據庫 | 無需自建數據庫 | 一個既可在小程序前端操作，也能在云函數中讀寫的 JSON 數據庫 |
| 存儲 | 無需自建存儲和 CDN | 在小程序前端直接上傳/下載云端文件，在云開發(fā)控制臺可視化管理 |
| 云調用 | 原生微信服務集成 | 基于云函數免鑒權使用小程序開放接口的能力，包括服務端調用、獲取開放數據等能力 |
| 靜態(tài)網站托管 | 無需自建網站資源服務器 | 網站資源可放在云開發(fā)，甚至有提供默認域名使用 |
詳細云開發(fā)文檔可見詳細文檔
在服務號中使用的文檔可見在 Web 網頁中使用云開發(fā)
六、微信開發(fā)樣式庫
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統(tǒng)一。在微信網頁或小程序中使用 WeUI，有如下優(yōu)勢：
- 同微信客戶端一致的視覺效果，令所有微信用戶都能更容易地使用你的網站或小程序
- 便捷獲取快速使用，降低開發(fā)和設計成本
- 微信設計團隊精心打造，清晰明確，簡潔大方
該樣式庫目前包含表單、基礎組件、操作反饋、導航相關、搜索相關、層級規(guī)范等內容，已經在GitHub上開源。
訪問http://weui.io或微信掃碼即可預覽。
