Web前端最全vuex项目中的微信支付、支付宝支付，2024年哔哩哔哩Web前端高级面试题及答案

最后

推荐一些系统学习的途径和方法。

每个Web开发人员必备，很权威很齐全的Web开发文档。作为学习辞典使用，可以查询到每个概念、方法、属性的详细解释，注意使用英文关键字搜索。里面的一些 HTML，CSS，HTTP 技术教程也相当不错。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

HTML 和 CSS：

一、移动端微信支付，vue中如何玩？

在移动端微信支付分为微信内支付和微信外支付。

1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内：

//判断是否微信

is_weixn(){

var ua = window.navigator.userAgent.toLowerCase();

if (ua.match(/MicroMessenger/i) == ‘micromessenger’){

return true;

} else {

return false;

}

},

2.触发立即支付方法，根据微信内外的不同请求后端不同的接口，如果是微信外支付非常简单了~

3.【微信外支付】下面先看微信外支付，官方文档也写的很清楚，后端返回一个url地址，前端的工作就是拿到这个url地址进行跳转就可以了，看一下2-3步代码：

handelPay() {

if

(this.wechatpayType == ‘wxpay’){

// console.log(“微信内支付”)

let data={

amount:this.number,

}

this.$http.insideWeChatPay(data).then( res => {

if(res.data.code === 200){

this.weChatParameter=res.data.data

// console.log(this.weChatParameter,“微信内支付需要参数”)

this.weixinPay()

}else{

Toast({

message: res.data.msg,

position: ‘middle’,

duration: 1000

});

}

});

} else if(this.wechatpayType == ‘wxpay_php’){

// console.log(“微信外支付”)

let data={

amount:this.number,

}

this.$http.outsideWeChatPay(data).then( res => {

if(res.data.code === 200){

let url=res.data.data

window.location.replace(url) //这里是后端返回的URL直接进行跳转即可完成微信外支付

}else{

Toast({

message: res.data.msg,

position: ‘middle’,

duration: 1000

});

}

});

}

},

4.在调起支付的页面监听从其他页面返回的事件，进行一些刷新业务逻辑的实现即可，至此微信外支付已经完成。

document.addEventListener(“visibilitychange”, function() {

//需要的操作

});

5.【微信内支付】微信内支付比起微信外支付稍微复杂一点，但是也不难，（3步骤代码里面已经请求支付方式接口拿到了微信内支付所需要的参数）根据官方API

微信内置js对象 WeixinJSBridge，进行开发，至此微信浏览器内支付已经完成

//解决微信内置对象报错

weixinPay(data){

var vm= this;

if (typeof WeixinJSBridge == “undefined”){

if( document.addEventListener ){

document.addEventListener(‘WeixinJSBridgeReady’, vm.onBridgeReady(data), false);

}else if (document.attachEvent){

document.attachEvent(‘WeixinJSBridgeReady’, vm.onBridgeReady(data));

document.attachEvent(‘onWeixinJSBridgeReady’,vm.onBridgeReady(data));

}

}else{

vm.onBridgeReady();

}

},

//微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据

onBridgeReady(){

var vm = this;

var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();

WeixinJSBridge.invoke(

‘getBrandWCPayRequest’,{

debug:true,

“appId”:vm.weChatParameter.appId, //公众号名称，由商户传入

“timeStamp”:timestamp, //时间戳，自1970年以来的秒数

“nonceStr”:vm.weChatParameter.nonceStr, //随机串

“package”:vm.weChatParameter.package,

“signType”:vm.weChatParameter.signType, //微信签名方式：

“paySign”:vm.weChatParameter.paySign, //微信签名

jsApiList: [

‘chooseWXPay’

]

},

function(res){

// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。

if(res.err_msg == “get_brand_wcpay_request:ok” ){

Toast({

message: ‘支付成功’,

position: ‘middle’,

duration: 3000

});

vm.number=null

vm.$router.go(-1)

//window.location.href = vm.BASE_URL + ‘index.html#/depositResult’

}else{

Toast({

message: ‘支付失败’,

position: ‘middle’,

duration: 3000

});

}

}

);

},

6.微信内部浏览器支付也可以封装一下，在全局都可以直接调用：

//微信浏览器支付

function wxpay(params,callback){

if (typeof WeixinJSBridge == “undefined”){

if( document.addEventListener ){

document.addEventListener(‘WeixinJSBridgeReady’, onBridgeReady(params,callback), false);

}else if (document.attachEvent){

document.attachEvent(‘WeixinJSBridgeReady’, onBridgeReady(params,callback));

document.attachEvent(‘onWeixinJSBridgeReady’, onBridgeReady(params,callback));

}

}else{

onBridgeReady(params,callback);

}

文末

js前端的重头戏，值得花大部分时间学习。

推荐通过书籍学习，《 JavaScript 高级程序设计（第 4 版）》你值得拥有。整本书内容质量都很高，尤其是前十章语言基础部分，建议多读几遍。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

另外，大推一个网上教程 现代 JavaScript 教程 ，文章深入浅出，很容易理解，上面的内容几乎都是重点，而且充分发挥了网上教程的时效性和资料链接。

学习资料在精不在多，二者结合，定能构建你的 JavaScript 知识体系。

面试本质也是考试，面试题就起到很好的考纲作用。想要取得优秀的面试成绩，刷面试题是必须的，除非你样样精通。

这是288页的前端面试题