微信網(wǎng)頁(yè)開(kāi)發(fā)-起步指南

本文介紹如何入門開(kāi)發(fā)微信網(wǎng)頁(yè)。

微信網(wǎng)頁(yè)，就是在普通網(wǎng)頁(yè)運(yùn)行在微信內(nèi)置瀏覽器中時(shí)，可以有一些微信能力實(shí)現(xiàn)。

在入門之前，需要你具備基本的網(wǎng)頁(yè)開(kāi)發(fā)基礎(chǔ)，如果你是零基礎(chǔ)入門，可以先學(xué)習(xí)前端網(wǎng)頁(yè)開(kāi)發(fā)，或者嘗試學(xué)習(xí)更簡(jiǎn)單的微信小程序。

一、起步前準(zhǔn)備

首先準(zhǔn)備一個(gè)基礎(chǔ)的網(wǎng)頁(yè)

將網(wǎng)頁(yè) html 文件上傳至服務(wù)器（后端服務(wù)器、對(duì)象存儲(chǔ)等均可），通過(guò)特定的網(wǎng)址訪問(wèn)在瀏覽器訪問(wèn)到。甚至你也可以直接用本地開(kāi)發(fā)工具打開(kāi)，使用 localhost 、127.0.0.1 等打開(kāi)也可以。

在瀏覽器中訪問(wèn)的效果：

此時(shí)，你可以將相同的網(wǎng)址復(fù)制到微信桌面客戶端的任意聊天框，發(fā)送后點(diǎn)擊鏈接消息，你會(huì)發(fā)現(xiàn)在微信內(nèi)置瀏覽器打開(kāi)了與上圖相同的網(wǎng)頁(yè)。

這個(gè)時(shí)候，你就已經(jīng)完成了在微信內(nèi)置瀏覽器中打開(kāi)網(wǎng)頁(yè)的前置任務(wù)。

根據(jù)你的前端技術(shù)棧，你可能是原生網(wǎng)頁(yè)開(kāi)發(fā)，也可能使用 vue、react 等框架進(jìn)行開(kāi)發(fā)；可能本地開(kāi)發(fā)，也可能是遠(yuǎn)程服務(wù)器開(kāi)發(fā)，無(wú)論什么形式，只要你能持續(xù)的對(duì)打開(kāi)的網(wǎng)頁(yè)做編碼，就已經(jīng)完成了前置準(zhǔn)備工作。

二、申請(qǐng)開(kāi)發(fā)者

由于微信內(nèi)置瀏覽器無(wú)法打開(kāi)調(diào)試控制臺(tái)，另外還有一些特殊的觸發(fā)動(dòng)作不太好模擬。因此微信開(kāi)發(fā)團(tuán)隊(duì)為網(wǎng)頁(yè)開(kāi)發(fā)做了微信開(kāi)發(fā)者工具，它通過(guò)模擬微信客戶端的表現(xiàn)，我們可以很方便地在 PC 或者 Mac 上進(jìn)行開(kāi)發(fā)和調(diào)試工作。

另外微信網(wǎng)頁(yè)的相關(guān)特定支持，是依賴服務(wù)號(hào)的，你必須是一個(gè)「服務(wù)號(hào)」的開(kāi)發(fā)者，才可以用該「服務(wù)號(hào)」做開(kāi)發(fā)調(diào)試工作。

綁定為服務(wù)號(hào)網(wǎng)頁(yè)開(kāi)發(fā)者的流程如下

1. 登錄服務(wù)號(hào)管理后臺(tái)進(jìn)入對(duì)應(yīng)的服務(wù)號(hào)。

2. 在「設(shè)置與開(kāi)發(fā)-開(kāi)發(fā)接口管理-開(kāi)發(fā)者工具-web開(kāi)發(fā)者工具」中，綁定開(kāi)發(fā)者微信號(hào)。

對(duì)應(yīng)開(kāi)發(fā)者的微信號(hào)必須關(guān)注該「服務(wù)號(hào)」，綁定后即可在微信開(kāi)發(fā)者工具使用該賬號(hào) appid 調(diào)試開(kāi)發(fā)。

每個(gè)服務(wù)號(hào)最多可同時(shí)綁定 50 個(gè)開(kāi)發(fā)者微信號(hào)。

三、微信開(kāi)發(fā)者工具

下載微信開(kāi)發(fā)者工具，使用微信掃碼登錄后，點(diǎn)擊「服務(wù)號(hào)網(wǎng)頁(yè)」開(kāi)發(fā)。

打開(kāi)后，展示內(nèi)容如下圖所示：

這張圖中對(duì)各個(gè)功能區(qū)做了一些標(biāo)記，接下來(lái)解釋各功能區(qū)的作用：

1. 網(wǎng)址輸入器

