Scenario description There are no screenshots when the interaction between two mobile phones involves company content
Use the QR code to scan the code to enter the judgment scanning WeChat or Alipay interface. After the judgment, WeChat is free to log in, redirect and transfer the value to the background interactive interface.
1. Generate QR code interface
//准备支付-进行扫码识别 微信还是支付宝
ready_pay_order(order_number,money){
let url = "https://xxx.xxxx.com/index.php/Template/xxx/center_jump?pay_tl_remark="+pay_tl_remark+"&pay_tl_money="+pay_tl_money;
qrcode.makeCode(url);
var canvas=$("#app_imgs").find('canvas').get(0);
var pay_qr_code_img = canvas.toDataURL('image/jpg');
self.img_src=pay_qr_code_img;
self.times_o = setInterval(() => {
self.times--;
if (self.times == 0||self.is_pay==1) {
clearInterval(self.times_o);
}else{
alert("生成错误");
}
}, 1000);
},
2. Scan QR code to enter
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<link href="__PUBLIC__/css/animate.css" rel="stylesheet">
<link href="__PUBLIC__/css/fyapps.css?v=1.112" rel="stylesheet">
<script src="__PUBLIC__/js/app_jq_vue.js"></script>
</head>
<script>
var appid = "owner"; //自己的appid
const querystring = getQueryString();
function myrefresh()
{
var ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf("micromessenger") > 0) {
// 微信
//var uri = encodeURI("https://xx.xxx.com//index.php/Template/xx/test_pay?tl_data="+tl_data); //只能传递一个参数 &会与微信自带的参数造成混淆，编译不出
/*encodeURIComponent php后台可以通过 urldecode() 进行解码
$url="%E9%94%80%E5%94%AE%E5%8D%95%E6%80%BB%E9%A2%9D%EF%BC%9A100";
$str = urldecode($url);
echo $url ;
echo $str ;*/
const uri = encodeURIComponent("https://xx.xx.com/index.php/Template/xx/test_pay?pay_tl_money="+querystring.pay_tl_money+"&pay_tl_remark="+querystring.pay_tl_remark);
var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid="+appid+"&redirect_uri=" + uri+"&response_type=code&scope=snsapi_base&state=123#wechat_redirect";
window.location = url;
}
if (ua.indexOf("alipayclient") > 0) {
//支付宝
alert("Alipay");
}
}
setTimeout('myrefresh()',1000);
/**
* url參數截取
* @returns {
{}}
*/
function getQueryString(){
const url = location.search;
const rs = {
}
if(url.indexOf('?') === 0){
const querystring = url.substr(1);
const kvArr = querystring.split('&');
kvArr.forEach(item => {
const temp = item.split('=')
const key = temp[0];
const val = temp[1];
rs[key] = val
})
}
return rs;
}
</script>
<body>
</body>
</html>
Multi-parameter transfer Change encodeURI to encodeURIComponent Pro test is effective
3. The test_pay interface receives parameters
//原基础上加上
const querystring = this.getQueryString();
let code = querystring.code;
this.number_qr = querystring.pay_tl_money; // alert()可以弹出传递的值
this.remark_content = querystring.pay_tl_remark;