AngualrJs 微信支付url未注册大坑解决方法

最新推荐文章于 2022-03-27 14:46:32 发布
最新推荐文章于 2022-03-27 14:46:32 发布
阅读量132 收藏
点赞数
文章标签： javascript python ViewUI
原文链接：https://my.oschina.net/nishichen/blog/752739
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

最近公司要做个微信web新项目，正好在看angular，就愉快的玩耍上了，用ui-router做路由控制，一开始偷懒没有去掉url内的#，不幸的碰到了两个微信js的坑。

1、微信支付授权的url在SPA内不会正确改变。

简单的说就是有页面A、B、C，C为支付页面，当从A进入SPA时，以A>B>C的顺序在页面C调用微信js接口支付，提示地址未授权而且url竟然是A的；以B>C的顺序，在页面C取到的url是B的，最恶心的是该情况只会出现在ios系统的微信内，安卓的SPA拿到的url是正确的。当时想到的解决方案就是在angular入口的地址后紧跟?，然后调用微信js支付时微信会认为?后均为页面参数，不会对授权的url有影响。

2、微信初始化时请求了两次地址，导致微信跳转到缺省的angular路由。

具体表现为我的angular入口为index，然后有路由index#/detail/1，在访问时由于地址为index#/detail/1，浏览器会直接访问index然后由angular来处理#/detail/1，然后index需要微信授权，就导致了授权后跳转到index然后angular跳转到了缺省的路由。解决方法很简单。。。去掉url内的#即可，去掉后的实现相当于将index/路径下的所有请求都使用sendfile的方法将angular的index内的内容当作模板进行应答，然后由angular根据index内的base href来获取原应在#后的内容进行路由处理，其实实现的方式是一样的，只不过一个是由服务器将所有angular处理的请求都返回了index，另一个是由浏览器将所有angular的请求都定向到index。

#去掉后问题1也不用加?即可解决了，打开angular相关实现的代码看了看，还是很巧妙的。

转载于:https://my.oschina.net/nishichen/blog/752739

