vue에서 weixin-js-sdk를 사용하는 흔한 사용 방법

3613 단어 vueweixin-js-sdk
링크:https://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6
1. 종속 패키지 가져오기

npm install weixin-js-sdk
2. 위챗 브라우저에서
env.js

<script>
var ua = navigator.userAgent.toLowerCase();
var isWeixin = ua.indexOf('micromessenger') != -1;
var isAndroid = ua.indexOf('android') != -1;
var isIos = (ua.indexOf('iphone') != -1) || (ua.indexOf('ipad') != -1);
if(!isWeixin) {
 document.head.innerHTML = '<title> , </title><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"><link rel="stylesheet" type="text/css" href="https://res.wx.qq.com/open/libs/weui/0.4.1/weui.css" rel="external nofollow" >';
 document.body.innerHTML = '<div class="weui_msg"><div class="weui_icon_area"><i class="weui_icon_info weui_icon_msg"></i></div><div class="weui_text_area"><h4 class="weui_msg_title"> </h4></div></div>';
} 
메인js에서 참조:

import env from "./env";// 
위챗 로그인, 코드를 통해 openid를 바꾸고 시작 페이지에서 이 방법을 사용합니다.

<script>
methods:{
 //  
    wxLogin() {
      var that = this;
      axios
        .get("/common/loginAuth")
        .then(function(res) {
          console.log(" ", res.data);
          window.location.href = res.data;// 
        })
        .catch(function(error) {});
    },
// 
    postCode(res) {
      var that = this;
      axios
        .post("/common/getUserInfo", {
          code: res
        })
        .then(function(res) {
          cookie.set("openid", res.data.openid);//code openid 
        })
        .catch(function(error) {
          console.log(error);
        });
    }},
created() {
    var r = window.location.href;// , 
    // , code, postCode() openid, wxLogin() 
    if (r.indexOf("?") != -1) {
      r = r.split("?");
      r = r[1].split("&");
      r = r[0].split("=");
      r = r[1];
    } else {
      this.wxLogin();
    }
    if (r) {
      this.postCode(r);
    } else {
      this.wxLogin();
    }
  },
</script>
3. 프런트엔드 페이지 사용

import wx from 'weixin-js-sdk'
this.axios({
  method: 'post',
  url: 'url',
  data:{ url:location.href.split('#')[0] } // url , # 
}).then((res)=>{
  wx.config({
    debug: true, //  ,
    appId: res.appId, //  , , corpid
    timestamp: res.timestamp, //  , 
    nonceStr: res.nonceStr, //  , 
    signature: res.signature,//  , , 1
    jsApiList: ['scanQRCode'] //  , JS , JS 
  });
})
vue에서 weixin-js-sdk를 사용하는 흔한 사용 방법에 대한 자세한 설명은 여기 있습니다. 더 많은 vue weixin-js-sdk 내용은 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!

좋은 웹페이지 즐겨찾기