?

?

<!--強哥的自定義組件：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（扫码按钮大概是在底部），注意只是代码片段，不含微信鉴权业务流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。