記錄一次企業內部應用-H5微應用開發
- vue-cli3
- vue-2.x
創建微應用並成為開發者
內網穿透
https://ding-doc.dingtalk.com/doc#/kn6zg7/hb7000
這里我配置的映射域名是fanlinqiang,本地vue工程起的端口是8081,則執行：
./ding -config=./ding.cfg -subdomain=fanlinqiang 8081
瀏覽器訪問：http://fanlinqiang.vaiwan.com/，能正常訪問工程頁面則表示穿透代理成功，
此時若已授權dd客戶端用戶，配置開發平台內配置H5微應用基礎信息:應用首頁地址\PC端首頁地址為http://fanlinqiang.vaiwan.com/
在本機打開dd客戶端訪問：工作=》對應的微應用，頁面也是正常打開
遇到的問題
vue-cli搭建的環境，訪問時顯示：Invalid Host header
解決方案見：https://blog.csdn.net/Cookysurongbin/article/details/86077241
原因：因為新版的webpack-dev-server出於安全考慮，默認檢查hostname，如果hostname不是配置內的就不能訪問。
即在vue.config.js下：
...
devServer: {
disableHostCheck: true, // 增加
...
在pc端瀏覽器直接調試頁面時
index.js?022d:1 Uncaught (in promise) Error: Do not support the current environment：notInDingTalk
at e.bridgeInitFn (index.js?022d:1)
at e.invokeAPI (index.js?022d:1)
at Object.requestAuthCode$ [as requestAuthCode] (requestAuthCode.js?09df:1)
at VueComponent.created (index.vue?6ced:29)
at invokeWithErrorHandling (vue.runtime.esm.js?6e6d:1854)
at callHook (vue.runtime.esm.js?6e6d:4213)
at VueComponent.Vue._init (vue.runtime.esm.js?6e6d:5002)
at new VueComponent (vue.runtime.esm.js?6e6d:5148)
at createComponentInstanceForVnode (vue.runtime.esm.js?6e6d:3283)
at init (vue.runtime.esm.js?6e6d:3114)
解決方案：
在釘釘官方提供的dingtalk-jsapi源碼中dingtalk-jsapi/lib/packages/dingtalk-javascript-env/index.d.ts
中有定義：
declare const env: {
isDingTalk: boolean;
isWebiOS: boolean;
isWebAndroid: boolean;
isWeexiOS: boolean;
isWeexAndroid: boolean;
isDingTalkPCMac: boolean;
isDingTalkPCWeb: boolean;
isDingTalkPCWindows: boolean;
isDingTalkPC: boolean;
runtime: any;
framework: any;
platform: string;
version: any;
isWeex: boolean;
};
export default env;
可以通過這些值來判定當前的環境，在dd.ready前加判定
import * as dd from 'dingtalk-jsapi';
... ...
if (dd.env.platform !== 'notInDingTalk') { // 如果在釘釘環境中
dd.ready(function () {
dd.runtime.permission.requestAuthCode({
corpId,
onSuccess ({ code }) {
if (code) {
vm.getUserInfo({ code });
} else {
vm.auth.loading = false;
}
},
onFail () {
vm.auth.loading = false;
}
});
});
}
釘釘白名單IP及域名
開發者平台設置多管理員
項目開發過程中，經常需要更改配置，設置多個管理員方便開發調試，方法引至釘釘
只有企業主管理員可以為企業內部員工添加開發者賬號，添加賬號途徑如下：
- 主管理員登錄釘釘管理后台，點擊設置，點擊子管理員
- 點擊添加，並選擇需要授予權限的成員，以及具體的權限；
注意：（1）對於通訊錄權限等，請按需授予；（2）如果只需要開發者權限，僅勾選開發者權限即可
- 被授予的成員，可以登錄開發者后台，首次需要設置密碼
h5頁面meta設置
- 字符編碼
<meta charset="utf-8">
- 設置瀏覽器的兼容模式（讓IE使用最新的瀏覽器渲染）
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- 視口
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
作用：在移動瀏覽器中，當頁面寬度超出設備，瀏覽器內部虛擬的一個頁面容器，將頁面容器縮放到設備那么大展示；
視口的寬度可以通過meta標簽設置；
此屬性為移動端頁面視口設置；
width：視口的寬度，width=device-width：寬度是設備的寬度
initial-scale：初始化縮放，- initial-scale=1.0：不縮放
user-scalable：是否允許用戶自行縮放，取值0或1，yes或no
minimum-scale：最小縮放
maximum-scale：最大縮放
一般設置了不允許縮放，就沒必要設置最大最小縮放了。
- Cache-Control頭域
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
Cache-Control指定請求和響應遵循的緩存機制。在請求消息或響應消息中設置Cache-Control並不會修改另一個消息處理過程中的緩存處理過程。請求時的緩存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，響應消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各個消息中的指令含義如下,
no-cache指示請求或響應消息不能緩存
no-store用於防止重要的信息被無意的發布。在請求消息中發送將使得請求和響應消息都不使用緩存
must-revalidate：告訴瀏覽器、緩存服務器，本地副本過期前，可以使用本地副本；本地副本一旦過期，必須去源服務器進行有效性校驗。
no-siteapp：禁用轉碼，例如通過百度手機打開網頁時，百度可能會對你的網頁進行轉碼
- 是用於設定禁止瀏覽器從本地機的緩存中調閱頁面內容，設定后一旦離開網頁就無法從Cache中再調出
<meta http-equiv="Pragma" content="no-cache"/>
- 禁止將頁面中的一連串數字識別為電話號碼、郵箱、地圖。默認為
yes
<meta name="format-detection" content="telephone=no,email=no,adress=no"/>
- 刪除默認的蘋果工具欄和菜單欄，默認顯示。
<meta content="no" name="apple-mobile-web-app-capable"/>
- 控制狀態欄顯示樣式，ios原生瀏覽器添加到主屏后設置狀態欄的背景顏色
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>