基础面试题
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
主要内容包括:HTML,CSS,JavaScript,浏览器,性能优化等等
https://github.com/MuGuiLin/QRCode
-
有一个 HTML 版本。
-
有一个 vue.js 版本。
测试地址:Demo:
https://muguilin.github.io/QRCode
存在问题:
1、网页必须使用浏览打开,不可以使用微信内置浏览器。如果是微信打开,会提示 “对不起,未识别到扫描设备”。
2、非手机内置浏览器,如:QQ、UC、百度等浏览器APP内,会存在找不到扫瞄设备。
3、最重要的是用户体验差。用户需要在浏览器打开,授权之后,才能进行扫码。
方案三、微信扫一扫
我把测试地址发到公司群,让同事帮我测试的时候,我发现程序员测试都说没问题,非程序员基本都是直接使用微信,点击扫一扫的时候,统一都是:“ 对不起,未识别到扫描设备 ”。转念一想,扫一扫好像是给开发同事做的。
转换思路,让用户在微信内直接点进去之后就可以进行扫码!所以选择 微信网页开发 -> 调用微信扫一扫。
优点:
1、用户使用方便,直接可以使用微信扫码。
2、开发方便,不用再考虑兼容安卓和ios的各种浏览器。
实现步骤:
- 1、引入
引入方式1:
index.html 入口文件处引入 js 插件
在 wx 使用页面处,可以直接通过 window.wx 引用。
引入方式2:
npm install weixin-js-sdk
在需要使用的页面处,引入 wx 模块:import wx from ‘weixin-js-sdk’
- 2、配置
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: ‘’, // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: ‘’, // 必填,生成签名的随机串
signature: ‘’,// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});
- 3、调用方法
wx.scanQRCode({
needResult: 0, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: [“qrCode”,“barCode”], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时,扫码返回的结果
}
});
具体的实现步骤以及可能遇到的问题都总结到《手把手教你调用微信扫一扫!三分钟包会》,需要的自行查阅。
最后
我可以将最近整理的前端面试题分享出来,其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等,还在持续整理更新中,希望大家都能找到心仪的工作。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
篇幅有限,仅展示部分截图: