真是人越大记忆越差，断断续续做了几个微信小程序和微信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最新的支付方式，链接文档放的也是该版本的文档，相比较之前的操作感觉有些地方要简便一些。我简单总结一下支付流程：

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

一般来说我们在调用下单接口时，要将接口参数中的商户订单号(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添加商户信息// 从证书管理器中获取verifierVerifier verifier = certificatesManager.getVerifier(mchId);// 初始化httpClientHttpClient 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>

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

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

微信网页开发配置整理相关推荐

微信网页开发配置步骤
1.微信公众平台-–>开发--->网页账号---->修改授权回调页面域名 2.微信公众平台-–>开发--->基本配置---->获取公众号基本配置信息 3.微信公众平 ...
微信网页开发——随手笔记
一.公众号设置 1.账号详情: 公众号的头像.二维码.名称都是必须填写的,如果没有这些信息,是不能进行网页开发的. 2.功能设置 JS接口安全域名: ...
微信网页开发wx.chooseImage多图上传、预览（已解决）
需求: 1.调用微信jsSDK选图或者拍照(选图支持选多图) 2.选图或者拍照后提供预览,但不把图片下载到服务器 3.提交表单的时候再一并提交,把图片下载到服务器 4.支持编辑页面删除已选图片(此图已 ...
H5微信网页开发总结（授权，分享，地图）
H5微信网页开发总结(网页授权,JS-SDK分享.地图) 目录: 网页授权分享地图参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_ ...
微信网页开发分享功能剖析
微信网页开发分享功能剖析步骤一:绑定域名先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". 步骤二:引入J ...
微信网页开发--仿美团、饿了么红包分享
需求这个月,公司做了一个3.8女王节的活动.当时的需求是一个水果接龙的小游戏.比如,我发起了一条接龙,然后我把这个链接分享出去,A点击这个链接就可以看见我输入的水果,然后A再分享这个链接给B,B就可 ...
微信网页开发-长按二维码无法识别问题解决
微信网页开发-长按二维码无法识别问题解决参考文章: (1)微信网页开发-长按二维码无法识别问题解决 (2)https://www.cnblogs.com/Tylerrrkd/p/9153949.ht ...
html微信开发样式,微信网页开发样式库
概述 WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页开发量身设计,可以令用户的使用感知更加统一.在微信网页开发中使用 WeUI,有如下优势: 1.同微信客户端一致的 ...
微信昵称乱码 mysql_微信网页开发获取用户昵称乱码微信昵称包含emoji表情乱码的解决方案...
微信网页开发获取用户昵称乱码微信昵称包含emoji表情乱码的解决方案如下: 问题产生原因:由于数据库及属性一致设为utf8,而utf8只支持1-3个字节.当用户昵称为emoji表情时,获取用户基本信 ...

微信网页开发配置整理

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

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

微信网页开发配置整理相关推荐

最新文章

热门文章

微信网页开发配置整理

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

​

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

微信网页开发配置整理相关推荐

最新文章

热门文章