秦坤助贷开发文档

所需技术栈以及参考资料

• Vue2 vuejs
• TS TypeScript
• 在vue2中使用TS 需要的插件 vuex-persistedstate、vuex-module-decorators、vue-property-decorator
• uni-app
• router 插件 uni-simple-router
• 微信SDK
• mockjs 模拟数据

项目流程图

smile-vue-router 插件使用

任务栏：
    1、配置routes，实现路由匹配
    2、实现登录拦截
    3、第一次进入系统时触发vue-router

1、配置routes，实现路由匹配

# vue.config.js
// 在vue.config.js 文件中配置以下代码，自动获取uni-app pages.json里面路由配置
const TransformPages = require('uni-read-pages')
const {webpack} = new TransformPages()
module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.DefinePlugin({
                ROUTES: webpack.DefinePlugin.runtimeValue(() => {
                    const tfPages = new TransformPages({
                        // 读取pages.json 中 对应属性
                        includes: ['path','name', 'aliasPath','meta']
                    });
                    return JSON.stringify(tfPages.routes)
                }, true )
            })
        ]
    },
}
// 如何使用--在页面中直接使用 ROUTES
// 在router/index.ts 文件中使用
routes: [
    ...ROUTES,
    {
        path: '*',
        redirect:(to: Router)=>{
            return {name:'404'}
        }
    }
]
# pages.json
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                // meta 自定义属性，可以在这个属性里配置其他的自定义属性，在vue-router里读取出来
                "meta": {
                    "pageType": "tabBar"
                },
                "navigationStyle": "custom",
                "app-plus" : {
                    "bounce" : "none" // 取消APP端iOS回弹,避免与下拉刷新冲突 (可统一配在 'globalStyle')
                }
            }
        },
    ...
]

2、实现登录拦截

# router/index.ts
import {RouterMount,createRouter, Router, totalNextRoute, navtoRule} from 'uni-simple-router';
import { STORE_USER } from '@/store/index';
// 配置路由
const router = createRouter({
    platform: process.env.VUE_APP_PLATFORM,
    routes: [
        ...ROUTES,
        {
            path: '*',
            redirect:(to: Router)=>{
                return {name:'404'}
            }
        }
    ]
});
// 路由拦截，在路由响应之前处理
router.beforeEach((to, from, next) => {
    routerBefore(to, from);
    next();
});
// 路由拦截，在路由响应之后处理
router.afterEach((to, from) => {
    // routerBefore(to, from, router.push);
})
// 自定义路由处理函数
function routerBefore(to: totalNextRoute, from: totalNextRoute) {
    const { userAuto, merchantAuto } = to.meta as any;
    // 校验用户是否登录
    if(userAuto && !sessionStorage.getItem("token")) {
        STORE_USER.emitAuthLogin({type: 'user', token: STORE_USER.getToken, to: to.path, from: from.path});
    }
    // 校验资方是否登录
    if(merchantAuto && !sessionStorage.getItem("mc-token")) {
        STORE_USER.emitAuthLogin({type: 'merchant', token: STORE_USER.getMCToken, to: to.path, from: from.path});
    }
}
export {
    router,
    RouterMount,
    routerBefore
}

3、第一次进入系统时触发 vue-router

# App.vue
<script lang="ts">
import { Vue } from 'vue-property-decorator';
export default Vue.extend({
    mpType: 'app',
    onLaunch() {
        // 第一次进入系统，由于Router插件不能拦截，由以下实现登录鉴权
        if(window.performance.navigation.type === 0) {
            // performance.navigation.type = 0 表示用户不是刷新操作（刷新操作 = 1）
            // routerBefore(this.$Route as totalNextRoute, this.$Route as totalNextRoute);
            this.$Router.replace({ path: this.$Route.path, query: this.$Router.query})
        }
        console.log('App Launch')
    },
    onShow() {
        console.log('App Show')
    },
    onHide() {
        console.log('App Hide')
    }
});
</script>

store vuex状态管理

参考地址
https://juejin.cn/post/6844903942275465230#heading-4

关闭mock / 使用mock

# main.ts
// 引入mock
import "./mock/index.ts";
// 禁止使用mock 注释掉这一行代码即可

微信SDK使用