更新记录

1.0.14（2024-02-05）

完善个人中心

1.0.13（2024-01-11）

业务侧配置uniapp easycom规范，插件依赖uni-ui扩展组件

1.0.12（2024-01-08）

集成uniapp内置公共组件

平台兼容性

jde-mobile-base移动端基础框架插件

1.插件说明

本插件是依据ruoyi-uniapp-plus项目升级优化而来，地址https://github.com/wangzhongkui/ruoyi-uniapp-plus 和若依后台服务无缝对接，封装用户中心相关接口和权限能力。

2.接入方式

2.1 插件集成能力

• 本插件集成了uniapp的扩展组件，使用全局动态注册方式，业务在使用uniapp的扩展组件时，不需要重复引入uniapp扩展组件

封装了接口请求，权限，存储，上传文件等API

--jde-mobile-base  
----utils
------request.ts
------storage.ts
------upload.ts
------permission.js

• 封装了通用plugins

--jde-mobile-base
----plugins
------auth.ts
------bus.ts
------modal.ts
------socket.ts
------tab.ts

• 集成常用组件

--jde-mobile-base  
----components
------navbar
------progress-bar
------qiun-data-charts
------tabbar

• 封装了用户相关接口API

--jde-mobile-base 
-----api
-------system
       --user.js
-------login.js

2.2 接入方式

• 下载插件到项目中

先将插件下载到项目中的uni_modules下，鼠标放在插件目录上右击选在"安装产检三方依赖"项，等待依赖项下载完成。

• 在main.js中注册全局组件

//引入基础框架中的plugins
import plugins from '@/uni_modules/jde-mobile-base/plugins'
//注册基础框架中使用到的组件
import jdeMobileBase from '@/uni_modules/jde-mobile-base/components/jde-mobile-base';
import uviewPlus from 'uview-plus'

import { createSSRApp } from "vue";
import * as Pinia from 'pinia';
import App from "./App.vue";
export function createApp() {
    const app = createSSRApp(App);
    app.use(Pinia.createPinia());
    app.use(jdeMobileBase);
    app.use(plugins);
    app.use(uviewPlus);
    return {
        app,
        Pinia, // 此处必须将 Pinia 返回
    };
}

• config.js中需要包括配置字段

// 应用全局配置
const config = {
   //后台网关地址
   baseUrl: 'http://192.168.0.61:9092/ego/v1',
   clientID: '428a8310cd442757ae699df5d894f051',
   // 应用信息
   appInfo: {
     // 应用名称
     name: "EGO移动端",
     // 应用版本
     version: "1.0.0",
     // 应用logo
     logo: "/uni_modules/jde-mobile-base/static/logo.png",
     // 官方网站
     site_url: "http://www.baidu.com",
         // 微信公众号
         wechat_account: "@JDE奇点能源",
         // 服务热线
         hot_line: "400-1336580/029-84845916",
     // 政策协议
     agreements: [{
         title: "隐私政策",
         url: "https://ruoyi.vip/protocol.html"
       },
       {
         title: "用户服务协议",
         url: "https://ruoyi.vip/protocol.html"
       }
     ]
   }
 }
 export default config

2.3 业务接入自定义底部tabbar页面

• 在App.vue中处理tabbar底部显示

tabbar的数据来源是在App.vue中动态设置

<script>
import { useUserStore } from "@/uni_modules/jde-mobile-base/store/user";
import { useTabBarStore } from "@/uni_modules/jde-mobile-base/store/tabBar";
//业务侧处理的tabbar数据
import tabBarData from './utils/tabBar';

export default {
    onLaunch: function() {
        console.log('App Launch');
        //根据是否登录显示底部tabbar
        uni.hideTabBar();
        //赋值底部tabbar数据,业务侧使用必须添加
        const tabBarStore = useTabBarStore();
        const userStore = useUserStore();
        tabBarStore.setTabBarData(JSON.stringify(tabBarData));
        if (userStore.isLogin) {
            console.log("login");
            tabBarStore.setType('login');
        } else {
            tabBarStore.setType('notLogin');
        }

    },
    : function() {
        console.log('App Show')
        //切换Tabbar,必须
        uni.$on("changeTabBarEvent", (item) => {
            console.log(item);
            uni.switchTab({
                url: item["pagePath"]
            })
        });
    },
    onHide: function() {
        console.log('App Hide')
        //注销事件，必须
        uni.$off("changeTabBarEvent");
    },
}
</script>

• 在App.vue中引入框架中样式

<style lang="scss">
@import 'uview-plus/index.scss';
@import 'uni_modules/jde-mobile-base/static/scss/index.scss';
</style>

• 数据来源

框架中tabbar的数据来源 jde-mobile-base->utils->tabBar.js

const login = [{
        pagePath: "/uni_modules/jde-mobile-base/pages/index",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/home.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/home_.png",
        text: "首页",
    },
    {
        pagePath: "/uni_modules/jde-mobile-base/pages/product",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/product.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/product_.png",
        text: "产品"
    },
    {
        pagePath: "/uni_modules/jde-mobile-base/pages/work",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/work.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/work_.png",
        text: "工作台"
    },
    {
        pagePath: "/uni_modules/jde-mobile-base/pages/mine",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/mine.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/mine_.png",
        text: "我的"
    }
]

