【H5唤起微信“扫一扫”】舒工自定义微信H5唤起扫码Vue组件sg-scan.vue（扫码按钮大概是在底部），注意只是代码片段，不含微信鉴权业务流程

<!--强哥的自定义组件：H5唤起微信“扫一扫”-->
<template><div class="sg-scan" :up="isToUp"><van-button icon="scan" type="info" @click="scan" round /></div>
</template>
<script>
// import wx from "weixin-jsapi"; //这个快要被废弃了1.0.0
import wx from "weixin-js-sdk"; //要用微信的屌方法必须要引入这个玩意儿！！！
export default {data() {return {isToUp: false,defaultScanErrorText: "该码不属于本系统，暂不支持识别！"};},/* 【属性说明】 (均为非必须参数)onlyScanWeb:true/false      是否仅支持识别网址（默认false）containString:" "           识别内容必须包含字符串内容（一般用于限定xxx.com域名下的内容）scanErrorText:" "           识别失败后的错误提示文本内容autoLink:true/false         是否自动跳转识别的路径（默认false）*/props: ["onlyScanWeb", "containString", "scanErrorText", "autoLink"],mounted() {this.initScroll();},methods: {//顶部导航条（菜单）随着滚动条隐藏：1、滚动条往下隐藏导航条；2、滚动条往上显示导航条initScroll() {var beforeScrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop ||0;onscroll = () => {var afterScrollTop =window.pageYOffset ||document.documentElement.scrollTop ||document.body.scrollTop ||0;this.isToUp = afterScrollTop > beforeScrollTop;beforeScrollTop = afterScrollTop;};},scan(callback) {wx.ready(() => {//注意！！！一定要在wx.config的jsApiList: []数组中加入"scanQRCode"，否则你怎么死的都不知道wx.scanQRCode({needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有success: res => {/* 【返回结果】res:{"resultStr":"二维码识别内容（可能是链接或者文本内容）","errMsg":"scanQRCdoe:ok",} */var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果if (this.onlyScanWeb !== undefined && this.onlyScanWeb !== false) {if (result.indexOf("http") !== 0) return this.errorTip();}if (this.containString) {if (!result.includes(this.containString)) return this.errorTip();}this.autoLink !== undefined &&this.autoLink !== false &&location.replace(result); //自动跳转链接this.$emit("scan", result); //触发父文件绑定的scan事件，并抛出扫码识别的内容callback && typeof callback === "function" && callback(result); //执行回调函数(通常用于父组件调用this.$refs.sgScan.scan(d=>{}))}});});},errorTip() {var text = this.scanErrorText || this.defaultScanErrorText;this.$notify({ message: text });alert(text); //千万不要用Vant组件的dialog、toast等弹窗提示，否则你什么也看不到，会让微信扫一扫界面闪退}}
};
</script>
<style lang="scss" scoped>
@import "~@/css/sg";
.sg-scan {@extend %transition;position: fixed;width: 80px;margin: auto;left: 0;right: 0;bottom: 50px;text-align: center;&[up] {bottom: -80px;}.van-button {width: 80px;height: 80px;font-size: 2rem;box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);}
}
</style>

【H5唤起微信“扫一扫”】舒工自定义微信H5唤起扫码Vue组件sg-scan.vue（扫码按钮大概是在底部），注意只是代码片段，不含微信鉴权业务流程相关推荐

微信小程序星星评分代码片段（含半星）
微信小程序星星评分代码片段(含半星) 代码思路完整代码代码片段图片资源写代码时需要一个点击星星评分的功能安卓直接用RatingBar非常轻松的解决了到了小程序,没有现成的封装方法可以用了, ...
舒工自定义AJAX-lite 1.0实用型极简方法
/**舒工AJAX-lite 1.0 -- 最精简的ajax自定义访问方法*/ if ($g) {$g.$utils || ($g.$utils = {}); } else {var $g = {}; ...
【硬核技能】舒工自创bind绑定数据方法，类似angular和vue绑定数据原理
if ($g) {$g.$utils || ($g.$utils = {}); } else {var $g = {};$g.$utils = {}; } /*绑定数据神器*/ $g.$utils.b ...
技术分享：什么是CDN鉴权(by光网烈火)
互联网繁荣昌盛的今天,离不开核心技术团队的支持.就拿防止非法盗链来说吧,如果任意来源请求都可以盗链自己服务器的资源,那么将会降低企业的行业竞争力,还会导致企业为额外的非法流量买单.就此问题,光网烈火科 ...
Node（Next）+React实现飞书扫码登录+鉴权的详细开发过程
目录一.飞书的配置: 二.Node层的接口开发三.前端相关的开发四.服务器端鉴权以及客户端的鉴权背景:公司后台运营项目采用飞书扫码登录方式,扫码登录完之后获取飞书的信息,然后前端通过这些对应的 ...
微信js sdk 授权上传头像下载代码片段和注意事项
/* * 描述:当前页授权 * @param url 例:index.html / 如果有参数,需加密index.html?id=1 */ 1.对需要运用js sdk的页面授权 get ...
postman登录鉴权之接口测试
一.背景在做接口测试的时候,有些接口向后台请求数据的时候,是需要用户在登录情况下才有数据返回. 以电商平台为例,用户的个人中心,用户的订单列表,用户的支付信息等等,所有用户维度的数据都是需要登录态. ...
CDN ＞域名管理＞访问控制＞ URL鉴权配置＞ URL鉴权
URL鉴权更新时间:2020-03-05 18:09:03 编辑我的收藏 URL鉴权功能主要用于保护用户站点的资源不被非法站点下载盗用.通过防盗链方法添加Referer黑名单和白名单的方式可以解决一 ...
终于可以向重复的鉴权代码说byebye 了 -- （玩转 AOP和Annotation ）
缘起最近在写代码时,不可避免的会写成出进行大量的鉴权逻辑. 如下面代码所示,每一个方法都要添加一个鉴权逻辑(样例只有4个方法,实际工作中会很多) class Action{public void g ...

【H5唤起微信“扫一扫”】舒工自定义微信H5唤起扫码Vue组件sg-scan.vue（扫码按钮大概是在底部），注意只是代码片段，不含微信鉴权业务流程

【H5唤起微信“扫一扫”】舒工自定义微信H5唤起扫码Vue组件sg-scan.vue（扫码按钮大概是在底部），注意只是代码片段，不含微信鉴权业务流程相关推荐

最新文章

热门文章