09.03 商城移动端常见问题

手册阅读须知：本手册仅针对 JooLunPro-商城端

介绍

项目基础业务流程说明
项目中一些特殊逻辑处理和说明

业务流程说明

登录退出

在请求接口时,会根据本地是否有缓存 session 自动在 header 中添加,如果没有缓存,如果接口需要登录才能访问,会自动跳转到登录页面,登录成功后,会自动跳转到之前访问的页面; 如果有缓存,则接口会根据 session 是否过期返回判断,如果过期,则跳转到登录页面,登录成功后,会自动跳转到之前访问的页面;

微信小程序, H5, 微信公众号 H5, APP 的登录逻辑说明的登录流程做了兼容处理, 具体查看 App.vue 文件的 doLogin() 方法
登录成功后会触发 /utils/api.js 的登录方法 loginSuccess() 方法的
退出会触发 /utils/api.js 的退出方法 logoutSuccess() 方法的

api 接口

在 H5 端和 App 端的接口请求中的 header 都会添加租户 ID tenant-id 参数, 根据返回自动判断是否需要登录

所有接口存放在 /utils/api.js 文件中

支付说明

支付页面详情显示统一在 /pages/pay 目录下,包括订单支付, 余额充值, 付费会员

支付付款操作和付款结果统一在 /pages/pay/utils/util.js 中统一处理
App 微信支付的第三方应用 ID 在 manifest.json 中配置,并且在 App.vue 中获取 appId

config 配置文件说明

/config/env.js 是系统默认的一些配置入口,包括

小程序和 App 连接请求地址配置
商城默认名称配置
App 默认租户 ID 配置, App 更新升级版本地址配置

国际化

系统国际化请参考 (Uniapp 国际化文档)[https://uniapp.dcloud.net.cn/tutorial/i18n.html]

国际化使用请查看 /locale/index.js 文件内说明

如何去掉国际化,还原项目的中文显示

使用 VS Code 工具打开项目 ,然后下载 I18n Tools 插件

任选一个文件夹右键选择 i18n-tools国际化工具 - 项目设置, 然后将文件内容改为下面的内容(不要直接全部复制,不然格式会报错,建议只拷贝值)

选一个需要还原的文件夹, 点击右键 i18n-tools国际化工具 - 还原当前目录 我们测试了还原操作, 但没有全面的测试显示效果, 所以全部还原后请自行测试是否正常

module.exports = {
  entry: ["pages", "components"], // 提取、还原、遗漏扫描入口文件夹，可以配置多个,默认是 src
  outDir: "locale", // i18n 输出文件夹 默认是 src/locales
  outShow: 1, //输出文件展示结构 1 扁平化结构 2树级结构 默认扁平化
  exclude: ["locale"], // 不提取的文件夹, 默认是 ['src/locales']
  extensions: [".vue", ".js", ".ts"], // 提取的文件后缀名，默认是 ['.js', '.vue', '.ts']
  filename: "zh-Hans", // 输出的文件名,默认为 zh_cn
  extname: "json", //  输出的文件后缀名默认为 js  ,支持json和js（js格式为 module.exports = {} 或 export default {}），
  langList: ["en"], // 翻译目标语言列表，默认是 ['en']   具体语种请自行查看。注意：使用不同的翻译接口，需要更换对应的语言编码，腾讯翻译、火山翻译、谷歌翻译语言编码大致相同，百度要特别注意，与上述3种翻译有不同的语言编码
};

常见问题说明

如何关闭客服聊天

不想使用系统的客服聊天功能可以进行手动关闭客服聊天

在前端每个工程项目文件夹下面有一个 enableIM 字段(全局搜索 enableIM = true)用来控制是否开启客服功能的操作，将 enableIM 的值改为 false 就能关闭客服IM，关闭后不会进行Im连接逻辑，然后会隐藏所有客服相关的显示和页面。

如果想要客服聊天，然后出现下面图片情况，请检查是否部署成功 OpenIM 服务，部署文档： 04.16-OpenIM-客服系统

租户 ID 说明

因为是多租户系统,所以在接口请求时,H5 端和 App 端是必须要在 header 中传入租户 ID 的, 所以系统做了如下操作:

各端处理

H5 端：通过域名获取或者 url 的参数 tenant_id获取租户 ID

Vue3 项目因 SSR 需要，Uniapp 的 H5 端会在 navigator 标签外层嵌套 a 标签, Uniapp 文档说明: https://uniapp.dcloud.net.cn/component/navigator.html#navigator 所以 H5 端把所有 href 都自动添加了租户 ID,具体处理步骤查看 @/libs/common/mixins.ts 文件的 addTenantIdToAllLinks 方法
App 端：通过配置文件 @/config/env.js 的 tenantId 获取租户 ID
微信小程序：后台接口会自动根据小程序获取租户 ID,前端不需要处理

页面跳转

uni 统一拦截器

采用了 uni 统一拦截器,拦截了 uni 的页面跳转方法,文档说明: https://uniapp.dcloud.net.cn/api/interceptor.html (主要为了兼容 H5 端) 原有 uniapp 的跳转方法 uni.navigateTo()、uni.redirectTo()、uni.switchTab()、uni.reLaunch()、uni.navigateBack() 在 @/libs/common/router-h5.ts中跳转时 url 都会添加租户 ID 处理
快捷调用跳转页面的方法
```
this.$jl.goPage(url); 或者 this.$jl.goPage(url, openType);
```
openType(可选,默认 navigate) 对应为 uniapp 的类型 "navigate" | "redirect" | "switchTab" | "reLaunch" | "navigateBack"

存储缓存处理

因为多租户商城的原因, 部分缓存数据必须做到数据隔离, 所以为了保证不同租户下的缓存数据唯一, 在 @/libs/common/storage.ts 文件中, 保存的 key 做了特殊处理,以保证数据唯一性.具体逻辑查看 @/libs/common/storage.ts 建议使用方法:
uni.$jl.storage.setStorageSync(key, data);
uni.$jl.storage.getStorageSync(key);
uni.$jl.storage.removeStorageSync(key);
注意: 不建议使用 uni.setStorageSync(), 除非缓存的数据多租户可以公用, 不然可能会切换不同租户商城时导致存储数据混乱的问题, 可以使用 uni.setStorage(), 因为已经使用了 uni 统一拦截器,保证了存储 key 的唯一 (说明:uni 统一拦截器只能针对异步的方法,所以不建议使用 uni.setStorageSync())

兼容其他小程序

如果需要兼容其他小程序需要和后台一起同步支持才行,下面是前端注意事项:

新增客户端请求类型(目前有 H5-WX:微信浏览器, H5:普通浏览器, MA:微信小程序, APP )
租户 ID 传值问题
支付是否支持问题
主要相关文件

App.vue 的登录逻辑 doLogin() 方法 /utils/api.js 的 header 参数接口请求类型区分 /pages/pay/utils/util.js 支付页面的支付类型区分