const notLogin = [{
        pagePath: "/uni_modules/jde-mobile-base/pages/index",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/home.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/home_.png",
        text: "首页",
    },
    {
        pagePath: "/uni_modules/jde-mobile-base/pages/mine",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/mine.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/mine_.png",
        text: "我的"
    }
]

export default {
    login,
    notLogin
}

• 如何自定义tabbar底部page页面

"首页" 和 "我的"页面为内置页面，路径不用修改

“工作台”和“产品页面”为业务自定义页面，需要业务额外处理

• 业务侧使用数据来源，需要配置（必须）

在demo中, src -> utils -> tabBar.js

在App.vue中引入业务侧定义的tabbar数据

//"首页"和"我的"为内部集成页，不自定义
//自定义page为"产品"和"工作台"，需要将pagePath地址和iconPath地址改成自定义的page地址和icon地址
const login = [{
        pagePath: "/uni_modules/jde-mobile-base/pages/index",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/home.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/home_.png",
        text: "首页",
    },
    {
        // pagePath: "/uni_modules/jde-mobile-base/pages/product",
        // 自定义page时，需要设置成业务侧的page路径
        pagePath: "/pages/product",
        // iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/product.png",
        iconPath: "/static/product.png",
        selectedIconPath: "/static/product_.png",
        text: "产品"
    },
    {
        // pagePath: "/uni_modules/jde-mobile-base/pages/work",
        // 自定义page时，需要设置成业务侧的page路径
        pagePath: "/pages/work",
        // iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/work.png",
        iconPath: "/static/work.png",
        selectedIconPath: "/static/work_.png",
        text: "工作台"
    },
    {
        pagePath: "/uni_modules/jde-mobile-base/pages/mine",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/mine.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/mine_.png",
        text: "我的"
    }
]

const notLogin = [{
        pagePath: "/uni_modules/jde-mobile-base/pages/index",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/home.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/home_.png",
        text: "首页",
    },
    {
        pagePath: "/uni_modules/jde-mobile-base/pages/mine",
        iconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/mine.png",
        selectedIconPath: "/uni_modules/jde-mobile-base/static/images/tabbar/mine_.png",
        text: "我的"
    }
]

export default {
    login,
    notLogin
}

• pages.json配置

{
    "easycom": {
        "autoscan": true,
        "custom": {
            "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
            "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
            "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue"
        }
    },
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "uni_modules/jde-mobile-base/pages/index",
            "style": {
                "navigationBarTitleText": "EGO移动端框架",
                "navigationStyle": "custom"
            }
        },
        {
            "path": "uni_modules/jde-mobile-base/pages/login",
            "style": {
                "navigationBarTitleText": "登录"
            }
        },
        {
            // "path": "uni_modules/jde-mobile-base/pages/product",
            // 自定义page时，需要设置成业务侧的page路径
            "path": "pages/product",
            "style": {
                "navigationBarTitleText": "产品"
            }
        },
        {
            // "path": "uni_modules/jde-mobile-base/pages/work",
            // 自定义page时，需要设置成业务侧的page路径
            "path": "pages/work",
            "style": {
                "navigationBarTitleText": "工作台"
            }
        },
        {
            "path": "uni_modules/jde-mobile-base/pages/mine",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "uni_modules/jde-mobile-base/pages/common/webview/index",
            "style": {
                "navigationBarTitleText": "浏览网页"
            }
        },
        {
            "path": "uni_modules/jde-mobile-base/pages/common/textview/index",
            "style": {
                "navigationBarTitleText": "浏览文本"
            }
        }
    ],
    "subPackages": [
      {
        "root": "uni_modules/jde-mobile-base/pages_mine/pages",
        "pages": [
          {
            "path": "avatar/index",
            "style": {
              "navigationBarTitleText": "修改头像"
            }
          },
          {
            "path": "info/index",
            "style": {
              "navigationBarTitleText": "个人信息"
            }
          },
          {
            "path": "info/edit",
            "style": {
              "navigationBarTitleText": "编辑资料"
            }
          },
          {
            "path": "pwd/index",
            "style": {
              "navigationBarTitleText": "修改密码"
            }
          },
          {
            "path": "setting/index",
            "style": {
              "navigationBarTitleText": "应用设置"
            }
          },
          {
            "path": "help/index",
            "style": {
              "navigationBarTitleText": "常见问题"
            }
          },
          {
            "path": "about/index",
            "style": {
              "navigationBarTitleText": "关于我们"
            }
          }
        ]
      }
    ],
    "tabBar": {
        "custom": true,
        "color": "#000000",
        "selectedColor": "#000000",
        "borderStyle": "white",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "uni_modules/jde-mobile-base/pages/index"
            },
            {
                // "pagePath": "uni_modules/jde-mobile-base/pages/work"
                // 自定义page时，需要设置成业务侧的page路径
                "pagePath": "pages/work"
            },
            {
                // "pagePath": "uni_modules/jde-mobile-base/pages/product"
                // 自定义page时，需要设置成业务侧的page路径
                "pagePath": "pages/product"
            },
            {
                "pagePath": "uni_modules/jde-mobile-base/pages/mine"
            }
        ]
    },
    "globalStyle": {
        "navigationBarTextStyle": "white",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#1677FF",
        "backgroundColor": "#F8F8F8"
    }
}

