微信公众号 - 实现 H5 网页在微信内置浏览器中下载文件，可预览和下载 office 文件（doc / xls / ppt / pdf 等）适用于任何前端技术栈网站，兼容安卓和苹果系统！

Posted 2023-04-02 王佳斌

前言

网上的教程都是让你写页面 “引导” 右上角三个点里，让用户自己去浏览器打开，其实这样用户体验并不好。

本文实现了 最新微信公众号 H5 网页（微信内置浏览器中），预览下载 office 文件，安卓和苹果全都支持！

您可以直接复制代码，移植到自己项目中去，任何前端项目（比如 vue，uniapp，nuxt，react 等等）都保证可用。

---

如下图真机所示，分别在安卓和苹果系统中实现 “文件下载”，也是目前最主流的黑科技解决方案，

安卓系统下，当用户点击下载按钮后自动弹出 “微信原生” 去浏览器下载，而苹果系统则是预览，然后发送到电脑上。

无任何第三方插件，示例代码干净整洁

示例代码

注意：一定要在微信内置浏览器打开（可以将项目跑出来的 IP 地址，发送到微信好友）在一个局域网内就可以访问了。

拿大家熟悉的 Vue.js 语法为示例，您可以一键复制代码，然后运行起来

微信公众号JSAPI网页支付

微信公众号支付

 

一、使用场景以及说明

     使用场景：商户已有H5商城网站，用户通过消息或扫描二维码在微信内打开网页时，可以调用微信支付完成下单购买的流程。

 说明：1.用户打开图文消息或者扫描二维码，在微信内置浏览器打开网页进行的支付。

     2.商户网页前端通过使用微信提供的 JSAPI，调用微信支付模块。这种方式，适合需要在商户网页进行选购下单的购买流程。

二、准备工作

公共号支付需要提前在微信公共平台进行业务配置，包括设置支付授权目录、设置JS接口安全域名以及设置授权回调页面域名。

1.进行微信公众支付之前，我们需要申请个公众号，以及申请微信支付的功能。

 

2.支付授权目录:

位置：微信支付——>开发配置——>公共号支付

1) 所有使用公众号支付方式发起支付请求的链接地址，都必须在支付授权目录之下；

2) 正式支付授权目录最多设置3个，测试授权目录最多设置1个，且域名必须通过ICP备案；

3) 头部要包含http或https，须细化到二级或三级目录，以左斜杠“/”结尾。

业务中发起支付的页面地址必须在授权目录下，否则调用下单接口时会提示“当前页面的URL未注册”。

 

 

这里再啰嗦地补充两点：

1）不使用框架的情况下，比如将官方sdk下载下来，改成demo放在根目录下，demo/example/jaspi.php,授权目录可参考 http://www. ×××.com/demo/example/

2 )使用框架的情况下，比如ThinkPHP, 项目名叫test ,目录结构如下，test/Application/Home/controller/WxpayController.class.php,授权目录可参考 http://www. ×××.com/index.php/Home/Wxpay/

3.JS接口安全域名:

位置：微信支付——>公共号设置——>功能设置——>JS接口安全域名

说明：设置JS接口安全域名后，公众号开发者可在该域名下调用微信开放的JS接口。

注意事项：

1） 可填写三个域名，要求是一级或一级以上域名（例：qq.com，或者 www.qq.com ），需使用字母、数字及“-”的组合，不支持IP地址及端口号；

2） 填写的域名须通过ICP备案的验证；

3）一个自然月内最多可修改并保存三次。

 

4.授权回调页面域名:

位置：微信支付——>接口权限——>网页授权获取用户基本信息

用户在网页授权页同意授权给公众号后，微信会将授权数据传给一个回调页面，回调页面需在此域名下，以确保安全可靠。

注意事项：

1） 回调页面域名需使用字母、数字及“-”的组合，不支持IP地址及端口号。填写的域名需与实际回调URL中的域名相同；

2） 填写的域名须通过ICP备案的验证。

获取用户授权时redirect_uri对应的URL必须在此域名下，否则回调的地址会无法打开。

 

 

 

三、开发步骤

说明：整个微信公众号支付的流程如下：

【1】用户点击公众号内微信商城打开H5的支付页面

【2】H5页面通过JS调用微信支付接口

