微信官网开发文档:概述 | 微信开放文档
flutter web 微信授权
1 .通过微信开放平台获取授权参数
参数说明
appid 公众号的唯一标识
redirect_uri 授权后重定向的回调链接地址, 请使用 urlEncode 对链接进行处理
response_type 返回类型,请填写code
scope 应用授权作用域,snsapi_base (不弹出授权页面,直接跳转,只能获取用户openid),snsapi_userinfo (弹出授权页面,可通过openid拿到昵称、性别、所在地。并且, 即使在未关注的情况下,只要用户授权,也能获取其信息 )
state 重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节
wechat_redirect 是 无论直接打开还是做页面302重定向时候,必须带此参数
2.拼接参数,得到跳转url
import 'dart:html';
String appid=xxx;
String redirect_uri=xxx;//你的跳转url,微信跳回到你的项目页面,若页面链接有特殊字符需要处理urlEncode(text: "你跳转的url")或者Uri.encodeComponent('你跳转的url')
final url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=redirect_uri&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect';
///使用js的方法跳转,也可以使用url_launcher库
window.location.href = url;
3.获取微信回到url参数code
在redirect_uri设置的回调链接跳转的页面中解析微信回调的链接url:
import 'dart:html';
///前端知识,可以咨询前端开发者,如何获取页面链接,并解析链接获取链接地址中的参数
Uri u = Uri.parse(window.location.href);
String code = u.queryParameters['code'] ?? '';
4.通过code,给后端获取openId,和自己需要的字段如token等等
注:微信授权失败可能的原因:链接上面的#号没去除,通过url_strategy库去除网页URL中的“#”(hash)
flutter web 微信支付
我们使用的支付方式是微信内h5支付,之前用过微信二维码支付,不过用户支付完成后整个页面会被关闭,只能再次点击链接才能看到订单。
h5支付主要分为两步
1.发起支付请求,解析后端支付参数
后端通过之前拿到的openId,提交微信支付请求,然后会给前端支付参数,格式如下:
"payInfo": "{\"appId\":\"xxx\",\"timeStamp\":\"xxx\",\"nonceStr\":\"xxx\",\"package\":\"prepay_id=xxx\",\"signType\":\"RSA\",\"paySign\":\"jUIZCTn4iePqkERcECVxagu1/9YHXc/nyaSfGE0EsYcpxBr/L3wk3L+5BP14mEOWJNokGUGgRrq2ALzTmITioTa+I5VB6rMGnExDCctm4Gllvx7X63LxMUGzYaUZJo5EI6Y46QoOF44URMOcsQQeVVv4iwnxTx0XhvGx5F/1vXQrVUbXUppzdZDyOsZE3fBoyLcXrUQvXHw2EPv0D8qMY59sVliJ+q0Hr8PB56uLJl/iIX3e0gNJXrpq6aqx1fyjejV/qoxUILUbC1JgyTAUw6OlX4fdnHzG688E9FfE8C30wntnI0PKGrSzSKuCK370g5AUp43WtJ2DDpT44yuhdg==\"}"
2.前端通过js唤起微信支付
flutter 使用js代码步骤如下:
(1)引入js文件
在web/index.html中加入:
<!--微信支付-->
<!--注意路径要写对(src)-->
<script src="js/wxPay.js" type="application/javascript"></script>
我的js存放目录:
(2)编写js代码
wxPay.js文件内容如下:
//微信支付
function onBridgeReady(appId,timeStamp,nonceStr,packageValue,signType,paySign){
window.WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId":appId, //公众号ID,由商户传入
"timeStamp":timeStamp, //时间戳,自1970年以来的秒数
"nonceStr":nonceStr, //随机串
"package":packageValue,
"signType":signType, //微信签名方式:
"paySign":paySign //微信签名
},
function(res){
///dart提供的方法,通过js调用wxPayOperate来实现js与dart的通信
wxPayOperate(res.err_msg);
});
}
function toPay(appId,timeStamp,nonceStr,packageValue,signType,paySign){
//下面是解决WeixinJSBridge is not defined 报错的方法
if (typeof WeixinJSBridge == "undefined") {//微信浏览器内置对象。参考微信官方文档
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
}
} else {
onBridgeReady(appId,timeStamp,nonceStr,packageValue,signType,paySign);
}
}
(3)flutter web中使用js
import 'dart:js';
//将dart方法传给js,通过js调用wxPayOperate来实现js与dart的通信
context["wxPayOperate"] = wxPayOperate;
//调用js的函数来执行想要的操作
context.callMethod("toPay", [
param['appId'],
param['timeStamp'],
param['nonceStr'],
param['packageValue'],
param['signType'],
param['paySign']
]);
///给js 提供回调的方法
wxPayOperate(String callbackStr) {
// 关闭弹窗
closeProgress();
if (callbackStr == "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
///下面是支付成功后的逻辑,根据自己的业务写
MyNavigatorUtils.mineOrderPaySuccessPage(
_pageContext,
widget.bean ?? Records(),
(result) {},
replace: true,
);
} else {
showToast('支付失败!');
}
}