1. 程式人生 > 其它 >前端企業微信應用開發流程

前端企業微信應用開發流程

一, 企業微信公眾號註冊 登入

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, 我們修改 本地檔案 就可以及時看到。

nice 完結