一、移动端介绍

获取源码

参与开发或者是赞助项目，可以获取最新源码。详情

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

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

微信扫码查看小程序

二、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;
        }
    }

}

三、项目目录

├─apis                  // 接口管理
│  ├─modules            // api模块化目录
│  │  └─device.js       // 设备接口地址
│  ├─http.api.js        // 接口定义文件
│  └─http.interceptor   // 拦截器
├─common                // 公共文件
│  ├─config             // 环境配置 (设置baseurl等)
│  ├─extend             // 扩展原型方法
│  ├─filters            // 全局过滤器
│  └─tools              // 全局公共方法
├─components            // 项目组件库，组件放置这里，其他页面可直接使用
│  ├─cl-test            // easycom测试组件
│  └─cl-icon            // iconfont图标组件
├─pages                 // 页面目录
│  ├─public             // 公共页面
│  └─tarbar             // 底部导航栏页面
├─static                // 图片目录
├─store                 // vuex
│  ├─$u.mixin           // store全局混入方法
│  └─index              // vuex 组件全局状态管理
├─uni_modules           // 插件市场插件目录
│  └─uview-ui           // uview-ui