一、代码环境
-
项目总体上，主要使用
vue2 + typeScript + scss实现 -
用到的库：
vue-router 3.2 + axios + vuex 3.4 + vant 2.12 -
由于
vue2对ts支持不好，所以使用了vue-property-decorator提高TS的使用体验
二、关于网络请求
1、名词解释
token：用户登录成功，后台生成的唯一id，用于鉴定用户的权限secret_key：参与传输数据的签名refresh_token：用于刷新token，重置token的过期时间
2、设计思路
- 用户登录后，后端生成
token、secret_key、refresh_token，并设置token和refresh_token过期时间，refresh_token过期时间会比token长； token即将过期时，可以使用refresh_token换取新的token和refresh_token，并重置token过期时间；
3、请求拦截器
- 请求头携带上
token、uuid、渠道、包名、版本号；有版本号方便做兼容 - 需要签名的接口，请求头携带签名；签名算法：
MD5
4、响应拦截器
请求成功的情况下，通过判断后端返回的状态码做出不同操作。
token过期：删除本地token等用户数据，跳转登录页面；token即将过期：前端请求接口重置token过期时间，此时promise仍处于pending状态，再重发一次用户的请求，获取到数据后返回给用户，并结束promise的pending状态；
三、关于路由封装
路由模块由一个路由规则文件和多个路由文件组成，路由文件以功能模块划分
import {test1 } from '@/router/test1';
import {test2} from '@/router/test2';
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes: [ ...test1 , ...test2 ]
})
1、路由守卫
根据不同的环境执行不同的路由规则
router.beforeEach(async (to:any, from:any, next) => {
//小程序环境是异步获取，所以要加用到 await
const isMiniprogram = await _getMiniprogramEnv()
if(isMiniprogram) {
miniRputer(to, from, next)
}else if(store.state.isApp){
appRputer(to, from, next)
}else{
h5Rputer(to, from, next)
}
}）
2、H5端路由规则
获取token确认用户是否登录；获取路由配置，判断用户前往的页面是否需要登录；根据两个状态决定进去下一页还是跳转登录
3、APP内嵌页路由规则
获取路由配置，判断下一个页面是否为APP原生页面，如果是则调用方法通知APP跳转原生页面；
四、关于APP交互
1、基础交互
-
APP与H5交互主要依赖于
window对象； -
安卓在window定义一个js方法xxx，H5通过
window.xxx()去调用。为了防止变量污染，建议再套一层对象，如window.xxxxx.xxx()； -
ios则是在
window.webkit.messageHandlers上定义js方法；ios需要调用window.webkit?.messageHandlers[this.fnName].postMessage(param)传递数据。注意，ios的postMessage方法只接收一个参数
2、安全
考虑到H5的代码有泄露风险，攻击者可能伪造交互代码，通过APP发送给其他用户，其他用户进入伪造的页面后，攻击者可以获取到该用户的token等数据。
解决方案：APP内设置域名白名单，非白名单中的域名不返回敏感数据
五、关于支付
支付方式：微信浏览器内公众号支付、外部浏览器微信支付、支付宝支付
微信浏览器内公众号支付：
- 调用微信私有接口
WeixinJSBridge的getBrandWCPayRequest方法，并传入所需参数 - 通过回调函数的返回值，判断支付是否成功
外部浏览器微信支付、支付宝支付：
- 点击付款，请求后端接口
- 后端返回支付链接（微信网页的链接）
- 前端跳转该链接，弹出微信支付的密码验证
- 支付完成