• 在主工程根目录package.json中加引入vue,vuex等

{
  "name": "uni-preset-vue",
  "version": "0.0.0",
  "scripts": {
    "dev:app": "uni -p app",
    "dev:app-android": "uni -p app-android",
    "dev:app-ios": "uni -p app-ios",
    "dev:custom": "uni -p",
    "dev:h5": "uni",
    "dev:h5:ssr": "uni --ssr",
    "dev:mp-alipay": "uni -p mp-alipay",
    "dev:mp-baidu": "uni -p mp-baidu",
    "dev:mp-jd": "uni -p mp-jd",
    "dev:mp-kuaishou": "uni -p mp-kuaishou",
    "dev:mp-lark": "uni -p mp-lark",
    "dev:mp-qq": "uni -p mp-qq",
    "dev:mp-toutiao": "uni -p mp-toutiao",
    "dev:mp-weixin": "uni -p mp-weixin",
    "dev:mp-xhs": "uni -p mp-xhs",
    "dev:quickapp-webview": "uni -p quickapp-webview",
    "dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
    "dev:quickapp-webview-union": "uni -p quickapp-webview-union",
    "build:app": "uni build -p app",
    "build:app-android": "uni build -p app-android",
    "build:app-ios": "uni build -p app-ios",
    "build:custom": "uni build -p",
    "build:h5": "uni build",
    "build:h5:ssr": "uni build --ssr",
    "build:mp-alipay": "uni build -p mp-alipay",
    "build:mp-baidu": "uni build -p mp-baidu",
    "build:mp-jd": "uni build -p mp-jd",
    "build:mp-kuaishou": "uni build -p mp-kuaishou",
    "build:mp-lark": "uni build -p mp-lark",
    "build:mp-qq": "uni build -p mp-qq",
    "build:mp-toutiao": "uni build -p mp-toutiao",
    "build:mp-weixin": "uni build -p mp-weixin",
    "build:mp-xhs": "uni build -p mp-xhs",
    "build:quickapp-webview": "uni build -p quickapp-webview",
    "build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
    "build:quickapp-webview-union": "uni build -p quickapp-webview-union"
  },
  "dependencies": {
    "@dcloudio/uni-app": "3.0.0-3090820231124001",
    "@dcloudio/uni-app-plus": "3.0.0-3090820231124001",
    "@dcloudio/uni-components": "3.0.0-3090820231124001",
    "@dcloudio/uni-h5": "3.0.0-3090820231124001",
    "@dcloudio/uni-mp-alipay": "3.0.0-3090820231124001",
    "@dcloudio/uni-mp-baidu": "3.0.0-3090820231124001",
    "@dcloudio/uni-mp-jd": "3.0.0-3090820231124001",
    "@dcloudio/uni-mp-kuaishou": "3.0.0-3090820231124001",
    "@dcloudio/uni-mp-lark": "3.0.0-3090820231124001",
    "@dcloudio/uni-mp-qq": "3.0.0-3090820231124001",
    "@dcloudio/uni-mp-toutiao": "3.0.0-3090820231124001",
    "@dcloudio/uni-mp-weixin": "3.0.0-3090820231124001",
    "@dcloudio/uni-mp-xhs": "3.0.0-3090820231124001",
    "@dcloudio/uni-quickapp-webview": "3.0.0-3090820231124001",
    "clipboard": "^2.0.11",
    "dayjs": "^1.11.9",
    "pinia": "^2.0.33",  //此处注意pinia版本，uniapp支持pinia@2.0.33,其他版本会与vue版本冲突
    "uview-plus": "^3.1.36",
    "vue": "^3.2.47",  //vue版本使用3.2.47版本，其他版本会与pinia版本冲突
    "vue-i18n": "^9.2.2",
    "vue-router": "^3.6.5"
  },
  "devDependencies": {
    "@dcloudio/types": "^3.3.3",
    "@dcloudio/uni-automator": "3.0.0-3081220230817001",
    "@dcloudio/uni-cli-shared": "3.0.0-3081220230817001",
    "@dcloudio/uni-stacktracey": "3.0.0-3081220230817001",
    "@dcloudio/vite-plugin-uni": "3.0.0-3081220230817001",
    "@vue/tsconfig": "^0.1.3",
    "less": "^4.2.0",
    "sass": "^1.66.1",
    "sass-loader": "^10.4.1",
    "sass-resources-loader": "^2.2.5",
    "typescript": "^4.9.5",
    "vite": "^4.5.1",
    "vue-tsc": "^1.8.8"
  }
}