一、移动端介绍

获取源码

• 移动端扫码和配网说明
• 移动端更多细节 查看商业版源码

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  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    client_max_body_size 10m;

    gzip on;
    gzip_min_length  1k;
    gzip_buffers     16 64K;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    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 localhost;
    #     location / {
    #         rewrite ^(.*) https://$server_name$1 permanent;
    #     }
    # }

    server {
        listen      80;

        # SSL 默认访问端口号为443
        listen 443 ssl;
        server_name  localhost;
        charset utf-8;

        # 证书文件的路径
        ssl_certificate /usr/share/nginx/ssl/fastbee.crt;
        # 私钥文件的路径
        ssl_certificate_key /usr/share/nginx/ssl/fastbee.key;
        ssl_session_timeout 10m;
        # 请按照以下协议配置       
        ssl_protocols TLSv1.2 TLSv1.3; 
        # 请按照以下套件配置，配置加密套件，写法遵循openssl 标准       
        ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
        ssl_prefer_server_ciphers on;

        # 前端
        location / {
            root   /usr/share/nginx/html;
            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/;
        }

        # wss连接代理到ws
        location /mqtt {
            proxy_pass http://localhost:8083/mqtt;
            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;
        }
    }
}