1.开发环境的服务地址 | 开发者文档中心

# 1.开发环境的服务地址

# 1.1. 代理设置

关于http接口请求，在开发环节中，接口调试往往会有跨域限制（服务端解除限制情况下除外），解除跨域限制的许多方案中，前端都会在客户端起一个本地代理服务来解除跨域限制。在hatom2-cli脚手架中也有配置代理服务的配置，在build/webpack.dev.conf.js文件中，找到dev下proxy配置 (opens new window)：

    proxy: {
      '/webapi/hatom': {
        target: 'https://openweb.hikyun.com',
        changeOrigin: true,
        ws: true,
        secure: false
      }
    }

配置后，执行npm run dev重启后生效，所有的http请求中，拦截url中带有“/webapi/hatom”的请求，转发到“https://openweb.hikyun.com/webapi/hatom”这个服务地址中。

# 1.2. 协议https 与 http的切换

在脚手架默认启动为https, 按照浏览器的安全策略，高级协议https中不能链接低级协议http。当后端调试接口为http协议，这种情况下为了调试方便，可切换关于https 与 http的切换。 build/webpack.dev.conf.js中找到devServer

  devServer: {
    https: true,
    overlay: {
      warnings: true,
      errors: true
    },
    open: false,
    watchOptions: {
      aggregateTimeout: 300,
      poll: 1000
    },
    port: 7777,
    proxy: {}
  }

修改https: false, 重启后，即可切换https为http

提示

修改后，项目重启生效

# 2.打包后的服务地址

打包后的服务地分为两种情况：

使用Hitom平台的isee/ifar (opens new window)/云曜登录组件
不使用平台任何登录组件，自定义H5登录页面

# 2.1.使用Hitom平台的isee/ifar/云曜登录组件

使用登录组件之后，打包之后的应用APP，安装打开之后会默认进入原生的登录页面，登录页登录会输入用户名密码以及登录地址，登录验证之后会创建一个webView来加载前端页面，hatom插件的接口获取当前的的登录信息以及服务地址

获取服务地址请参考平台组件说明或参考示例

在https.js中

const _this = Vue.prototype;

/**
 * 设置网关校验参数, 此处为了模拟多个参数，分开两个promise写
 */
const setProxy = async () => {
    const p1 = new Promise((resolve, reject) => {
          _this.$hatom.rootInfo.getRootInfo((res) => {
            const resMsg  = JSON.parse(res.message);
            const Authorization = _this.$isMobile() ? resMsg.token : "token";
            resolve(Authorization);
          })
        });
    });
    const p2 = new Promise((resolve, reject) => {
         _this.$hatom.rootInfo.getRootInfo((res) => {
            const resMsg  = JSON.parse(res.message);
            const baseUrl  = _this.$isMobile() ? resMsg.address : "";
            resolve(baseUrl);
          })
    });
    const r = await Promise.all([p1, p2]);
    return {
        token: r[0],
        baseUrl: r[1]
    };
};
/**
 * 添加请求拦截器
 */
request.interceptors.request.use(
    async (req) => {
      const proxyHeader = await setProxy();
      req.headers.token = proxyHeader.token;
      if (_this.$isMobile()) {
          req.baseURL = process.env.NODE_ENV === "development"
            ? ""
            : proxyHeader.baseUrl;
      }
      return req;
    },
    (error) => Promise.reject(error)
);

# 2.2.自定义登录

不使用平台任何登录组件，自定义登录页面，打包之后意味着APP的服务地址是不变的，需要在工程目录下找到config/constant.js文件, 配置SERVER字段的服务地址

export default {
  SHEIGHT: screen.height,
  SWIDTH: screen.width,
  STATUS_BAR_HEIGHT: 15,
  BOTTOM_SAFE_AREA_HEIGHT: 10,
  SERVER: 'https://hitom.hikyun.com'
}

在http.js中, 设置baseUrl

/** 添加请求拦截器 */
request.interceptors.request.use(
  (req) => {
    // eslint-disable-next-line no-prototype-builtins
    if (Vue.prototype.hasOwnProperty('$isMobile')) {
      req.baseURL =
        process.env.NODE_ENV === 'development'
          ? ""
          : Vue.prototype.$constant.SERVER
    }
    return req
  },
  (error) => Promise.reject(error)
)