【3】微信服务器通过判断输入的JSON数据，返回给客户端相应的成功或失败信息

官方demo结构如下：

 

1.JSAPI支付——H5网页端调起支付接口 

1）用户同意授权，获取code

请求链接：https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#we-chat_redirect

 

 

2)如果有code，直接就通过code能获取用户openid

如果没有code，通过createOauthUrlForCode方法，传入必要参数，获取code

3)如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。

若用户禁止授权，则重定向后不会带上code参数，仅会带上state参数

redirect_uri?state=STATE

4)code说明以及scope的两种方式说明

【1】code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

这里获取到code 和 state(订单号) 后， 对订单进行验证，用户余额也进行验证，如果条件都满足则才能进行下面的流程。

【2】scope的两种方式说明：

微信提供了两种授权方式：snsapi_base和snsapi_userinfo。

snsapi_base：不弹出授权页面，直接跳转，只能获取用户openid；

snsapi_userinfo：弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息。

想要获取code，需要构造如下地址：

2. 通过code换取网页授权access_token (这里也获取到了openid)

1）请求链接：https://api.weixin.qq.com/sns/oauth2/access_token

?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code

 

 

2）获取openid:openid是微信支付jsapi支付接口必须的参数

 

 

【1】如果网页授权的作用域为snsapi_base(静默授权)，则本步骤中获取到网页授权access_token的同时，也获取到了openid，snsapi_base式的网页授权流程即到此为止。

【2】如果网页授权作用域为snsapi_userinfo，则此时开发者可以通过access_token和openid拉取用户信息了。

 

 

3）getOpenid方法中调用createOauthUrlForOpenid方法获取openid

3. 调用统一支付接口获取预付款id

官方文档说明：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

1) 设置必传参数，按照签名参数产生签名, 此时参与签名字段有 : appid, mch_id , nonce_str, openid, body , out_trade_no, total_fee, notify_url , trade_type

2) 将必传参数转成xml,createXml方法。

3) 使用xml，请求统一支付接口 https://api.mch.weixin.qq.com/pay/unifiedorder

4) 得到xml格式的返回值结果

5) 将结果转成数组，获取预支付id

4. 使用jsapi调起支付

1. 通过getParameters方法设置必传参数，接口输入数据为json

2. 根据官方demo中jsapi.php 调起支付，得到支付结果

 

注：使用以上方式判断前端返回,res.err_msg 将在用户支付成功后返回 ok，但不保证它绝对可靠。

5. 通用通知接口 callback

1. 支付完成后，微信会把相关支付和用户信息发送到该 URL，商户需要接收处理信息

2. 此时返回的参与签名的参数有 ： appid , mch_id, nonce_str, result_code ,openid , is_subscribe,trade_type , bank_type , total_fee , cash_fee , transaction_id,

out_trade_no , time_end

3. 返回数据为xml，相关案例参考demo notify.php

4. 参考 https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_7

四、可能遇到的问题

1. 返回参数是xml，而不是直接输出success ，这个与微信app支付有区别。

2. 参与签名字段要保证一致，保证前后签名一样。

3. 由于存在重新发送后台通知的情况，因此同样的通知可能会多次发送给商户系统。商户系统必须能够正确处理重复的通知。比如在支付成功后写入了支付日志，那么第二次回调前前判断是否已经有了支付日志，如果有，直接退出不作处理就好了。

4 . 当用户有余额，先用余额支付，剩下的才是微信 ， 支付成功时，回调扣去余额

5. 如果同一笔订单号修改多次价格进行支付，第二次支付时，会出现生成预支付订单失败，主要原因是同一笔订单支付时，支付金额不能一样，或者给到第三方的订单号不一样，所以解决方法就是订单号+标志位（比如Z或A）+ 时间戳生成给到的第三方的支付号即可。

===============================支付完成的处理之分割线========================

微信内H5调起支付后，JS API的返回结果get_brand_wcpay_request:ok仅在用户成功完成支付时返回。由于前端交互复杂，get_brand_wcpay_request:cancel或者get_brand_wcpay_request:fail可以统一处理为用户遇到错误或者主动放弃，不必细化区分。
示例代码如下：

下一节《PHP微信公众号JSAPI网页支付（下）》 中将讲解支付完成后，需要的回调通知处理等操作。