1. 程式人生 > >vue開發微信公眾號小技巧(易除錯環境)

vue開發微信公眾號小技巧(易除錯環境)

本主要對 在開發微信公眾號時,遇到的一些問題進行總結 使用(vue)哦~

除錯微信公眾號

大家在本地環境開發的時候,修改樣式,及除錯介面一遍又一遍的在微信開發者工具上開啟,因為在我們本地瀏覽器是打不開微信的頁面的,或者每次更改一個細節就發一遍測試環境,非常耗時影響開發,這時~~~~

小技巧來嘍

先在全域性變數中將我們的環境分為三種

  • dev 本地 bing bing
  • test 測試
  • prod 生產

將我們原本dev的環境更改為test環境, 在我們本地開發時我們使用的還是測試的介面

const Const = {
    Runtime: 'prod' // 設定當前執行的環境
}
// 全域性變數定義
let appConfig = {
    wxAppId: 'xxxxx' // 如appId
} // 變數內可以填入一些其他的全域性變數
switch (Const.Runtime) {
    case: 'dev' // 本地開發環境
        appConfig = {
            Url: // 測試地址
        }
    break
    case: 'test' // 測試環境
        appConfig = {
            Url: // 測試地址
        }
    break
    case: 'prod' // 生產環境
        appConfig = {
            Url: // 線上地址
        }
    break
}

環境已經配置好了

在我們進入微信公眾號頁面時 判斷當前全域性變數的值為dev環境時

// 讓使用者手動輸入token值
prompt('請輸入測試使用者的TOKEN:', '')

(插播)初次步入公眾號的小夥伴可能不理解token 說句大白話就是使用者的唯一標

因為我們在本地環境走的也是測試的介面,

所以在這裡輸入測試的使用者的唯一標識

那麼就可以順利在本地開發和除錯公眾號嘍~

(ps: 微信支付就不要妄想了!)

嗖嗖嗖~ 對應文章​​​​​​​