github上开源iot物联网云平台thingsboard项目,将前段打包成app的方法研究

此框架已实现前后端分离,可以直接把前段编译后,打包成app来使用,支持android 和ios。

不是打web的url,这样访问很慢,要下载的资源很多。
是把前段的js,css,html等资源放在app中,只访问远程api,因为资源都在手机本地,加载会快点。

既然要让本地资源访问远程服务,就要修改angular访问api的路径问题。

  1. 打开这个文件ui\src\app\global-interceptor.service.js
    这是angularjs的全局拦截器,ajax请求响应 共同部分在这里 。
  2. 默认的ajax请求,访问如“/api/**”这样的路径,是会去找当前页面说在主机的路径。实际访问的完整路径应该是"http://192.168.1.222:8080/api/**"  app里面,js运行在本地,而服务url在远程。按默认的就无法访问服务了
  3. global-interceptor.service.js找到这里
     if (config.url.startsWith('/api/'))

    {
        onfig.url=CUSTOMHOST+config.url;

    }
这一段就是我加的。CUSTOMHOST 是我自定义的主机+端口

github上开源iot物联网云平台thingsboard项目,将前段打包成app的方法研究_第1张图片

写你实际服务器就可以了var CUSTOMHOST=" http://192.168.1.101:8888";

  1. 再把下面response的url判断改下就ok了。这个文件就这么多,完成。

github上开源iot物联网云平台thingsboard项目,将前段打包成app的方法研究_第2张图片


4、websocket服务器地址同样需要修改

\ui\src\app\api\telemetry-websocket.service.js

 

完成以上配置后,把前段用webpack打包后,生成html,js 等文件,放到app中,打包即可。

需要懂app打包技术。

转载于:https://my.oschina.net/xxjin/blog/1829269

你可能感兴趣的:(github上开源iot物联网云平台thingsboard项目,将前段打包成app的方法研究)