vue前端移动项目调用微信扫一扫的实现

vue前端移动项目调用微信扫一扫的实现

1安装插件

npm install weixin-jsapi --save

2在main.js中引入

// 在man.js中引入
import wx from "weixin-jsapi"; 
// 在man.js中注册 
Vue.prototype.wx = wx

具体代码如下
bindingCarCode.vue页面

<template>
  <div class="moveCarService">
    <!--头部-->
    <div class="home-header">
      <van-nav-bar>
        <template #title>
          绑定挪车码</template>
      </van-nav-bar>
    </div>
    <!--主体区-->
    <div class="session-con">
      <div class="vanCard-style" v-for="item in carList">
        <div class="vanCard-style-left">
          <img :src="item.brandUrl" alt="">
        </div>
        <div class="vanCard-style-right"  >
          <div class="carCode">
            <p>{{item.plantNumber}}</p>
          </div>
          <div class="carStatus">
           <!-- <button @click='scanCode'>绑定二维码</button>-->
            <p class="button" v-if="item.binding==='N'" @click="scan()">点击这里绑定</p>
            <p  v-else>已绑定挪车码</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import wx from "weixin-jsapi";
  export default {
      data(){
          return{
            vehicleId:'',
            //后台接口的IP地址
            baseUrl:'',
            carList:[],
        }
      },
      created() {
      //获取页面数据列表
        this.getCarList()；
        this.init();
      },
      methods:{
        /*获取数据列表*/
         getCarList(){
        },
        async init () {
          let  url = location.href.split('#')[0];
          //alert('url：' + url);
          /*//这里【url参数一定是去#的前端网址】
          $.get("获取微信认证参数的地址?url=去参的本网页地址",*/
          ///eFwechat/getSignaturorScan后台提供的接口地址
          await this.$http.get('/wechat/getSignatureForScan?url=' + url).then(res => { // url为例子，根据自己的项目来
            console.log(res);
            if (res.data.code === 200) {
              let val = res.data.data ; // 接口返回的数据，用于下面的配置
              console.log(val);
              wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: val.appId, // 必填，公众号的唯一标识
                timestamp: val.timestamp, // 必填，生成签名的时间戳
                nonceStr: val.nonceStr, // 必填，生成签名的随机串
                signature: val.signature, // 必填，签名，见附录1
                jsApiList: ["checkJsApi", "scanQRCode"], // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
              });
            }
          })
        },
          /*调转*/
        scan(){
          wx.ready(function () {
            wx.scanQRCode({
              needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
              scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码，默认二者都有
               success: function (res) {
                var result = res.resultStr;
                result = result.match(/ownerCode=(\S*)/)[1];
                // 当needResult 为 1 时，扫码返回的结果
                alert(result);
               //调转页面到扫描成功的页面
                 window.location.href="http://nuoche2.com/#/success"
              },
              error: function (res) {
                alert("出错了", +res);
                console.log(res);
              },
            });
          });
          },

      }
    }
</script>

<style scoped>
  .vanCard-style{
    margin: 0 12px 12px 12px;
    overflow: hidden;
    border-radius: 8px;
    padding-bottom: 10px;
    background-color: #FFFFFF;
    overflow: hidden;

  }
  .vanCard-style-left{
    width: 30%;
    height: 100%;
    float: left;
  }
  .vanCard-style-left img{
    padding-top: 18px;
    padding-left: 18px;
    height: 64px;
    width: 64px;

  }
  .vanCard-style-right{
    float: left;
    width: 70%;
  }
  .carCode{
    margin-top: 10px;
  }
  .carCode p{
    font-size: 17px;
    font-weight:600;
  }
  .carStatus{
    margin-top: 19px;
    font-size: 14px;
  }
  .button{
    color: #2385F4;
  }

  /deep/ .van-field__left-icon i{
    color: #ececeb;
  }
</style>

扫描成功后跳转到success.vue页面

<!--扫描二维码成功页面-->
<template>
  <div class="insurance-submit">
    <div class="message" v-if="data!==''">
      <img src="../../assets/images/success-icon.png"/>
      <h2>扫描成功！</h2>
      <p>您的二维码信息已扫描成功！</p>
      <van-button color="#0066B3" type="primary" @click="save">确认绑定</van-button>
    </div>
    <div class="message" v-else>
      <img src="../../assets/images/error.png"/>
      <h2>扫描失败！</h2>
      <p>二维码扫描失败，请返回重新扫描！</p>
      <van-button color="#0066B3" type="primary" @click="back">返回</van-button>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        data:window.localStorage.getItem("qrCode"),
        id:localStorage.getItem("vehicleId"),
      }
    },
    created () {
    },
    methods: {
      back(){
        //返回上一页
        this.$router.push('/bindingCarCode');
      },
     async save(){
        await this.$http
          .post('/owner/qrCode/bindingVehicle',this.$qs.stringify({
            qrCode:this.data,//二维码
            vehicleId:this.id
            })
          )
          .then(({data:res}) => {
            console.log(res);
            if(res.code!==200){
              this.$toast("绑定二维码失败！")
            } else if(res.code===500){
              this.$toast("服务器异常！")
            }
            this.$toast('绑定二维码成功！');
            //返回上一页
            this.$router.push('/bindingCarCode');
          })
      },
    }
  }
</script>
<style scoped >
  .insurance-submit {
    min-height: calc(100vh);
    background-color: #F7F7F7;
  }
  .message {
    text-align:center;
    padding:150px 80px 0 80px;
  }
  .message img {
    width:40%;
  }
  .message img {
    width:40%;
  }
  .message p {
    line-height: 24px;
  }
  .message .van-button {
    width:90px;
    border-radius: 5px;
    margin-top:30px;
  }

</style>

点击–点击这里绑定挪车码—>扫一扫---->扫码成功！根据后台逻辑进行处理扫描成功后的二维码。


扫描成功后