一、移动端介绍

1. 项目使用 uniapp 开发，适配微信小程序、安卓、IOS 和 H5，其他平台兼容但未经测试。UI 框架使用 uView2.0。开发工具为 Hbuilder3.3 以上版本。
2. 组件使用 easycom 模式，只要组件安装在项目的 components 目录下或 uni_modules 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

安卓/Android	苹果/IOS	微信小程序	网页/H5	Vue2.0
√	√	√	√	√

二、项目目录

├─apis                  // 接口管理
│  ├─modules            // api模块化目录
│  │  └─device.js       // 设备接口地址
│  ├─http.api.js        // 接口定义文件
│  └─http.interceptor   // 拦截器
├─common                // 公共文件
│  ├─mqttTool           // mqtt工具
│  ├─extend             // 扩展原型方法
│  ├─filters            // 全局过滤器
│  └─tools              // 全局公共方法
├─components            // 项目组件库，组件放置这里，其他页面可直接使用
│  ├─cl-test            // easycom测试组件
│  ├─cl-icon            // iconfont图标组件
│  ├─deviceMonitor      // 设备实时监测组件
│  └─other...           // 使用的其他组件等等
├─pages                 // 页面目录
│  ├─public             // 公共页面
│  └─tarbar             // 底部导航栏页面
│      ├─home           // 首页的所有页面
│      ├─scene          // 场景联动页面
│      ├─trend          // 新闻动态页面
│      └─user           // 个人中心页面
├─static                // 图片目录
├─store                 // vuex
│  ├─$u.mixin           // store全局混入方法
│  └─index              // vuex 组件全局状态管理
├─uni_modules           // 插件市场插件目录
│  └─uview-ui           // uview-ui
├─env.config.js         // 接口地址和mqtt地址配置文件
├─mainfest.json         // 各个平台的配置信息

三、Nginx 参考配置

提示

• 小程序只能使用 Https 协议，需要申请证书并上传到服务器
• Emqx 的 wss 连接数较小，web 端和移动端把 wss 连接代理到 ws

worker_processes auto;
events {
        worker_connections 1024;
        multi_accept on;
    }

http {
    include         mime.types;
    default_type    application/octet-stream;
    sendfile        on;
    keepalive_timeout 60;

    #GZIP压缩
    gzip on;
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml;
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";

    # Http跳转Https
    server {
        listen 80;
        server_name domain.com;
        location / {
            rewrite ^(.*) https://$server_name$1 permanent;
        }
    }

    server {
        # 侦听443端口
        listen 443 ssl;
        # 定义访问域名
        server_name domain.com;
        #证书文件名称
        ssl_certificate domain.com_bundle.crt;
        #私钥文件名称
        ssl_certificate_key domain.com.key;

        #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
        #error_page 404/404.html;
        #HTTP_TO_HTTPS_START
        if ($server_port !~ 443){
            rewrite ^(/.*)$ https://$host$1 permanent;
        }
        ssl_session_timeout 10m;
        #请按照以下协议配置
        ssl_protocols TLSv1.2 TLSv1.3;
        #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
        ssl_prefer_server_ciphers on;

        # web端
        location / {
            root   /var/data/vue;  # 前端打包文件夹在服务器中的路径
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }
        # 服务端接口
        location /prod-api/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8080/;  # 后端接口地址，默认8080端口
        }
        # emqx接口
        location /api/v4/{
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8081/api/v4/;  # Emqx的接口地址，默认8081端口
        }
        # wss连接
        location /mqtt {
            proxy_pass http://localhost:8083/mqtt; # mqtt:wss连接代理到mqtt:ws
            proxy_read_timeout 60s;
            proxy_set_header Host $host;
            proxy_set_header X-Real_IP $remote_addr;
            proxy_set_header X-Forwarded-for $remote_addr;
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'Upgrade';
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

}