主要輸入要調(diào)試的網(wǎng)頁(yè)地址，支持本地和云端 URL（只要是你在本地瀏覽器能訪問(wèn)到，都可以用填寫）

• 輸入框左側(cè)是「刷新」按鈕，點(diǎn)擊可以強(qiáng)制刷新網(wǎng)頁(yè)。
• 輸入框右側(cè)是「收藏」按鈕，類似瀏覽器里的書簽功能，你可以把你經(jīng)常需要調(diào)試的網(wǎng)頁(yè)通過(guò)點(diǎn)擊URL地址欄上的星星的icon將其收藏。取消收藏也很簡(jiǎn)單，在已經(jīng)收藏的URL的星星上再點(diǎn)擊一次就可以取消收藏。
• 收藏按鈕后是「收藏文件夾」按鈕，收藏之后你可以在收藏夾里看到所收藏的URL。

2. 模擬器

網(wǎng)址的內(nèi)容將在模擬器中渲染，默認(rèn)是手機(jī)端風(fēng)格。你可以在模擬器左上角修改模擬器的機(jī)型和顯示比例，以完成各種情況下的頁(yè)面開(kāi)發(fā)。

3. 調(diào)試控制臺(tái)

開(kāi)發(fā)者工具集成的是 Chrome DevTools，操作體驗(yàn)與正常的瀏覽器一致，這里不過(guò)多介紹。

4. 工具欄

「預(yù)覽」按鈕，會(huì)將當(dāng)前網(wǎng)址轉(zhuǎn)換為二維碼，方便你直接用微信客戶端掃碼打開(kāi)。

「清緩存」按鈕，主要對(duì)當(dāng)前模擬器中打開(kāi)的內(nèi)容緩存進(jìn)行清理，用于模擬未打開(kāi)等業(yè)務(wù)場(chǎng)景。

5. 云開(kāi)發(fā)

微信開(kāi)發(fā)團(tuán)隊(duì)集成的后端服務(wù)能力，方便開(kāi)發(fā)者無(wú)需搭建服務(wù)器即可實(shí)現(xiàn)前后端開(kāi)發(fā)，快速上線和迭代。

具體內(nèi)容可詳細(xì)閱讀云開(kāi)發(fā)

四、微信能力開(kāi)發(fā)

現(xiàn)在，你可以正式開(kāi)發(fā)微信網(wǎng)頁(yè)了，主要的內(nèi)容有三個(gè)：

你可以訪問(wèn)各文檔，掌握相關(guān)內(nèi)容。

五、云開(kāi)發(fā)

開(kāi)發(fā)發(fā)者可以使用云開(kāi)發(fā)開(kāi)發(fā)微信小程序、小游戲、服務(wù)號(hào)，無(wú)需搭建服務(wù)器，即可使用云端能力。

云開(kāi)發(fā)為開(kāi)發(fā)者提供完整的原生云端支持和微信服務(wù)支持，弱化后端和運(yùn)維概念，無(wú)需搭建服務(wù)器，使用平臺(tái)提供的 API 進(jìn)行核心業(yè)務(wù)開(kāi)發(fā)，即可實(shí)現(xiàn)快速上線和迭代，同時(shí)這一能力，同開(kāi)發(fā)者已經(jīng)使用的云服務(wù)相互兼容，并不互斥。

云開(kāi)發(fā)提供了幾大基礎(chǔ)能力支持：

詳細(xì)云開(kāi)發(fā)文檔可見(jiàn)詳細(xì)文檔

在服務(wù)號(hào)中使用的文檔可見(jiàn)在 Web 網(wǎng)頁(yè)中使用云開(kāi)發(fā)

六、微信開(kāi)發(fā)樣式庫(kù)

WeUI 是一套同微信原生視覺(jué)體驗(yàn)一致的基礎(chǔ)樣式庫(kù)，由微信官方設(shè)計(jì)團(tuán)隊(duì)為微信內(nèi)網(wǎng)頁(yè)和微信小程序量身設(shè)計(jì)，令用戶的使用感知更加統(tǒng)一。在微信網(wǎng)頁(yè)或小程序中使用 WeUI，有如下優(yōu)勢(shì)：

• 同微信客戶端一致的視覺(jué)效果，令所有微信用戶都能更容易地使用你的網(wǎng)站或小程序
• 便捷獲取快速使用，降低開(kāi)發(fā)和設(shè)計(jì)成本
• 微信設(shè)計(jì)團(tuán)隊(duì)精心打造，清晰明確，簡(jiǎn)潔大方

該樣式庫(kù)目前包含表單、基礎(chǔ)組件、操作反饋、導(dǎo)航相關(guān)、搜索相關(guān)、層級(jí)規(guī)范等內(nèi)容，已經(jīng)在GitHub上開(kāi)源。

訪問(wèn)http://weui.io或微信掃碼即可預(yù)覽。