天天看點

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

一, 企業微信公衆号注冊 登入

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

繼續閱讀