前端框架
前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。
以 Vue 为例,我整理了如下的面试题。
如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
现在一般微信的支付接口会分成两种:
一、JSAPI 支付接口
二、微信公众号的JSSDK中的wx.chooseWXPay
通常支付接口会封装好放在全局中,以便前端调用可以减少重复书写。
1.3.1 JSAPI 支付接口相关代码
// 检测支付环境中的 WeixinJSBridge
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();
}
function onBridgeReady() {
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": "appId", //公众号名称,由商户传入
"timeStamp": "timeStamp", //时间戳,自1970年以来的秒数
"nonceStr": "nonceStr", //随机串
"package": "package",
"signType": "MD5", //微信签名方式:
"paySign": "paySign" //微信签名
},
function(res) {
// 支付成功
if (res.err_msg == "get\_brand\_wcpay\_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err\_msg将在用户支付成功后返回ok,但并不保证它绝对可靠。
}
// 支付过程中用户取消
if (res.err_msg == "get\_brand\_wcpay\_request:cancel") {
}
// 支付失败
if (res.err_msg == "get\_brand\_wcpay\_request:fail") {
}
/\*\*
\* 其它
\* 1、请检查预支付会话标识prepay\_id是否已失效
\* 2、请求的appid与下单接口的appid是否一致
\* \*/
if (res.err_msg == "调用支付JSAPI缺少参数:total\_fee") {
}
});
}
从上述代码中我们可以看出,先会检测支付环境中的 WeixinJSBridge,个人认为是为了判断执行代码是否处于微信环境。在执行WeixinJSBridge.invoke()的接口请求时,会用到一组支付签名的数据,这正是通过后端请求支付签名所给的。
分别为以下五种数据:
- appId为公众号名称
- timeStamp为时间戳,自1970年以来的秒数
- nonceStr为随机串
- package为订单详情扩展字符串
- signType为微信签名方式,默认为MD5
- paySign为微信签名,通过签名生成算法生成
(注意:在调用支付接口的参数,支付签名的数据中的字段名受大小写敏感)
1.3.2 微信公众号的JSSDK中的wx.chooseWXPay
1.3.2.1 使用wx.chooseWXPay的前置条件
wx.chooseWXPay使用前需要先准备jweixin-1.6.0.js文件,并在需要使用的页面引用此JS文件。具体使用说明可以查看微信官方JSSDK文档
1.3.2.2 wx.chooseWXPay相关代码
let WeChatPay = function() {
// 2、引入js后、获取公众号校验信息
let timestamp = '',
nonceStr = '',
signature = '';
let v = {
// 用于换取微信校验信息的参数:要求不可以包含 “#” 号
url: location.split('#')[0]
};
// 3、通过config接口注入权限验证配置(需要同步进行,在获取到校验信息后方可注入config,否则校验失败!)
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '', // 必填,签名
jsApiList: ["checkJsApi", "chooseWXPay", "updateAppMessageShareData", "updateTimelineShareData"] // 必填,需要使用的JS接口列表
});
axios.post('/wx/pay/orderPay\_XXXX', data).then(res => {
// 支付成功状态
if (res.code == 200) {
// 获取支付必备的参数
let {
nonceStr,
package,
signType,
paySign
} = res.data;
// 4、通过ready接口处理成功验证
wx.ready(function() {
/\* 微信支付 \*/
wx.chooseWXPay({
timestamp: 0, // 支付签名时间戳,注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr: nonceStr, // 支付签名随机串,不长于 32 位
package: package, // 统一支付接口返回的prepay\_id参数值,提交格式如:prepay\_id=\\*\\*\\*)
signType: signType, // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
paySign: paySign, // 支付签名
success: function(res) {
// 前端判断返回方式,微信团队郑重提示:不保证绝对可靠,切记!
if (res.errMsg == 'chooseWXPay:ok') {
// 【支付成功】
} else if (res.errMsg == 'chooseWXPay:cancel') {
// 【支付取消】:用户取消支付不会进入这个判断,而是进入complate和cancel函数
} else {
}
},
complete: function(res) {
// 接口调用完成时执行的回调函数,无论成功或失败都会执行
if (res.errMsg == 'chooseWXPay:ok') {
// 【支付成功】:支付成功提示页面,点击完成按钮之后
wx.closeWindow(); /\* 关闭微信窗口,调用时需要在config中进行校验 \*/
} else if (res.errMsg == 'chooseWXPay:cancel') {
// 【支付取消】
} else {
}
/\*\*
\* iOS和Android支付成功点击“完成”后都会进入success和complete函数,都返回'chooseWXPay:ok'
\* (也有人说Android支付成功不进入success函数,)
\* 原因是【iOS和Android返回数据不同。支付成功后Android返回 {"errMsg":"getBrandWCPayRequest:ok"},iOS返回{"err\_Info":"success","errMsg":"chooseWXPay:ok"},故Android找不到success方法,导致失败】
\* \*/
},
fail: function(err) {
// 接口调用失败
},
cancel: function(err) {
// 用户点击取消时的回调函数:用户取消支付后实际上进入cancel 和 complate函数
}
});
});
### 最后
总的来说,面试官要是考察思路就会从你实际做过的项目入手,考察你实际编码能力,就会让你在电脑敲代码,看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时,有一个清晰的逻辑思路,清楚知道自己在和面试官说项目说技术时的话就好了
![](https://img-blog.csdnimg.cn/img_convert/933fcbaebe2fb9dd15ef97ac66b6eef1.webp?x-oss-process=image/format,png)
![](https://img-blog.csdnimg.cn/img_convert/8d44feb5e9c689db75f63e67774272f0.webp?x-oss-process=image/format,png)
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
说技术时的话就好了
[外链图片转存中...(img-SUjS3q3G-1714842510665)]
[外链图片转存中...(img-Ac7kegHA-1714842510666)]
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**