## 微信网页开发-起步指南

本文介绍如何入门开发微信网页。

微信网页，就是在普通网页运行在微信内置浏览器中时，可以有一些微信能力实现。

在入门之前，需要你具备基本的网页开发基础，如果你是零基础入门，可以先学习前端网页开发，或者尝试学习更简单的[微信小程序](/miniprogram/dev/framework/README.md)。

## 一、起步前准备

首先准备一个基础的网页

``` html
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>微信网页开发</title>
    </head>
    <body>
        <div>这是内容</div>
    </body>
</html>
```

将网页 html 文件上传至服务器（后端服务器、对象存储等均可），通过特定的网址访问在浏览器访问到。甚至你也可以直接用本地开发工具打开，使用 `localhost` 、`127.0.0.1` 等打开也可以。

在浏览器中访问的效果：
![](https://res.wx.qq.com/op_res/MhtzSmBS2MteHKpIEEx3mNfOvoDfKUCA79zNX5CPGYteAoszCfkjTujCBvORY6JodQJlX5Z_-IaghU926fn5Lw)

此时，你可以将相同的网址复制到微信桌面客户端的任意聊天框，发送后点击链接消息，你会发现在微信内置浏览器打开了与上图相同的网页。

这个时候，你就已经完成了在微信内置浏览器中打开网页的前置任务。

> 根据你的前端技术栈，你可能是原生网页开发，也可能使用 vue、react 等框架进行开发；可能本地开发，也可能是远程服务器开发，无论什么形式，只要你能持续的对打开的网页做编码，就已经完成了前置准备工作。

## 二、申请开发者

由于微信内置浏览器无法打开调试控制台，另外还有一些特殊的触发动作不太好模拟。因此微信开发团队为网页开发做了[微信开发者工具](/miniprogram/dev/devtools/download.md)，它通过模拟微信客户端的表现，我们可以很方便地在 PC 或者 Mac 上进行开发和调试工作。

另外微信网页的相关特定支持，是依赖服务号的，你必须是一个「服务号」的开发者，才可以用该「服务号」做开发调试工作。

绑定为服务号网页开发者的流程如下

##### 1. 登录[微信开发者平台](https://developers.weixin.qq.com/platform/)

##### 2. 绑定开发者微信号

- 在开发者平台右上角头像，点击「账号管理」，进入「成员管理 - 服务号」，点击「添加」，输入微信号，即可绑定为开发者。绑定后即可在微信开发者工具使用该账号 AppID 调试开发。

![](https://res8.wxqcloud.qq.com.cn/wxdoc/2e5b0316-b323-477f-b584-3af505ca1c2a.png)

- 也可以主动申请绑定为开发者，操作步骤可查看[申请绑定公众号或服务号开发者](/doc/oplatform/developers/product/subscription_service/apply.md)

## 三、微信开发者工具

下载[微信开发者工具](/miniprogram/dev/devtools/download.md)，使用微信扫码登录后，点击「服务号网页」开发。

![](https://res.wx.qq.com/op_res/UTIe9DLkFhtHuKFJ2Ioaw8BYpL-gEMlxqDOBJg5u-Hw_uoaQ9WbU9sfftNEL7bvZGD93yLvNtkfcuzmMSTX5dw)

打开后，展示内容如下图所示：

![](https://res.wx.qq.com/op_res/UTIe9DLkFhtHuKFJ2Ioaw45_YtRjf0cN7J3vJQkv0Tag2cdOjCa4K24DFQ3VDV86zIwIaZlvgEDJg7aW1f0IJg)

这张图中对各个功能区做了一些标记，接下来解释各功能区的作用：

##### 1. 网址输入器

主要输入要调试的网页地址，支持本地和云端 URL（只要是你在本地浏览器能访问到，都可以用填写）

- 输入框左侧是「刷新」按钮，点击可以强制刷新网页。
- 输入框右侧是「收藏」按钮，类似浏览器里的书签功能，你可以把你经常需要调试的网页通过点击URL地址栏上的星星的icon将其收藏。取消收藏也很简单，在已经收藏的URL的星星上再点击一次就可以取消收藏。
- 收藏按钮后是「收藏文件夹」按钮，收藏之后你可以在收藏夹里看到所收藏的URL。

##### 2. 模拟器

网址的内容将在模拟器中渲染，默认是手机端风格。你可以在模拟器左上角修改模拟器的机型和显示比例，以完成各种情况下的页面开发。

##### 3. 调试控制台

开发者工具集成的是 Chrome DevTools，操作体验与正常的浏览器一致，这里不过多介绍。

##### 4. 工具栏

「预览」按钮，会将当前网址转换为二维码，方便你直接用微信客户端扫码打开。

「清缓存」按钮，主要对当前模拟器中打开的内容缓存进行清理，用于模拟未打开等业务场景。

##### 5. 云开发

微信开发团队集成的后端服务能力，方便开发者无需搭建服务器即可实现前后端开发，快速上线和迭代。

具体内容可详细阅读云开发

## 四、微信能力开发

现在，你可以正式开发微信网页了，主要的内容有三个：

| 内容 | 介绍 |
| --- | --- |
| [网页授权](auth) | 通过此机制获取用户身份信息，进而实现业务逻辑。（仅服务号支持） |
| [JS-SDK](jssdk) | 微信内置浏览器提供的能力集合，开发者可通过 sdk 接口完成相应的动作。 |
| [开放标签](opentag) | 微信内置浏览器在打开页面时，会将特定的标签渲染成对应的功能组件，用于完成一些特定的任务。 |

你可以访问各文档，掌握相关内容。

## 五、云开发

开发者可以使用云开发开发微信小程序、小游戏、服务号，无需搭建服务器，即可使用云端能力。

云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

云开发提供了几大基础能力支持：

| 能力 | 作用 | 说明 |
| --- | ---- | --- |
| 云函数 | 无需自建服务器 | 在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码 |
| 数据库 | 无需自建数据库 | 一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库 |
| 存储 | 无需自建存储和 CDN | 在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理 |
| 云调用 | 原生微信服务集成 | 基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力 |
| 静态网站托管 | 无需自建网站资源服务器 | 网站资源可放在云开发，甚至有提供默认域名使用 |

详细云开发文档可见[详细文档](/miniprogram/dev/wxcloudservice/wxcloud/basis/getting-started.md)

在服务号中使用的文档可见[在 Web 网页中使用云开发](/doc/oplatform/openApi/miniprogram-management/domain-management/api_geteffectivejumpdomain.md)

## 六、微信开发样式库

WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信网页或小程序中使用 WeUI，有如下优势：

- 同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站或小程序
- 便捷获取快速使用，降低开发和设计成本
- 微信设计团队精心打造，清晰明确，简洁大方

该样式库目前包含表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等内容，已经在[GitHub](https://github.com/weui/weui)上开源。

访问[http://weui.io](http://weui.io)或微信扫码即可预览。

![](https://mmbiz.qpic.cn/mmbiz_png/PiajxSqBRaEIQxibpLbyuSKyjH0owTZq7HSO4rqonJU9dmPrribiadkZkFWKPciboaO4gHuV4AZnI3vIBovlZ6bhnUA/0?wx_fmt=png)