微信開發(fā)者文檔

網(wǎng)頁授權(quán)snsapi_base(靜默)和snsapi_userinfo(手動)的區(qū)別

1、snsapi_base：用戶無感知招拙，用來獲取用戶openid唧瘾，靜默授權(quán)自動跳轉(zhuǎn)到回調(diào)頁面
2、snsapi_userinfo：需要用戶手動同意迫像，用來獲取用戶基本信息劈愚，同意后，無需關(guān)注公眾號就可以獲取到用戶的基本信息
3闻妓、特殊場景下的靜默授權(quán)
已關(guān)注公眾號的用戶，用戶從公眾號的會話或自定義菜單進(jìn)入本公眾號的網(wǎng)頁授權(quán)掠械，即使是snsapi_userinfo也為靜默

網(wǎng)頁授權(quán)access_token和普通access_tokende的區(qū)別

1由缆、用戶授權(quán)給公眾號之后，公眾號可以獲取到一個網(wǎng)頁授權(quán)特有的接口憑證（網(wǎng)頁授權(quán)access_token）猾蒂，則可以進(jìn)行授權(quán)后的接口調(diào)用均唉，如用戶基本信息
2、其他微信接口肚菠，需要通過基礎(chǔ)支持中的“獲取access_token”接口來獲取到的普通access_token調(diào)用舔箭。

授權(quán)流程和參數(shù)開發(fā)文檔都有，就不粘貼復(fù)制啦～這里直接粘貼我的前端代碼

安裝 weixin-js-sdk

npm install weixin-js-sdk

網(wǎng)頁授權(quán)（需要授權(quán)的頁面代碼）

import { wxconfig,wxPay } from '@/assets/api/wxconfig'  //這是我的微信配置文件

 mounted(){
    this.init()
  },
  methods:{
    init() {
      if(!localStorage.getItem('code')){//因為進(jìn)來頁面就進(jìn)行授權(quán)，有一個值去判斷是不是去跳轉(zhuǎn)
        axios.get('/openwxurl',{params: {id:1}}).then(res => {
            if(res.code === 10000){
              localStorage.setItem('code',true)
              location.href = res.data.url
            }
        })
      } else{
        this.sendCode() //有就直接調(diào)用發(fā)送code換取access_token 的方法
      }
    },
    sendCode(){
      if(!localStorage.getItem('openId')){ 
        //getUrlItem()是我寫的一個獲取url參數(shù)的方法
        axios.get('/getAccessToken',{params: {code: getUrlItem('code')}}).then(res => {
            if(res.code === 10000){
               localStorage.setItem('openId',res.data.openId)
              this.getwxconfig()
            }
        })
      } else{
        this.getwxconfig()
      }
    //**靜默授權(quán)做到這一步流程結(jié)束层扶，我們的項目是靜默授權(quán)箫章，所以授權(quán)就寫到這里啦～～～～**
    },
    getwxconfig(){ //這里去調(diào)用微信config配置需要的信息
      axios.get('/getWxconfig',{params: {url: location.href.split('#')[0]}}).then(res => {
        if(res.code === 10000){
          wxconfig(res.data) //調(diào)用微信的配置
        }
      })
    },
    submitPay(){//獲取調(diào)用支付接口的參數(shù)
      axios.post('/getPay',this.form).then(res => {
        if(res.code === 10000) {
          wxPay(res.data)//調(diào)用微信支付
        }
      })
    }

JSSDK調(diào)用（我的配置文件wxconfig.js）

import wx from 'weixin-js-sdk'

export const wxconfig = ({ timestamp, nonceStr, signature, appId  }) => {
    wx.config({
        debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)镜会，可以在pc端打開檬寂，參數(shù)信息會通過log打出，僅在pc端時才會打印戳表。
        appId, // 必填桶至，公眾號的唯一標(biāo)識
        timestamp, // 必填，生成簽名的時間戳
        nonceStr,// 必填匾旭，生成簽名的隨機串
        signature,// 必填镣屹，簽名
        jsApiList: [
            'chooseWXPay'
        ] // 必填，需要使用的JS接口列表
    });
    wx.ready(function(){
        // config信息驗證后會執(zhí)行ready方法价涝，所有接口調(diào)用都必須在config接口獲得結(jié)果之后女蜈，config是一個客戶端的異步操作，所以如果需要在頁面加載時就調(diào)用相關(guān)接口飒泻，則須把相關(guān)接口放在ready函數(shù)中調(diào)用來確保正確執(zhí)行鞭光。對于用戶觸發(fā)時才調(diào)用的接口，則可以直接調(diào)用泞遗，不需要放在ready函數(shù)中惰许。
      });
    wx.error(function(res){
        console.log(res)
        // config信息驗證失敗會執(zhí)行error函數(shù)，如簽名過期導(dǎo)致驗證失敗史辙，具體錯誤信息可以打開config的debug模式查看汹买，也可以在返回的res參數(shù)中查看，對于SPA可以在這里更新簽名聊倔。
      });
}
export const wxPay = ({ timestamp, nonceStr, packages,signType ,paySign}) => {
    wx.chooseWXPay({
        timestamp, // 支付簽名時間戳晦毙，注意微信jssdk中的所有使用timestamp字段均為小寫。但最新版的支付后臺生成簽名使用的timeStamp字段名需大寫其中的S字符
        nonceStr, // 支付簽名隨機串耙蔑，不長于 32 位
        package: packages, // 統(tǒng)一支付接口返回的prepay_id參數(shù)值见妒，提交格式如：prepay_id=\*\*\*）
        signType, // 簽名方式，默認(rèn)為'SHA1'甸陌，使用新版支付需傳入'MD5'
        paySign, // 支付簽名
        success: function (res) {
          console.log(res)
          // 支付成功后的回調(diào)函數(shù)
        }
      });
}

以上须揣，這兩天的成果，由于數(shù)據(jù)都是后臺獲取的钱豁，主要的難度在后臺耻卡，尤其是簽名很難搞，熟讀文檔就可以啦～～