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