vue中使用（vux版）

微信掃一掃功能

分享接口只有認(rèn)證公眾號(hào)才能使用螟够，域名必須備案且在微信后臺(tái)設(shè)置。

先確認(rèn)已經(jīng)滿足使用jssdk的要求再進(jìn)行開發(fā)漱贱。
1.引入vux類庫
2.在 main.js 中全局引入

import { WechatPlugin } from 'vux'
Vue.use(WechatPlugin)

console.log(Vue.wechat) // 可以直接訪問 wx 對(duì)象槐雾。

3.全局引入后就可以在任意組件內(nèi)調(diào)用了，如：

this.$wechat.scanQRCode({
        needResult: 0, // 默認(rèn)為0幅狮，掃描結(jié)果由微信處理募强，1則直接返回掃描結(jié)果，
        scanType: ["qrCode","barCode"], // 可以指定掃二維碼還是一維碼崇摄，默認(rèn)二者都有
        success: function (res) {
        var result = res.resultStr; // 當(dāng)needResult 為 1 時(shí)擎值，掃碼返回的結(jié)果
        }           
    });

準(zhǔn)備工作完成，下面開始正式的流程

步驟一逐抑、綁定域名
先登錄微信公眾平臺(tái)進(jìn)入“公眾號(hào)設(shè)置”的“功能設(shè)置”里填寫“JS接口安全域名” （這個(gè)一般是后臺(tái)去做的）

步驟二鸠儿、引入JS文件
jquery的項(xiàng)目在需要調(diào)用JS接口的頁面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js
vue的項(xiàng)目可以用vux的組件，就是我上面介紹的那一堆東西

步驟三进每、通過config接口注入權(quán)限驗(yàn)證配置
這個(gè)過程一般都是在App.vue中完成
思路：先向后臺(tái)請(qǐng)求配置所需要的數(shù)據(jù)汹粤，也就是下面的scan()函數(shù),得到數(shù)據(jù)后在通過config接口注入權(quán)限驗(yàn)證配置，也就是init()函數(shù)品追，最后在create生命周期中調(diào)用一下scan()函數(shù)玄括，這一步就算完成了

init:function(data){
          //通過config接口注入權(quán)限驗(yàn)證配置
          this.$wechat.config({
              debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)肉瓦，可以在pc端打開遭京，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印泞莉。
              appId: data.app_id, // 必填哪雕，公眾號(hào)的唯一標(biāo)識(shí)
              timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳
              nonceStr: data.nonceStr, // 必填鲫趁，生成簽名的隨機(jī)串
              signature: data.signature,// 必填斯嚎，簽名，見附錄1
              jsApiList: ['scanQRCode'] // 必填挨厚，需要使用的JS接口列表
          });
          //通過ready接口處理成功驗(yàn)證

      },
scan:function(){
          this.$http({
              methods:'get',
              url:'/gongzhonghao/Jssdk',
              params:{
                  // 代碼需要上傳服務(wù)器堡僻，否則返回為0
                  url:location.href.split('#')[0],
              }
          }).then(res=>{
              this.init(res.data.data)
          })
      },

步驟四、在需要的組件內(nèi)調(diào)用功能接口疫剃，如下面調(diào)用的是掃一掃的接口

let self = this;
self.$wechat.scanQRCode({
        needResult: 1, // 默認(rèn)為0钉疫，掃描結(jié)果由微信處理，1則直接返回掃描結(jié)果巢价，
        scanType: ["qrCode"], // 可以指定掃二維碼還是一維碼牲阁，默認(rèn)二者都有
        success: function (res) {
            self.$vux.loading.hide();
            var result = res.resultStr; // 當(dāng)needResult 為 1 時(shí)，掃碼返回的結(jié)果
            if (result){
                self.$store.commit('setPrizeQrCode',result);
                self.getPrizeQrcodeInfo(result)
            }else {
                self.$vux.alert.show({
                    content:'未識(shí)別的兌換碼'
                })
            }

        }
    });

注意：微信的sdk只能在微信中打開壤躲，如果不是城菊，則無法使用微信的功能，下面是判斷是否微信打開的函數(shù)

isWeixn:function(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.match(/MicroMessenger/i)=="micromessenger") {
            return true;
        } else {
            return false;
        }
    },
    //判斷是否微信的處理
    if(this.isWexin()){
        //是微信碉克，在里面寫相關(guān)的業(yè)務(wù)邏輯凌唬，如分享，掃碼等功能
    }else {
        //這個(gè)是硬性不支持漏麦，沒有辦法的
        alert('請(qǐng)?jiān)谖⑿胖写蜷_')
    }

附錄：微信js-sdk說明文檔

jquery中使用sdk

1.在需要調(diào)用JS接口的頁面引入如下JS文件客税，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.4.0.js

2.jssdk的簽名權(quán)限,這個(gè)權(quán)限是由后臺(tái)提供的,前端只需要把簽名權(quán)限注入到wx.config中就可以了

//初始化jssdk
    var init = function(data){
        //通過config接口注入權(quán)限驗(yàn)證配置
        wx.config({
            debug: false, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)唁奢，可以在pc端打開霎挟，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印麻掸。
            appId: data.app_id, // 必填酥夭，公眾號(hào)的唯一標(biāo)識(shí)
            timestamp: data.timestamp, // 必填，生成簽名的時(shí)間戳
            nonceStr: data.nonceStr, // 必填，生成簽名的隨機(jī)串
            signature: data.signature,// 必填熬北，簽名疙描，見附錄1
            jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
        });
        //通過ready接口處理成功驗(yàn)證
        wx.ready(function(){
            //分享到朋友圈
            
//          var local_url = $.getStorge('auth_url');
//          if(!local_url){
//              local_url = window.location.href;
//          }
            var local_url = window.location.href;
           
            console.log(local_url);
            wx.onMenuShareTimeline({
                title: desc+'--'+title, // 分享標(biāo)題
                link: local_url, // 分享鏈接讶隐，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                imgUrl: 'http://jssdk.cloud-cy.com/wechatShopServer/'+logo, // 分享圖標(biāo)
                success: function () { 
                    // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
                },
                cancel: function () { 
                    // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                }
            });
            //分享給朋友
            wx.onMenuShareAppMessage({
                title: title, // 分享標(biāo)題
                desc: desc, // 分享描述
                link: local_url, // 分享鏈接起胰，該鏈接域名或路徑必須與當(dāng)前頁面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
                imgUrl: 'http://jssdk.cloud-cy.com/wechatShopServer/'+logo, // 分享圖標(biāo)
                type: 'link', // 分享類型,music、video或link巫延，不填默認(rèn)為link
                dataUrl: '', // 如果type是music或video效五，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
                success: function () { 
                    // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
                },
                cancel: function () { 
                    // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
                }
            });
        });
    }
    //獲取jssdk配置
    $.ajax({
        type:"get",
        url:web+"/Jssdk",
        data:{
            url:window.location.href,
            url_code:account
        },
        dataType:"json",
        success:function(data,textStatus){console.log(data);
            if(data.code==200){
                init(data.data);
            }else{
//              alert("連接失敗炉峰，請(qǐng)稍后再試或聯(lián)系管理員");
            }

        }
    });