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


一, 企業微信公眾號注冊 登錄

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 完結

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM