微信小程序怎么h5配置服务器？核心答案是：微信小程序本身不能直接运行H5页面，但可以通过web-view组件加载H5网页，配置的关键在于将H5服务器域名添加到小程序后台的白名单中，并完成HTTPS证书校验。
很多朋友第一次接触小程序和H5结合时,都会卡在服务器配置这一步，明明H5页面在浏览器里打开一切正常，放进小程序web-view就白屏，提示“域名不合法”或者“校验失败”，这篇文章直接把配置流程拆开讲清楚，你跟着操作就能跑通。
微信小程序h5配置服务器需要准备什么
在动手配置前,先确认三样东西。
- 一个已认证的小程序账号，个人主体小程序不支持web-view组件，必须是企业、个体工商户、政府或媒体类型的主体，这是硬性条件。
- 一个HTTPS协议的H5服务器地址，微信强制要求加载的H5页面必须使用HTTPS，不能是HTTP明文传输。
- 服务器域名的ICP备案，域名需要完成工信部备案，且备案主体与小程序主体一致或有关联，据工信部数据，未备案域名无法通过微信的域名校验。
这三样缺一不可,如果你的H5部署在云服务器上，比如简米云、酷番云，别忘了在云控制台绑定域名并上传SSL证书，证书从哪里来？主流云平台都有免费的一年期DV证书，申请流程很简单，在SSL证书管理页面一键签发。
微信小程序h5配置服务器域名白名单的具体步骤
这是整个配置流程的核心,分三步走。
第一步：登录小程序后台，进入开发管理
打开微信公众平台官网,扫码登录你的小程序账号，左侧菜单栏找到“开发管理”，点击“开发设置”选项卡，这里能看到“服务器域名”一栏，点击“修改”按钮。
第二步：添加request合法域名和web-view业务域名
这里有两个地方要填,容易混淆。
- request合法域名：如果你的H5页面需要调用接口获取数据，这些接口的域名必须加在这里，比如你的接口是
https://api.example.com，就把这个地址填进去。 - web-view业务域名：这个才是加载H5页面用的，把你H5网页的完整域名，比如
https://www.example.com，添加进去，注意，这里不加路径，只填域名，格式为https://域名。
很多新手只添加了request合法域名,忘了加web-view业务域名，导致页面打不开，两个都要填，缺一不可。
第三步：下载校验文件并放置到H5服务器根目录
添加web-view业务域名后，微信会要求你验证域名所有权，页面上出现一个xxx.txt校验文件下载链接，下载后把它上传到H5服务器的根目录，怎么上传？如果你用的是宝塔面板，进入网站根目录，把文件传上去即可，然后用浏览器访问https://你的域名/校验文件名.txt，如果能看到文件内容，说明校验通过，点击后台的“保存并发布”，配置生效。
整个过程看起来简单,但有几个坑特别常见。
微信小程序h5配置服务器时常见的几个坑及解决办法
域名证书链不完整
就算你配置了HTTPS,如果SSL证书链不完整，微信也会报错，用小工具检测一下证书链，比如浏览器访问该域名，点开锁图标查看证书路径，如果证书链缺少中间证书，就去你申请证书的云平台下载对应的“证书链”文件，在服务器上重新配置，Nginx服务器需要在nginx.conf里把证书链合并到ssl_certificate配置项中。
校验文件被CDN缓存
如果你的H5域名挂了CDN加速,校验文件上传后可能没被实时同步到所有CDN节点，微信在多个节点检查文件是否可访问，部分节点缓存失败，解决办法是临时关闭CDN加速，等配置完成后重新开启，或者直接在CDN控制台手动刷新文件URL的缓存。
端口问题
微信web-view加载的H5页面默认走443端口，如果服务器上HTTPS服务跑在非443端口，比如8443，那需要把域名解析到正确端口吗？不行，微信只支持443端口，你需要把HTTPS服务的监听端口改成443，或者用反向代理把443端口转发到8443。
微信小程序h5配置服务器后的联调验证方法
配置完成后,别急着上线，先在微信开发者工具里做一次完整的联调测试。
- 打开微信开发者工具,新建项目，输入小程序AppID。
- 在代码里添加web-view组件，src属性填写你的H5完整地址，比如
<web-view src="https://www.example.com/page"></web-view>。 - 编译预览,看是否正常加载，如果出现红色报错信息，说明域名配置还是有问题。
开发者工具这里有个隐藏细节：工具默认不校验合法域名，需要在右上角“详情”里勾选“不校验合法域名”才能测试本地，但真机预览时，这个勾选无效，必须使用已经配置好的域名。
真机调试也建议做一遍,用手机微信打开小程序，如果H5页面能正常滑动、点击、跳转，说明配置成功，还要验证H5页面里如果有用户登录逻辑，能否正常获取到微信授权的code。
微信小程序h5配置服务器需要多少钱
这个问题没有标准答案,因为取决于你的H5服务器从哪来。
- 如果你已经自有服务器，并且域名已备案，那配置过程本身不花钱，微信后台添加域名是免费的。
- 如果你需要从零搭建，一台最基础的小型云服务器，比如1核2G配置，简米云或酷番云包年价格大概在几百元区间，域名注册首年几十元，备案免费，SSL证书用免费的即可。
- 如果你用第三方H5托管服务，比如某些建站平台，它们会提供绑定自定义域名的付费套餐，具体价格看平台报价。
行业共识认为,对于个人开发者测试用途，总成本能控制在百元级，但如果你要把H5做成生产环境，服务器带宽和配置需要相应升级，成本自然上浮。
微信小程序和H5混搭架构的一些优化建议
配置好服务器只是第一步,小程序web-view加载H5页面，体验上会有不少挑战。
减少整页跳转
web-view是一个原生组件，它会把整个H5页面嵌入小程序内，如果你的H5页面很多，每次都整页加载，用户会感觉卡顿，建议把常用的功能拆成小程序的原生页面，只有低频或动态内容才走H5，这样整体体验更接近原生App。
关注加载性能
H5页面在小程序web-view里的加载速度受限于服务器带宽和页面体积，对H5页面做压缩处理，图片用WebP格式，开启Gzip压缩，JS和CSS文件尽量合并、精简，测试时可以用微信开发者工具的“性能面板”看看实际加载耗时。
处理跳转逻辑
H5页面内部的链接,如果跳转到其他域名，会被微信拦截，所有跳转必须保持在同一域名下，或者调用小程序的跳转API，在H5页面里可以用wx.miniProgram.navigateTo来跳转小程序原生页面，但前提是你的H5正确引入了微信JS-SDK。
登录态同步
这是很多开发者头疼的地方,H5和登录态互通方案有两种：一是H5页面直接调用微信授权登录，然后拿着code去后端换openid；二是小程序端先登录，再把token通过URL参数传给H5，方案二更简单，但暴露在URL里的token有泄露风险，建议在H5端再校验一次有效性。
关于微信小程序h5配置服务器的常见问题
问：web-view的H5页面可以调用小程序的支付功能吗？
可以,在H5页面中通过微信JS-SDK调用wx.miniProgram.redirectTo跳转到小程序的支付页面，或者在小程序原生页面中创建支付订单，注意，H5页面自身不能直接唤起微信支付，必须经过小程序原生的wx.requestPayment接口。
问：H5服务器上的接口域名和页面域名不是同一个，能配置吗？
能,你需要在web-view业务域名中添加页面域名，同时在request合法域名中添加接口域名，两个域名都必须HTTPS且完成备案，如果接口域名的备案主体与页面域名不一致，微信会提示校验失败，这种情况下需要将两个域名放在同一主体下。
问：小程序h5配置服务器之后，h5页面还能在普通浏览器里访问吗？
完全不受影响,小程序web-view加载的H5地址就是你的公网网页，浏览器直接输入该URL照样能打开，不过部分H5页面可能做了浏览器环境检测，识别到非微信环境时展示不同的样式，这是H5前端逻辑控制的，与服务器配置无关。
首发原创文章，作者：王坚，如若转载，请注明出处：https://idctop.com/article/715393.html
