iOS H5拉起微信支付

新手学堂015

iOS H5拉起微信支付,第1张

再WKWebView的WKNavigationDelegate协议方法

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void)

判断 let  scheme = navigationActionrequesturl!scheme!

如果scheme = "weixin"的时候 说明H5已经调用拉起微信的操作了

我们进行拦截重新定向

let url = navigationActionrequesturl

UIApplicationsharedopen(url!) //就可以成功拉起微信并打开支付页面了  如果这个url里的参数没有问题的话

decisionHandler(WKNavigationActionPolicycancel)  ///记得回传取消操作

开发文档: https://mpweixinqqcom/wikit=resource/res_main&id=mp1445241432

由于我这边申请过了所以不做过多演示,这里我们需要注意几个地方,我们如果不适用JDSK的话只需要关注红色方框的地方,如果需要使用JSDK如调用相机、分享等。

其次测试号微信授权需要配置回调域名所以我们需要配置Natapp映射的域名,这里配置的地址只需要域名,配置在页面服务->网页账号->修改。

核心pomxml。

核心applicationyml。

以下配置类@Data使用了Lombok文章中没有说明配置的话自己百度或者自己写GetSet。

这个配置类的由来主要是因为WxMpService接口有多个实现类自动注入的话IOC不知道使用哪个实现类,还有就是每次调用API接口如查用户、素材之类。每次之前都要设置一个wxMpConfigStorage,所以我们这里使用了一个组件来管理相关的Bean配置。

其中我们大体的可以看出authorizationUrl接口是用户在微信端点击的授权API其次方法中才是构建微信授权链接让项目自己去重定向之后会到回调地址userInfo接口这里大家可以自由发挥返回前端页面也可以。

下方就是微信授权访问接口中的方法和官方参数解析。

项目启动之后我们需要把外部访问请求发送到自己的测试公众号前提需要关注。

以上就是用户授权的操作一般在公众号开发嵌入H5网页常用的第一步还有就是jdsk验证也需要这里不细讲可以百度相关教程,使用了此SDK之后不需要自己去封装一些API操作简便了微信开发。(此教程于博客迁移,时间并非当日编写其次可去GitHub搜索weixin-java-mp看最新文档和相关使用教程)

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

例子为在vue中使用微信JS-SDK,步骤如下:

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注:登录后可在“开发者中心”查看对应的接口权限。

插件方式:

引入js文件方式:

在需要调用JS接口的页面引入如下JS文件,(支持https): http://reswxqqcom/open/js/jweixin-160js

如需进一步提升服务稳定性,当上述资源不可访问时,可改访问: http://res2wxqqcom/open/js/jweixin-160js (支持https)。

挂载到Vue原型

与使用 JS-SDK 配置方式相同,所有需要使用开放标签的页面必须先注入配置信息,并通过openTagList字段申请所需要的开放标签,否则将无法使用(同一个 url 仅需调用一次)。开放标签的申请和 JS 接口的申请相互独立,因此是可以同时申请的。

配置成功之后,就可以使用相关的api了。例子为微信支付。

3分享出去的是链接,不是卡片的原因及解决方案:

原因: 微信开放全域名访问后出现的限制。

解决方法:

这会导致别人通过分享卡进来的页面不是自己配置的页面。

解决办法: 把路由hash模式改成history模式。(让后端把匹配不到的页面重定向到首页)

开发者需要配合使用微信开放平台提供的 SDK 进行一次性订阅消息授权请求接入。正确接入 SDK 后,开发者移动应用会在终端本地 拉起微信应用进行订阅消息授权 ,微信用户确认后微信将拉起开发者移动应用,并带上授权用户 openid 等信息。

使用方式: 引导用户打开 https://mpweixinqqcom/mp/subscribemsgaction=get_confirm&appid=wxaba38c7f163da69b&scene=1000&template_id=1uDxHNXwYQfBmXOfPJcjAS3FynHArD8aWMEFNRGSbCc&redirect_url=http%3a%2f%2fsupportqqcom&reserved=test#wechat_redirect 链接。

可拉起微信打开一次性消息订阅授权页:

使用方式:

如需添加参数,可在redirect_uri后面进行拼接,授权成功之后会带回来。

其他问题请参考: https://wwwjianshucom/p/d343067b1ce6

接入微信授权,有两种方式:

静默授权和非静默授权

静默授权:scope=snsapi_base,没有弹窗,只能获取OPENID

非静默授权: scope=snsapi_userinfo,有弹窗需要手动确认授权,可以获取openid, 头像,昵称等信息。

H5登录就是通过授权获取code,将code传给后端,后端再将openid, 头像,昵称等信息返给前端。所以首先要获取到code。获取方式如下:

let appid = ''; //换成自己的appid

let uri = encodeURIComponent(link);  //link是需要登录的页面

let authURL = `https://openweixinqqcom/connect/oauth2/authorizeappid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`; //这里使用的是非静默授权

windowlocationhref = authURL;

页面自动刷新后,返回的地址里面会携带code值 ,把地址里的code值取出来传给后端就可以了。