微信网页开发配置整理

真是人越大记忆越差，断断续续做了几个微信小程序和微信h5项目，然鹅小程序的开发流程有些都忘了，最近刚做完一个微信h5网页开发的项目，所以赶紧记录下开发中需要注意的点，给自己往后回顾，同时也给第一次接入微信开发的同学一点参考。

本项目包含一个微信h5网页，一个pc端控制系统。微信端采用的是uniapp开发，一次开发多端部署的框架；pc端控制系统采用vue-cli开发；两个前端公用一个springboot项目；支付方式采用的jsApi支付(微信内置浏览器发起支付)。

首先开发微信h5系统，公众号是必须的，如果没有就注册一个；如果程序涉及到支付功能，则还需要一个微信商户账号；添加了通过ICP备案验证域名的服务器一个。

先放上微信网页开发官方文档。

目录

一、获取公众号必要信息及配置

​​

二、微信商户配置(JSAPI支付v3)

---

一、获取公众号必要信息及配置，JS-SDK接入

公众号所需的信息为AppID和AppSecret，在微信公众号中->基本配置->公众号开发信息。

​

配置IP白名单就在获取appID和AppSecret的页面，配置JS接口安全域名和网页授权域名如下：

​

​ ​

配置IP白名单的IP就是你要请求获取access_token的后端部署的那个服务器的IP，在引入微信网页开发工具包JS-SDK时，需要在后端先通过http的get请求去获取access_token，然后用获取的access_token再去通过http的get请求获取jsapi_ticket，将返回参数中的“ticket”变量用来生成JS-SDK权限认证签名，在生成其余的配置信息返回前端。前端调用方式如下：

wx.config({
	debug: false, 
	appId: config.appId, // 必填，公众号的唯一标识
	timestamp: config.timeStamp, // 必填，生成签名的时间戳
	nonceStr: config.nonceStr, // 必填，生成签名的随机串
	signature: config.paySign,// 必填，签名
	jsApiList: [		 					
		'showMenuItems',
		'hideAllNonBaseMenuItem',
		'updateAppMessageShareData',
		'updateTimelineShareData'
	] // 必填，需要使用的JS接口列表
})
wx.ready(()=>{		
	//调用jsApiList中你需要使用的微信JS接口
        wx.updateAppMessageShareData({
	    title: title, // 分享标题
        desc: desc, // 分享描述
	    link: selfUrl, // 分享链接，该链接域名或路径必须与当前页面对应的
	    imagUrl:imgUrl
    });
})		

JS接口安全域名也就是上述你需要调用微信JS接口的网页部署的服务器的域名；网页授权域名就是网页授权链接中回掉地址的域名。

二、微信商户支付接入(JSAPI支付v3)

先跟着官方文档微信支付开发者文档走就行，我是用的是jsapiV3最新的支付方式，链接文档放的也是该版本的文档，相比较之前的操作感觉有些地方要简便一些。我简单总结一下支付流程：

1. 后端调用下单接口，生成预支付订单获取prepay_id;
2. 后端生成前端发起支付接口需要的配置信息；
3. 微信前端利用后端返回的配置调起支付；
4. 后端暴露出的支付通知接口接收微信支付通知并解析返回的数据；

一般来说我们在调用下单接口时，要将接口参数中的商户订单号(out_trade_no)先存入自己数据库中；支付成功后支付结果通知返回给我们的参数解析后会有我们发起预支付订单时的商户订单号(out_trade_no)，以此来判断用户支付成功。注：微信调用我们系统接口是以https方式请求，所以后端得配置https请求。

jsapiV3支付可能有的朋友在使用微信官方的wechatpay-apache-httpclient客户端时有些问题，简单说就是要生成微信官方的加密httpclient，然后就和Apche的httpclient一样直接去请求下单、查单、退单等接口。

微信支付开发者文档接入前准备操作完成后可以获取到的信息有mchId、apiv3Key、apiclient_cert.pem、apiclient_key.pem、apiclient_cert.p12。此时还需要商户API证书的证书序列号，通过openssl x509 -in apiclient_cert.pem -noout -serial 命令进行获取。

此时我们拥有的生成官方客户端的数据就集齐了。

• 商户号——mchId，
• v3密钥——apiV3Key
• 商户API证书序列号——merchantSerialNumber
• 证书密钥文件——apiclient_key.pem

    /**
     * 获取商户密钥字符串
     * @return
     */
    public PrivateKey getPrivateKey()  {
        //获取私钥文件流
        InputStream in = this.getClass().getClassLoader().getResourceAsStream("data" + File.separator + "apiclient_key.pem");
        return PemUtil.loadPrivateKey(in);
    }

     /**
     * 初始化加密请求客户端
     * @return
     * @throws Exception
     */
    public HttpClient initClient() throws Exception {
        //获取私钥
        PrivateKey merchantPrivateKey = getPrivateKey();

        // 获取证书管理器实例
        CertificatesManager certificatesManager = CertificatesManager.getInstance();
        // 向证书管理器增加需要自动更新平台证书的商户信息
        certificatesManager.putMerchant(mchId, new WechatPay2Credentials(mchId,
                new PrivateKeySigner(merchantSerialNumber, merchantPrivateKey)), apiV3Key.getBytes(StandardCharsets.UTF_8));
        // ... 若有多个商户号，可继续调用putMerchant添加商户信息

        // 从证书管理器中获取verifier
        Verifier verifier = certificatesManager.getVerifier(mchId);
        // 初始化httpClient
        HttpClient httpClient = WechatPayHttpClientBuilder.create()
                .withMerchant(mchId, merchantSerialNumber, merchantPrivateKey)
                .withValidator(new WechatPay2Validator(verifier)).build();
        return httpClient;
    }

然后就可以用initClient()生成的加密客户端去请求各种支付接口了。最后别忘了引入

<dependency>
    <groupId>com.github.wechatpay-apiv3</groupId>
    <artifactId>wechatpay-apache-httpclient</artifactId>
    <version>0.4.2</version>
</dependency>

感觉自己写的也比较乱，所以把相关的官方文档链接都给大家引入了，希望大家还是认真看看官方文档。

欢迎大家有问题在评论区讨论，博主看到都会尽量解答。后面有机会再把项目整理一下开源给大家参考。