手册阅读须知：本手册仅针对 JooLunPro-商城端
介绍
App.vue 页面说明，包括商城全局变量保存，全局主题样式设置，底部 tabBar，首页装修，版本检测，客服 IM，购物车数量，登录处理等
在首次打开应用时 onLaunch() 方法触发时,进行了如下处理:
- 判断网络连接是否正常, 用于接口请求时判断
- 获取首页数据中的主题数据,并对主题数据进行初始化操作(包括 tabbar 处理)
- 初始化国际化语言
- 各端的特殊逻辑处理:
- H5 端: 初始化租户 ID,如果 url 中有 tenant_id 参数,则赋值给全局变量 tenantId; 如果没有,则根据域名获取租户 Id,如果获取失败,则提示需要租户 ID
- 微信小程序端: 初始化小程序登录操作; 检查小程序版本更新
- App 端: 检查 App 版本更新; 配置租户 ID; 配置微信 App 支付 ID
概述
-
globalData 全局变量保存
参考[UniApp globalData说明](https://uniapp.dcloud.io/collocation/App?id=globaldata) -
目前保存的变量
{ tenantId: null, // 租户Id接口使用-小程序登录后才有值,app默认在@/config/env中配置,h5根据域名获取或者在url参数中获取 appId: null, // 小程序端为小程序Id, 微信浏览器为公众号appId componentAppId: null, // 微信浏览器中h5有效: 第三方平台appid, url中携带,或者根据appId获取 paymentWxAppId: null, // 仅App有效:微信支付移动应用ID,自动取manifest.json的微信appId mallConfig: { //单店铺会隐藏店铺相关: 店铺信息,店铺主页,店铺入住,商城客服 mallMode: '1', // 显示类型： 1 多店铺 2 单店铺,在首页装修数据)(initPageDeviseData)中设置该参数 shopId: '-1', // 默认为-1. 店铺商城小程序或店铺公众号有值,初始化主题方法(initTheme)中设置 homePath: '/pages/home/index' // 首页地址-返回首页时用到, 默认应该是第一个tabbar页面(目前限制首页是不能修改,所以此处为预留后面可以动态修改),修改tabbar时根据装修数据可能会修改该值, }, hasNetwork: true, // 网络是否正常 logining: false, // 是否正在登录中,避免同一时间多次触发登录 JIM: null, //JLIMJMessage, 客服聊天(OpenIM)对象 IMdata: {//IM客服相关数据 IMOpenLog: false, // 控制台显示日志 IMplatform: '5', // OpenIM连接必须参数,具体可查看文档 IMoperationID: '',// OpenIM连接必须参数,具体可查看文档 IMuserID: '',// OpenIM连接必须参数,具体可查看文档 IMtoken: '',// OpenIM连接必须参数,具体可查看文档 IMJSwsAddr: '', //wss连接地址 IMloginStatus: false, //登录状态 IMconnectStatus: 0, // 服务器连接状态:0,:失败;1:成功;2:连接中 IMconnectNum: 0, //连接次数，超过10次后需要手动重连 IMmessageList: [], // 会话列表 IMheartCheckTimer: null, //检查自动重连计时器 IMcheckIMLoginOK: false //10秒内检查登录是否正常，不正常就表示已经断开连接了,会自动重连5次 } }
主题设置 initTheme()
所有主题数据是在首页装修的数据设置的,所以需要先判断是否有装修数据，如果没有就使用默认数据
-
已封装 js 文件为
/utils/theme.js, App.vue 中直接调用initTheme()方法 -
所有主题数据已封装到
/libs/common/mixins.ts中,该文件中的方法在所有vue文件都可以使用,具体说明可查看该文件 -
默认主题色:
#e54d42(/libs/common/theme.ts) -
initTheme 方法说明
- 首先判断 微信小程序和微信 H5 是否为店铺小程序或店铺公众号(方法名: initTheme) 如果是店铺小程序或店铺公众号，则获取店铺首页装修数据和主题数据 如果不是店铺小程序或店铺公众号，则获取商城首页装修数据和主题数据
- 然后获取装修数据,获取首页装修数据(方法名: initPageDeviseData)
-
设置应用主题数据,包括设置主题色,主题文字颜色,主题背景色,主题背景文字颜色(方法名: setThemeColor)
-
设置 H5 浏览器标题和 icon(方法名: setH5Favicon)
-
设置手机状态栏颜色(手机最顶部的电池,时间,Wi-Fi 信息的图标颜色)(方法名: setNavigationBarColor)
-
设置 tabbar 数据(方法名: saveTabBarData)
登录 doLogin()
微信小程序和微信公众号登录初始化操作,使用该登录时系统会自动关联已有微信用户信息进行登录
- 其他端登录在登录页面进行登录
页面初始化方法 initPage()
页面初始化方法，提供给每个页面的 onLoad/onShow 方法调用, 有些页面必须要有必要的数据才正确,所以此处提供了一个方法，用于页面初始化
国际化 initI18n()
初始化国际化语言设置, 如果之前设置过国际化语言, 那么自动显示上一次国际化语言
H5 端获取租户 ID
h5 根据域名获取租户 id; 如果 url 有租户 Id 参数 ,那么直接返回