记录一次企业内部应用-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及域名

https://csmobile.alipay.com/detailSolution.htm?knowledgeType=1&scene=dd_gdwt&questionId=201602058403&spm=a311a.9588098.0.0

开发者平台设置多管理员

项目开发过程中，经常需要更改配置，设置多个管理员方便开发调试，方法引至钉钉
只有企业主管理员可以为企业内部员工添加开发者账号，添加账号途径如下：

1. 主管理员登录钉钉管理后台，点击设置，点击子管理员
2. 点击添加，并选择需要授予权限的成员，以及具体的权限；
   注意：（1）对于通讯录权限等，请按需授予；（2）如果只需要开发者权限，仅勾选开发者权限即可
   
3. 被授予的成员，可以登录开发者后台，首次需要设置密码

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"/>