Development Background:
.NET hybrid developed single-page application of vUE template syntax, so there is no scaffolding and no routes to jump to.
Project Description:
Need to write two pages, in the order details page need to click “please enter the phone number” page, enter the phone number binding after the success of the mobile phone number binding automatically jump to the order details page, if the phone number has been bound to succeed, you don’t show “please enter a phone number” (i.e., do not click on to the next page), show only the phone number.
Project idea:
V-show controls switching between two pages in a single page, so you need to simulate a real jump between two pages, changing the hash value and listening for historical item changes.
1. Monitor and overwrite wechat rollback events
When the two pages are under the same route, the page of “Confirm order” will not be entered when you click back of wechat from the page of “binding mobile phone number”, but will be directly returned. Therefore, you can determine which page to return to by adding identifiable hash value at the end of the URL and using methods to monitor.
Knowledge reserves:
The window. onPopState event is actually the popState event handler on the Window object. Whenever the active history entry changes, the popState event is fired on the corresponding Window object. Because adding a hash value to a URL does not re-issue an HTTP request but changes the browser’s access history. So even if you go to the “phone number binding” page, PopState can listen.
- About the hash value
- About the way of thinking
- About JS reload and refresh
Code:
Add an identifiable hash value to the “Please enter mobile phone number” click event
Events are written in methodsCopy the code inputPhoneNumber() {
this.index = false;
console.log("Add hash value");
location.hash = "second";
console.log("Display the hash value of the bound phone number");
console.log(window.location);
},
Copy the codeThe listener event is written in the Mouted hook functionCopy the code mounted() {
var url = window.location.href;
window.onpopstate = function () {
console.log("Listen back event");
if (location.hash.indexOf("#second") > -1) {}else{ window.location.href = url; }}}Copy the codeIi. H5 wechat Payment code
Ideas:
1. When clicking “Pay Now” on the order confirmation page, determine whether to bind your mobile phone number. If you fill in your mobile phone number, you can proceed to Step 2. Call interface to send requests to the background to call wechat payment parameters (public number merchant payment parameters); 3. According to the parameters returned in the background, if the order is not completed, the built-in interface of wechat Pay will be called. If there is an order, the order completion page will be jumped. 4. Judge according to the returned parameters of wechat Pay. If ok is returned, the background interface will be called for polling to query whether the order is completed. The page that succeeds or fails is redirected according to the background status code.
Code:
Payment button:
toPayMoney() {
console.log(Trigger the Pay now button);
var that = this;
var returnUrl = location.href;
that.disabled = true;
if(! this.phone) { that.dialogVisible =true;
that.infoMessage = "Please enter your mobile phone number first.";
console.log("Confirm order when mobile phone number does not exist");
} else {
console.log("Confirm order, mobile phone number exists"); that.selectParams(); Console.log (console.log)"Confirm order, query payment parameters when mobile phone number exists"); }},Copy the codeQuery payment parameters:
selectParams() {
var that = this;
var returnUrl = location.href;
$.ajax({
url: '/api/wxpay/unifiedorder'.type: "GET",
cache: false,
dataType: 'json',
data: { number: this.number },
success: function (data) {
if (data.code === 200) {
if (data.data.isValid == true) {
return location.href = "/pay/subscription/" + @Model.SubscriptionID +"/finish? tradeNo=" + @Model.Number;
} else {
var json =data.data.jsParams;
console.log("json"+ (data.data.jsParams)); // Activate wechat Payfunction onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": json["appId"], // The public number is passed in by the merchant"timeStamp": json["timeStamp"], // Timestamp, number of seconds since 1970"nonceStr": json["nonceStr"], // random string"package": json["package"]."signType": json["signType"], // wechat signature:"paySign": json["paySign"},function checkPayRes(res) {
console.log("Requested background parameters and called wechat Pay");
//setInterval()
if (res.err_msg == "get_brand_wcpay_request:ok") { that.polling(); // Using the above method to judge the front-end return, the wechat team solemnly reminds: res.err_msg will return OK after the user pays successfully, but it does not guarantee that it is absolutely reliable. }else{}}); }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();
}
}
}
},
error: function (data) {
console.log("Calling background query order failed"); }})},Copy the codeShort polling function
polling() {
var that = this;
$.ajax({
url: '/api/wxpay/unifiedorder'.type: "GET",
cache: false,
dataType: 'json',
data: { number: this.number },
success: function (data) {
if (code.data === 100) {
console.log("Continuous polling query required for status code 101");
setInterval(that.polling(), 1000);
} else if (code.data === 200) {
clearInterval(that.polling());
console.log("Status code 200 requires continuous polling query.");
console.log("Payment successful");
location.href = "/pay/subscription/" + @Model.SubscriptionID +"/finish? tradeNo=" + @Model.Number;
} else{ console.log(data.msg); }}})}Copy the codeThree, button lock unlock
In fact, the above code has included part of the lock and unlock function, here is the idea:
- Use the Button’s Disabled property
- Bind variables to each button using V-bind.