一, 企業微信公衆号注冊 登入
https://work.weixin.qq.com/
手機号驗證碼注冊 填寫資料進入企業微信背景界面(注冊步驟簡單 詳細略過)
二,企業微信背景應用建立
按上圖建立應用 填寫各種資訊後進入下一步(下圖應用的詳情頁面)
在上圖應用首頁位置點選設定應用要關聯的頁面網頁/小程式(這裡以網頁設定為介紹)
如我設定首頁http:abc.com:8000為應用首頁,即在企業微信app裡點選此應用進入的是這個頁面
并在應用詳情頁下方設定網頁可信域名等接口配置
上述操作即已經建立完企業微信應用 并在手機企業微信app上點選此應用跳轉的是配置的界面; 但是前端下面的流程開發也需要本地配置下
三,前端本地開發環境配置
首先開發企業微信我們使用的是微信公衆号開發工具
其次前端開發微信企業應用其實也是根據回調位址擷取token等的一系列操作完成頁面加載(這裡就不詳述擷取原理具體看官方文檔 隻描述操作配置)
這裡的回調位址是回調到哪呢,是我們剛才配置的那個首頁位址http://abc.com:8000
那是由哪個位址回調到http://abc.com:8000的呢, 是我們放到微信開發者工具上的這個位址 輸入後開發者工具會自動回調到這個位址, 下面就看下放到開發者工具上這個位址怎麼配置的
打開微信開發者工具選擇公衆号網頁進入 如下頁面
這裡的url位址即根據我們上述配置的應用首頁和企業微信id拼接的位址
如:https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxx&redirect_uri=xxxx&response_type=code&scope=snsapi_base&state=STATE
appid: 是在企業微信背景 =》我的企業頁面下面企業ID; 必須
redirect_uri:上述我們配置的http://abc.com:8000; 必須
response_type:傳回類型,此時固定為:code; 必須
state:重定向後會帶上state參數,企業可以填寫a-zA-Z0-9的參數值,長度不可超過128個位元組; 不必須
還有一些關于其他字段的可以帶的具體參考官網
輸入上述位址到開發者工具上後會發現開發者工具自動回調到http://abc.com:8000?code=xxxx,
這個位址就是我們配置的首頁位址并後面帶上code, 我們就可以根據這個code拿到背景的登入token了進行其他的頁面操作
四,前端開發環境本地代理
上述操作是跳到我們配置的首頁位址了,但是我們不能每次改些檔案都要放到伺服器吧,這需要把本地代理配置一下
這樣我們每次通路的這個首頁位址就是我們開發環境打開的位址,
那有的說了 我在剛才的首頁位址配置上我本地的位址不就行了,這個企業微信是不允許的 他是正規的外網,不能配置我們本地需要一個合法的域名位址
很簡單 在host檔案下加上
127.0.0.1 abc.com
然後在打開fiddler依次勾選到下圖示
然後重新開機fiddler和微信開發者工具, 這時跳轉的位址http://abc.com:8000, 我們修改 本地檔案 就可以及時看到。