微信扫码实现

最新推荐文章于 2023-10-20 10:03:30 发布

转载最新推荐文章于 2023-10-20 10:03:30 发布 · 179 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/lan-cheng/p/10197138.html

本文介绍了一个基于Vue的扫码绑定功能实现细节，包括页面布局、扫码方法、权限验证配置及微信接口调用。通过实例展示了如何在前端应用中集成扫码功能，并处理扫码结果。

<template>
    <div class="sweep_dinding">
        <!-- 扫码绑定 -->
        <div class="title_box">
            <van-nav-bar title="扫码绑定" left-text=""  @click-left="onClickLeft" left-arrow>
            <!-- <van-icon name="search" slot="right" /> -->
            </van-nav-bar>
        </div>
        <div class="explain_text">
                <img src="@/assets/images/sweepCodeImg.png" alt="">
        </div>
        <!-- <router-link to="/robotBinding/scanCode"> -->
        <div class="sweep_btn" @click="scanCode">
            <div><img src="@/assets/images/icon_Scan@2x.png" alt=""></div>
        </div>
    </div>    
</template>
<script>
import { mapGetters, mapState } from "vuex";
import http from "@/utils/http";
import api from "@/utils/api";
export default {
  data(){
    return{
      permissionsData:[]
    }
  },
  computed: mapGetters({
    facilityId: "GET_FACILITY_ID" //当前设备id
  }),
  methods: {
    onClickLeft() {
      window.history.back(-1);
    },
    disposeRes:async function(){
      const res = await http.get(api.SetTheBh+this.facilityId+"/onbind", {});
    },
//扫码方法
    scanCode(){
      wx.scanQRCode({
      needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: function (res) {
      var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
      console.log(result)
      //alert(result)
      }
      });
    },
//获得签名
    getPermissions: async function() {
      let _this = this;
      const res = await http.get(api.permissions, {});
      console.log(res);
      if (res.data.statusCode == 0) {
        //  let data =0
        this.permissionsData = res.data.data;
        //接口入住权限验证配置
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: this.permissionsData.appId, // 必填，公众号的唯一标识
          timestamp: this.permissionsData.timestamp, // 必填，生成签名的时间戳
          nonceStr: this.permissionsData.nonceStr, // 必填，生成签名的随机串
          signature: this.permissionsData.signature, // 必填，签名，见附录1
          jsApiList: ["scanQRCode"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
      }
    },
  },
  mounted(){
    this.getPermissions()
  },
};
</script>

转载于:https://www.cnblogs.com/lan-cheng/p/10197138.html