核心概念：微信网页与小程序的区别

在开始之前，必须明确你想要创建的是哪种应用,因为它们的开发方式和运行环境完全不同。

如果你的应用是一个营销活动页、一个产品介绍网站，或者一个不需要深度调用微信原生功能的工具，那么微信网页 (H5) 是最佳选择,本指南将主要围绕这个展开。

创建微信网页 (H5应用) 的完整流程

创建一个功能完善的微信网页,通常分为以下几个关键步骤：

准备工作（获取权限）

这是最重要的一步,没有它你的网页将无法调用任何微信能力。

1. 注册一个微信公众号

   
   （图片来源网络，侵删）
   • 订阅号：适合媒体、个人创作者,主要功能是内容推送。
   • 服务号：适合企业、组织，功能更全面，可以调用微信支付、模板消息等高级接口。
   • 建议：如果你的网站需要支付、用户信息等高级功能，必须注册服务号。

2. 获取AppID（应用ID）

   • 登录微信公众平台，在“设置与开发” -> “基本配置”中找到你的AppID,这是你应用的唯一标识。

3. 获取开发者凭证

   • 在“基本配置”页面，找到“开发者密码” (AppSecret)，这个密钥非常敏感，绝对不能泄露,它用于获取访问令牌。

配置服务器（JS接口安全域名）

为了让你的网页能够安全地调用微信JS-SDK，你需要将你的服务器域名添加到公众号的“白名单”中。

1. 登录微信公众平台，进入“设置与开发” -> “公众号设置”。
2. 找到“JS接口安全域名”选项。
3. 点击“设置”，输入你的服务器域名（www.yourdomain.com）。注意：这里只能配置顶级域名，并且不能带协议头（http://或https://）。
4. 点击“确定”，微信会向你的域名根目录下的一个文件（如 MP_verify_XXXXXX.txt）发起验证,你需要确保该文件在你的服务器上可以正常访问。

后端开发（获取Access Token和JS-SDK Ticket）

微信JS-SDK的调用需要两个关键票据：access_token 和 jsapi_ticket，它们都有有效期（access_token 2小时，jsapi_ticket 2小时）,并且需要通过你的AppID和AppSecret从微信服务器获取。

后端逻辑：

1. 获取 access_token：

   • 向微信API发送一个GET请求：https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=YOUR_APPID&secret=YOUR_APPSECRET。
   • 微信会返回一个JSON，包含 access_token 和 expires_in (有效期)。
   • 最佳实践：将 access_token 缓存起来（如Redis、Memcached），在过期前几分钟再重新获取,避免频繁请求微信API。

2. 获取 jsapi_ticket：

   • 使用上一步获取的 access_token，再向微信API发送一个GET请求：https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=YOUR_ACCESS_TOKEN&type=jsapi。
   • 微信会返回 jsapi_ticket 和它的有效期。

3. 生成签名：

   • 当你的前端页面需要调用JS-SDK时,后端必须为该页面生成一个签名。
   • 签名算法（文档有详细说明）：
     • 获取 jsapi_ticket。
     • 定义一个随机字符串 noncestr。
     • 获取当前时间戳 timestamp。
     • 获取当前页面的完整URL（不包含 及其之后的部分）。
     • 将 jsapi_ticket, noncestr, timestamp, url 四个参数字典序排序，用 & 拼接成字符串，然后使用SHA1算法进行加密，得到 signature。

4. 提供接口给前端：

   • 创建一个后端API接口（如 /api/jsconfig）。
   • 前端访问这个接口时，后端返回一个JSON，包含前端需要的所有信息：

     {
       "appId": "YOUR_APPID",
       "timestamp": 1234567890,
       "nonceStr": "Wm3WZYTPz0wzccnW",
       "signature": "c969f048405862e6df8dc9dbae3705b0d8719dc8"
     }

前端开发（引入JS-SDK并调用接口）

这是用户直接看到和交互的部分。