weixin_34194379
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在微信小程序中对接微信支付
weixin_44976692的博客
07-10 2万+
在微信小程序中集成微信支付，需要经过一系列步骤，包括注册小程序、申请微信支付、创建支付订单、调用支付API以及处理支付结果通知。尽管过程中可能会遇到一些问题，但只要按照文档要求进行配置和开发，基本都能顺利完成。希望本文能为你提供一些帮助，让你在微信小程序中顺利集成微信支付。
解决 Angular2/Ionic2 微信动画报错问题
棌棌棌棌棌厷
09-14 1480
by wilhan.tian 欢迎转载，转载请注明出处 正确的代码，错误的信息废话不说，看代码！ animations.com.htmlimport {Component, trigger, state, style, animate, transition} from '@angular/core';@Component({ templateUrl: 'build/pages/anima
angular与微信结合的问题
xiaoniu_csdn的博客
10-23 1048
angular与微信公众号结合的项目，有的手机在扫描带参数二维码的时候，打开网页为空白，数据和图片都不能加载，有的手机是正常的，不知道是哪里的问题，求高人赐教。 ...
关于使用微信网页支付API产生未注册的问题。
weixin_34319374的博客
07-11 3105
微信H5网页支付产生未注册的问题 最近开发单页应用，然后集成在微信端。因为项目需要接通微信支付，而在开发过程中也遇上了一些问题。 所以便写下这篇文章，希望给同样遇上问题的朋友一个参考。 如果你此刻正好遇上图中的情况，那么我这篇文章也许能帮到你。 微信网页端支付接口，也许是出于安全考虑。在每次唤起微信JSSDK的时候，需要当前的UR...
angular使用微信开放标签
Dの博客
03-27 1474
angular使用微信开放标签
angular调用微信的chooseImage接口后，跳转页面只显示静态html内容，ts文件中alert都无效
陈焕君的博客
09-26 270
在调用chooseImage的页面内，引入模块import {Component, ViewChild, NgZone} from '@angular/core'; 在 constructor 添加 public ngZone: NgZone, constructor(private titleService: Title, public ngZone: NgZon...
微信公众号支付问题 - 当前页面的URL未注册
u014071833的博客
03-18 5515
微信支付 当前页面的URL未注册 排查思路和解决方法
微信支付demo 最新版 V3.3.7 有微信支付加 微信回调所有程序 可直接运行
11-19
4. **微信支付回调（notify_url）**：当用户完成支付后，微信服务器会通过指定的回调URL向商户服务器发送异步通知，告知支付结果。Demo包含了处理这些回调事件的代码，通常包括验证签名、确认订单状态、更新数据库等...
html模仿微信支付页面
04-05
html css jquery 模仿微信支付页面，用于微信公众号支付，展示微信支付页面。jquery微信支付代码
微信支付V3 Java jsApi 扫码支付 Demo
04-01
本人最近做微信支付，以前上传过单个微信jsapi 的java版本的demo 最近抽时间整理出来包括扫码支付和jsapi支付的版本的demo,代码非常的详细，很多容易出错的地方我都注释了出来，报错后台代码和前台代码的demo，前台...
移动开发 H5开发angular4教程
11-27
移动开发 H5开发angular4教程 移动开发 H5开发angular4教程
当angularjs遇到微信jsdk
bewithme的专栏
11-20 797
         最近在做一个微信版的进销存，需要调用微信的条码扫描功能，webapp框架是用的ionic,它是基于angularjs开发的，所以整个项目也直接用angularjs。         场景为当点击某个按钮时，弹出扫描窗口，扫描成功后将数据显示在文本框。问题是微信的jsdk的扫描接口中已经无法读取$scope了，而且也不能用document.getElementById("xx...
angular---angular路由守卫，有的可以访问有的不可以访问，有的路由地址只有在满足条件时候访问，其它禁止访问,...
weixin_30359021的博客
08-27 163
转载于:https://www.cnblogs.com/sugartang/p/11421435.html
angular4微信公众号开发遇到的问题
weixin_33978016的博客
12-14 839
SPA单页面应用授权问题   项目中要在微信底下开发单页应用(SPA)，前端技术选型用的angular4，就是按照官方文档来配置的路由，然后我在AppComponent这个根组件里面去调用了后端的接口来获取微信的授权，在某一个组件里面调用了微信的扫一扫的功能，当我点击了按钮，纳尼没反应，后端接口没报错，这时候按照惯例就去微信开发者工具的控制台里面看一下微信的jsSDK有没有授权成功，结果看到授权也...
微信公众号前端开发（angular6/7）
lurenxie的博客
07-17 3489
angular框架非常好用，但是国内确实资料不多，关于微信公众号开发，我只找到了17年的比较老的教程，这里对相关教程做了一个更新。感谢古尘师姐的教程。 本文档只进行到微信公众号授权登录部分，其他众多接口使用这里不做具体说明。 一、这里首先做微信公众号，微信小程序和微信第三方平台的区别说明。 微信公众号：只能在微信端打开，通过web技术开发。 微信小程序：只能在微信端打开，通过微信小程序框架...
angular解决手机浏览器不兼容问题
stopry的博客
11-28 3495
做angular项目时，用pc浏览器chorme运行正常，但在android浏览器上却不能正常运行了，最后发现竟然是兼容性原因，废话不多说了，直接上解决方法吧。 安装一个 babel-polyfill，然后在项目的polyfills里面import 'babel-polyfill';再次打包手机浏览器测试正常了。
【问题解决】解决Angular客户端请求Rest服务跨域问题
weixin_34390996的博客
09-18 130
1.问题描述：通过Origin是http://localhost:4200请求http://localhost:8081的服务，控制台报错如下，但是Response为200。客户端和服务端IP相同，但是端口不同，存在跨域问题。 XMLHttpRequest cannot load http://localhost:8081/api/v1/...
调用微信支付api 生成微信支付url
最新发布
06-07
调用微信支付API生成微信支付URL，需要先进行以下步骤： 1. 获取微信支付的统一下单接口，该接口用于生成预支付订单并返回支付URL； 2. 将生成的预支付订单信息发送给微信支付平台，获得预支付订单号； 3. 通过预支付订单号生成微信支付URL。 下面是一个简单的Java代码示例，用于生成微信支付URL： ```java import java.util.SortedMap; import java.util.TreeMap; import java.util.UUID; import java.security.MessageDigest; import java.security.NoSuchAlgorithmException; public class WechatPay { // 微信支付统一下单接口 private static final String UNIFIED_ORDER_URL = "https://api.mch.weixin.qq.com/pay/unifiedorder"; // 微信支付商户号 private static final String MCH_ID = "your_mch_id"; // 微信支付API密钥 private static final String API_KEY = "your_api_key"; // 微信支付回调URL private static final String NOTIFY_URL = "https://example.com/notify"; /** * 生成微信支付URL * @param body 商品描述 * @param outTradeNo 商户订单号 * @param totalFee 订单总金额，单位为分 * @param spbillCreateIp 终端IP * @return 微信支付URL */ public static String generatePayUrl(String body, String outTradeNo, int totalFee, String spbillCreateIp) throws Exception { SortedMap<String, String> params = new TreeMap<String, String>(); params.put("appid", "your_appid"); params.put("mch_id", MCH_ID); params.put("nonce_str", UUID.randomUUID().toString().replace("-", "")); params.put("body", body); params.put("out_trade_no", outTradeNo); params.put("total_fee", String.valueOf(totalFee)); params.put("spbill_create_ip", spbillCreateIp); params.put("notify_url", NOTIFY_URL); params.put("trade_type", "NATIVE"); // 生成签名 String sign = generateSign(params); params.put("sign", sign); // 发送请求 String xml = HttpUtils.post(UNIFIED_ORDER_URL, XmlUtils.toXml(params)); // 解析响应 SortedMap<String, String> result = XmlUtils.toMap(xml); if (result.get("return_code").equals("SUCCESS")) { String prepayId = result.get("prepay_id"); return generatePayUrl(prepayId); } else { throw new Exception(result.get("return_msg")); } } /** * 生成签名 * @param params 参数列表 * @return 签名 */ private static String generateSign(SortedMap<String, String> params) throws NoSuchAlgorithmException { StringBuilder sb = new StringBuilder(); for (String key : params.keySet()) { String value = params.get(key); if (value != null && !value.isEmpty() && !key.equals("sign")) { sb.append(key).append("=").append(value).append("&"); } } sb.append("key=").append(API_KEY); String str = sb.toString(); MessageDigest md = MessageDigest.getInstance("MD5"); byte[] bytes = md.digest(str.getBytes()); StringBuilder result = new StringBuilder(); for (byte b : bytes) { String hex = Integer.toHexString(0xff & b); if (hex.length() == 1) { result.append('0'); } result.append(hex); } return result.toString().toUpperCase(); } /** * 生成微信支付URL * @param prepayId 预支付订单号 * @return 微信支付URL */ private static String generatePayUrl(String prepayId) { SortedMap<String, String> params = new TreeMap<String, String>(); params.put("appid", "your_appid"); params.put("mch_id", MCH_ID); params.put("time_stamp", String.valueOf(System.currentTimeMillis() / 1000)); params.put("nonce_str", UUID.randomUUID().toString().replace("-", "")); params.put("prepay_id", prepayId); params.put("sign_type", "MD5"); // 生成签名 String sign = generateSign(params); params.put("sign", sign); // 生成支付URL StringBuilder sb = new StringBuilder(); sb.append("weixin://wxpay/bizpayurl?"); for (String key : params.keySet()) { String value = params.get(key); if (value != null && !value.isEmpty()) { sb.append(key).append("=").append(value).append("&"); } } sb.setLength(sb.length() - 1); return sb.toString(); } } ``` 在上述代码中，我们使用了HttpUtils和XmlUtils两个工具类。HttpUtils用于发送HTTP请求，XmlUtils用于将XML格式的字符串转换为SortedMap。你需要根据自己的实际情况实现这两个工具类。 使用该代码，你可以像下面这样生成微信支付URL： ```java String payUrl = WechatPay.generatePayUrl("商品描述", "商户订单号", 100, "终端IP"); System.out.println(payUrl); ``` 其中，参数分别为商品描述、商户订单号、订单总金额（单位为分）和终端IP。执行完上述代码后，你将获得一个微信支付URL，该URL可以用于在微信客户端中打开支付页面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值