# 微信网页开发-起步指南
本文介绍如何入门开发微信网页。
微信网页，就是在普通网页运行在微信内置浏览器中时，可以有一些微信能力实现。
在入门之前，需要你具备基本的网页开发基础，如果你是零基础入门，可以先学习前端网页开发，或者尝试学习更简单的微信小程序。
# 一、起步前准备
首先准备一个基础的网页
<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 等打开也可以。
在浏览器中访问的效果：
此时，你可以将相同的网址复制到微信桌面客户端的任意聊天框，发送后点击链接消息，你会发现在微信内置浏览器打开了与上图相同的网页。
这个时候，你就已经完成了在微信内置浏览器中打开网页的前置任务。
根据你的前端技术栈，你可能是原生网页开发，也可能使用 vue、react 等框架进行开发；可能本地开发，也可能是远程服务器开发，无论什么形式，只要你能持续的对打开的网页做编码，就已经完成了前置准备工作。
# 二、申请开发者
由于微信内置浏览器无法打开调试控制台，另外还有一些特殊的触发动作不太好模拟。因此微信开发团队为网页开发做了微信开发者工具，它通过模拟微信客户端的表现，我们可以很方便地在 PC 或者 Mac 上进行开发和调试工作。
另外微信网页的相关特定支持，是依赖公众号的，你必须是一个「公众号」的开发者，才可以用该「公众号」做开发调试工作。
绑定为公众号网页开发者的流程如下
# 1. 登录微信开发者平台
# 2. 绑定开发者微信号
- 在开发者平台右上角头像，点击「账号管理」，进入「成员管理 - 公众号」，点击「添加」，输入微信号，即可绑定为开发者。绑定后即可在微信开发者工具使用该账号 AppID 调试开发。
- 也可以主动申请绑定为开发者，操作步骤可查看申请绑定公众号或服务号开发者
# 三、微信开发者工具
下载微信开发者工具，使用微信扫码登录后，点击「公众号网页」开发。
打开后，展示内容如下图所示：
这张图中对各个功能区做了一些标记，接下来解释各功能区的作用：
# 1. 网址输入器
主要输入要调试的网页地址，支持本地和云端 URL（只要是你在本地浏览器能访问到，都可以用填写）
- 输入框左侧是「刷新」按钮，点击可以强制刷新网页。
- 输入框右侧是「收藏」按钮，类似浏览器里的书签功能，你可以把你经常需要调试的网页通过点击URL地址栏上的星星的icon将其收藏。取消收藏也很简单，在已经收藏的URL的星星上再点击一次就可以取消收藏。
- 收藏按钮后是「收藏文件夹」按钮，收藏之后你可以在收藏夹里看到所收藏的URL。
# 2. 模拟器
网址的内容将在模拟器中渲染，默认是手机端风格。你可以在模拟器左上角修改模拟器的机型和显示比例，以完成各种情况下的页面开发。
# 3. 调试控制台
开发者工具集成的是 Chrome DevTools，操作体验与正常的浏览器一致，这里不过多介绍。
# 4. 工具栏
「预览」按钮，会将当前网址转换为二维码，方便你直接用微信客户端扫码打开。
「清缓存」按钮，主要对当前模拟器中打开的内容缓存进行清理，用于模拟未打开等业务场景。
# 5. 云开发
微信开发团队集成的后端服务能力，方便开发者无需搭建服务器即可实现前后端开发，快速上线和迭代。
具体内容可详细阅读云开发
# 四、微信能力开发
现在，你可以正式开发微信网页了，主要的内容有三个：
| 内容 | 介绍 |
|---|---|
| 网页授权 | 通过此机制获取用户身份信息，进而实现业务逻辑。（仅服务号支持） |
| JS-SDK | 微信内置浏览器提供的能力集合，开发者可通过 sdk 接口完成相应的动作。 |
| 开放标签 | 微信内置浏览器在打开页面时，会将特定的标签渲染成对应的功能组件，用于完成一些特定的任务。 |
你可以访问各文档，掌握相关内容。
# 五、云开发
开发发者可以使用云开发开发微信小程序、小游戏、公众号，无需搭建服务器，即可使用云端能力。
云开发为开发者提供完整的原生云端支持和微信服务支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。
云开发提供了几大基础能力支持：
| 能力 | 作用 | 说明 |
|---|---|---|
| 云函数 | 无需自建服务器 | 在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码 |
| 数据库 | 无需自建数据库 | 一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库 |
| 存储 | 无需自建存储和 CDN | 在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理 |
| 云调用 | 原生微信服务集成 | 基于云函数免鉴权使用小程序开放接口的能力，包括服务端调用、获取开放数据等能力 |
| 静态网站托管 | 无需自建网站资源服务器 | 网站资源可放在云开发，甚至有提供默认域名使用 |
详细云开发文档可见详细文档
在公众号中使用的文档可见在 Web 网页中使用云开发
# 六、微信开发样式库
WeUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。在微信网页或小程序中使用 WeUI，有如下优势：
- 同微信客户端一致的视觉效果，令所有微信用户都能更容易地使用你的网站或小程序
- 便捷获取快速使用，降低开发和设计成本
- 微信设计团队精心打造，清晰明确，简洁大方
该样式库目前包含表单、基础组件、操作反馈、导航相关、搜索相关、层级规范等内容，已经在GitHub上开源。
访问http://weui.io或微信扫码即可预览。