# 3 关于静态资源的引入

在开发中，往往会引入第三方的静态资源：

1、引入第三方js文件

2、向外提供静态资源图片

# 3.1.引入第三方js文件

大多数情况下引入第三方js文件,import都能导入到项目工程中，但某种情况下需要用script标签引入。使用script标签以内的时候就要注意了,由于脚手架打包的html文件时自动生成的，是不允许在html中添加script标签的。

在脚手架配置文件build//webpack.dev.conf.js中，找到plugins下面

    new CopyPlugin({
      patterns: [
        { from: path.join(rootPath, "src/config/webApp.json"), to: "" },
        { from: path.join(rootPath, "src/corejs/pageRouter.json"), to: "" },
        { from: path.join(rootPath, "src/components/utils/sdk.js"), to: "" }, // 添加
      ]
    }),

在入口文件main.js中添加

    const script = document.createElement('script')
    script.setAttribute('type', 'text/javascript')
    script.setAttribute('src', 'sdk.js')
    document.getElementsByTagName('head')[0].appendChild(script)

当外部资源初始化需要在vue实例化之前，为保证js加载完全

  const initScript = (url, onload, onerror) => {
    const script = document.createElement('script')
    script.src = url
    script.onload = onload
    script.onerror = onerror
    document.head.appendChild(script)
  }

  const app = {
    init: function () {
      /** 是否在开发环境下，开启调试模式 */
      process.env.NODE_ENV === 'development' && new Vconsole()
      initScript('sdk.js', ()=>{
        this.onReady()
      }, (err)=>{
        console.log(err)
      })
    },
    onReady: () => new Vue({
      router, store, render: (h) => h(App)
    }).$mount('#app')
  }

# 3.2.向外提供静态资源路径

在webApp.json中配置菜单图标的时候，需要向APP原生端提供菜单图标的加载路径，同样将静态资源的图标放在assets/images/menu目录下，同样在脚手架配置文件中在脚手架配置文件build//webpack.dev.conf.js中，找到plugins下面

    new CopyPlugin({
      patterns: [
        { from: path.join(rootPath, "src/config/webApp.json"), to: "" },
        { from: path.join(rootPath, "src/corejs/pageRouter.json"), to: "" },
        { from: path.join(rootPath, "src/assets/images/menu"), to: "" }, // 添加
      ]
    }),

在webApp.json中配置

{
    "h5packCode": "demo",
    "versionName": "1.0.0",
    ...
    "componentId": [
        "componentId1",
        "componentId2"
    ],
    "menuList": [
      {
        "menuCode": 'openDoor',
        "menuName": {
          "zh": "一键开门",
          "en": "openDoor",
        },
        "menuIcon": "icon.png", // 菜单的图标 (96*96 px)
        "menuPath": "index.html#/openDoor"
      },
    ]
}

# 4.配置postcss-pxtorem

# 4.1.安装插件: postcss-loader、postcss-pxtorem

npm install --save-dev postcss-loader postcss
npm install postcss postcss-pxtorem --save-dev

# 4.2.配置插件

项目根目录下创建：.postcssrc.js

  module.exports = {
      plugins: [
          require("autoprefixer"),
          ["postcss-pxtorem",
          {
              rootValue: 16,
              unitPrecision: 5,
              propList: ['*'],
              selectorBlackList: [],
              replace: true,
              mediaQuery: false,
              minPixelValue: 0,
              exclude: /node_modules/i
          }]
      ]
  }

其他详细配置请参考【文档 (opens new window)】

# 5.打包之后成果物

成果物目录结构:

├── index.html ··································· index.html
├── logo.ico ····································· logo.ico
├── pageRouter.json ······························ hatom相关配置
├── static
│   ├── css
│   │   └── main_792f30f7dda223670a32.css ········ css资源
│   └── js
│       ├── main_3161817b.bundle.js ·············· js资源
└── webApp.json ·································· app配置

hatom默认将成果物生成名为webapp_ + webApp.h5packCode的zip文件，将zip包上传平台译，其中webapp_为保留关键字，在编译过程中会使用到，切勿修改。实际上，如果不使用hatom官方脚手架，只需要保持相关的目录结构和配置文件一致也可以正常运行。

← 常见使用问题 Hitom平台视频教程 (opens new window) →