1. 引入JS-SDK文件： 在你的HTML页面中，通过<script>标签引入微信JS-SDK。

   <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. 配置接口： 在页面加载完成后，调用 wx.config 方法进行配置。

   wx.config({
     debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
     appId: 'YOUR_APPID', // 必填，公众号的唯一标识
     timestamp: 1234567890, // 必填，生成签名的时间戳
     nonceStr: 'Wm3WZYTPz0wzccnW', // 必填，生成签名的随机串
     signature: 'c969f048405862e6df8dc9dbae3705b0d8719dc8',// 必填，签名
     jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'chooseImage', 'uploadImage'] // 必填，需要使用的JS接口列表
   });

3. 处理配置结果： 使用 wx.ready 和 wx.error 来处理配置成功和失败的情况。

   // config信息验证后会执行ready方法，所有接口调用都必须在config方法获得结果之后，config是一个异步操作，所以需要在ready函数中调用接口
   wx.ready(function(){
     // 在这里调用JS-SDK的各个接口
     console.log('JS-SDK 配置成功！');
     // 分享给朋友
     wx.onMenuShareAppMessage({
       title: '这是我的H5应用', // 分享标题
       desc: '这是一个非常有趣的H5应用，快来看看吧！', // 分享描述
       link: 'https://www.yourdomain.com', // 分享链接，该链接域名必须与当前页面的JS接口安全域名一致
       imgUrl: 'https://www.yourdomain.com/share-icon.png', // 分享图标
       type: '', // 分享类型,music、video或link，不填默认为link
       dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
       success: function () { 
         // 用户确认分享后执行的回调函数
         alert('分享成功！');
       },
       cancel: function () { 
         // 用户取消分享后执行的回调函数
         alert('分享失败！');
       }
     });
     // 分享到朋友圈
     wx.onMenuShareTimeline({
       title: '这是我的H5应用', // 分享标题
       link: 'https://www.yourdomain.com', // 分享链接
       imgUrl: 'https://www.yourdomain.com/share-icon.png', // 分享图标
       success: function () { 
         alert('分享到朋友圈成功！');
       },
       cancel: function () { 
         alert('分享到朋友圈失败！');
       }
     });
   });
   // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
   wx.error(function(res){
     console.log('JS-SDK 配置失败！', res);
     alert('JS-SDK 配置失败，请检查配置。');
   });

常见功能与JS-SDK接口

JS-SDK提供了丰富的接口，让你的H5应用能“借用”微信的能力。

进阶与优化

1. 微信登录 (OAuth2.0)

   • 如果你的H5应用需要用户登录，可以使用微信的OAuth2.0授权登录。
   • 流程：用户点击“微信登录” -> 你的应用引导用户跳转到微信授权页面 -> 用户确认授权 -> 微信重定向回你的页面，并携带一个code -> 你的后端用code向微信服务器换取用户的openid和access_token。

2. 支付功能

   • 在H5中实现微信支付，需要你的公众号开通了微信支付功能,并且你拥有一个商户号。
   • 流程：用户在H5中选择商品下单 -> 后端生成订单，并调用微信统一下单API -> 微信返回一个预支付订单ID -> 你的后端根据这个ID生成一个签名，并返回给H5前端 -> H5前端调用wx.chooseWXPay接口发起支付 -> 用户在微信中完成支付。

3. 性能优化

   • 加载速度：图片压缩、使用CDN、开启Gzip压缩、减少HTTP请求。
   • 用户体验：使用骨架屏、加载动画,避免用户在等待时感到无聊。
   • 适配性：使用viewport标签确保页面在不同尺寸的手机上都能正常显示，使用rem或vw/vh等相对单位进行响应式布局。

总结与建议

创建一个微信网站应用程序是一个涉及前后端和微信API集成的系统性工程。

• 新手入门：从最简单的“分享功能”开始，按照上述步骤一步步走,这是理解整个流程的最佳方式。
• 核心要点：后端生成签名是整个流程的核心和难点，务必理解其原理并妥善保管AppSecret。
• 官方文档：遇到任何问题，第一时间查阅微信JS-SDK官方文档，文档是最权威、最准确的资料。
• 选择工具：如果你的项目比较简单，可以考虑使用一些成熟的H5制作工具（如易企秀、人人秀等），它们提供了模板和拖拽功能,无需编码即可快速生成营销页面。

希望这份详细的指南能对你有所帮助！祝你开发顺利！